CtrlK
BlogDocsLog inGet started
Tessl Logo

frontend-app-builder

Use for new frontend applications, dashboards, games, creative websites, hero sections, and visually driven UI from scratch, or when the user explicitly asks for a redesign/restyle/modernization. Builds from clean, airy, high-taste, readable image-generated concept design with section-specific references, faithful implementation, and browser testing.

64

Quality

75%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./plugins/build-web-apps/skills/frontend-app-builder/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

62%Weight 40%Scale 1-5

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

The body delivers an exceptionally clear, well-sequenced workflow with strong validation checkpoints and actionable checklists, but it is markedly verbose — many rules are restated across six or seven sections — and most detailed guidance is inlined rather than offloaded to reference files. Deduplication and splitting content into references would meaningfully improve it.

Suggestions

Deduplicate repeated rules: state the hero eyebrow/kicker/badge/pill prohibition and the white-vs-cream color fidelity rule once in Hard Rules, then reference them from other sections instead of restating each verbatim six or more times.

Move large inlined blocks (Before Coding inventory, Design Quality Bar, Visual Direction Defaults, Verification checklist, Surface Gates) into separate files under references/ and link to them from SKILL.md to improve progressive disclosure and reduce token cost.

Tighten verbose phrasing throughout — e.g. 'Do not crop, slice, zoom, or reuse a tiny part of an earlier image as the source of truth' and similar restated directives — preserving the rule while cutting redundancy.

DimensionReasoningScore

Conciseness

Noticeably verbose: the same rules are restated many times — e.g. the hero 'eyebrow/kicker/badge/pill' prohibition and the 'white rather than cream, ivory, beige' color rule each reappear across Hard Rules, Design Quality Bar, Visual Direction Defaults, Before Coding, Implementation, Verification, and Surface Gates; the body could be cut substantially without losing guidance.

2 / 5

Actionability

Highly concrete, actionable guidance — 'use React + Vite', 'use view_image on both the accepted concept and the latest browser screenshot', the 13-step verification checklist, and the fidelity-ledger format — but it is instruction-only with no executable code or commands, leaving minor gaps.

4 / 5

Workflow Clarity

Clear sequence (Image Gen Workflow → Concept Review → Before Coding → Implementation → Verification → Final Response) with explicit validation checkpoints and feedback loops — 'Keep fixing visual, interaction, responsive... mismatches until view_image comparison would pass agency sign-off' and 'do not final-answer with fixable visual issues'.

5 / 5

Progressive Disclosure

Well-sectioned with a clearly signaled one-level reference ('references/imagegen-website-concepts.md'), but the bulk of detailed guidance (Design Quality Bar, Visual Direction Defaults, Before Coding inventory, Verification checklist, Surface Gates) is inlined in SKILL.md rather than split into separate reference files.

3 / 5

Total

14

/

20

Passed

Description

87%Weight 40%Scale 1-5

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

A strong description that explicitly states both what it does and when to use it, with concrete triggers and a distinctive image-gen-concept-to-implementation niche. It could add a few common trigger synonyms (landing page, web app, mockup) and crisper action enumeration, but it is clear and unlikely to misfire.

DimensionReasoningScore

Specificity

Lists several concrete capability areas — 'new frontend applications, dashboards, games, creative websites, hero sections' — and build actions like 'faithful implementation, and browser testing', but the actions lean toward methodology rather than a crisp enumerated feature set, leaving minor coverage gaps.

4 / 5

Completeness

Explicitly answers both: 'when' via 'Use for new frontend applications... or when the user explicitly asks for a redesign/restyle/modernization' and 'what' via 'Builds from clean, airy... concept design with section-specific references, faithful implementation, and browser testing' with concrete trigger phrases.

5 / 5

Trigger Term Quality

Strong natural trigger terms with synonyms ('redesign/restyle/modernization', 'from scratch', 'hero sections'), but a few common phrases a user might say ('landing page', 'web app', 'mockup/prototype') are missing, so coverage is good but not fully comprehensive.

4 / 5

Distinctiveness Conflict Risk

Clear niche — image-gen concept design followed by faithful frontend implementation and browser verification — with distinct triggers and minimal overlap risk with unrelated skills.

5 / 5

Total

18

/

20

Passed

Validation

100%

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository
openai/plugins
Reviewed

Table of Contents

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.