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.

72

Quality

88%

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

SKILL.md
Quality
Evals
Security

Quality

Content

77%Weight 40%Scale 1-3

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

A highly actionable, well-sequenced workflow with strong validation checkpoints and a real one-level reference. Its main weakness is verbosity from heavy cross-section repetition and a monolithic body that underuses progressive disclosure.

Suggestions

Deduplicate directives repeated across Hard Rules, Image Gen Workflow, Design Quality Bar, Implementation, and Verification (e.g., hero eyebrows/pills/badges, white-vs-cream color lock, container model, asset fidelity) — state each once and reference it.

Move stable reference material such as the Design Quality Bar, Surface Gates, and the full Verification checklist into reference files so SKILL.md reads as an overview with clearly-signaled one-level links.

Trim buzzword padding ("high-taste", "clean, airy") where it restates an already-stated standard without adding actionable detail.

DimensionReasoningScore

Conciseness

Content is domain-specific and not explaining known concepts, but the same directives (hero eyebrows/pills/badges, white-vs-cream color lock, container model, asset fidelity) are restated across Hard Rules, Image Gen Workflow, Design Quality Bar, Implementation, and Verification — it could be tightened substantially, so it sits below the lean anchor.

2 / 3

Actionability

Concrete, executable directives throughout — "default to React + Vite", "use view_image on both the accepted concept and the latest browser screenshot", "inspect at least five concrete comparison points", and a numbered verification checklist, all copy-ready guidance.

3 / 3

Workflow Clarity

Clear sequence (concept → approval → design system → implement section-by-section → verify) with explicit validation checkpoints: view_image pair comparison, fidelity ledger, hard-stops list, and a feedback loop ("keep editing... Do not final-answer with fixable visual issues").

3 / 3

Progressive Disclosure

One clearly-signaled one-level reference exists ("use references/imagegen-website-concepts.md", verified present) and delegates to the @imagegen skill, but the 180-line body is a near-monolithic instruction manual rather than an overview pointing to detailed materials, and content like the Design Quality Bar or Surface Gates could be split into references.

2 / 3

Total

10

/

12

Passed

Description

100%Weight 40%Scale 1-3

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, third-person description with an explicit 'Use for' trigger, concrete surfaces and build actions, and a clear niche. It fully answers what the skill does and when to use it.

DimensionReasoningScore

Specificity

Names concrete surfaces ("new frontend applications, dashboards, games, creative websites, hero sections") and concrete build actions ("image-generated concept design with section-specific references, faithful implementation, and browser testing"), matching the multi-action anchor.

3 / 3

Completeness

Explicitly answers both: "Use for new frontend applications..." (when) and "Builds from... concept design... faithful implementation, and browser testing" (what), with an explicit trigger clause.

3 / 3

Trigger Term Quality

Uses natural terms a user would say — "frontend applications, dashboards, games, creative websites, hero sections" and "redesign/restyle/modernization" — with good coverage of common variations.

3 / 3

Distinctiveness Conflict Risk

The image-gen-concept-first, faithful-frontend-implementation niche plus redesign/restyle/modernization triggers are a clear, distinctive scope unlikely to fire for unrelated skills.

3 / 3

Total

12

/

12

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.