CtrlK
BlogDocsLog inGet started
Tessl Logo

frontend-design

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.

67

Quality

58%

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Passed

No known issues

Optimize this skill with Tessl

npx tessl skill review --optimize ./skills/frontend-design/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Discovery

67%

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

The description adequately communicates its purpose and includes an explicit 'Use when' clause, which is a strength. However, it lacks specific concrete actions (e.g., responsive layouts, animations, theming) and misses many natural trigger terms users would use (HTML, CSS, UI, website, landing page). The distinctiveness relies heavily on qualitative claims ('high design quality', 'avoids generic AI aesthetics') rather than concrete differentiators.

Suggestions

Add more natural trigger terms users would say, such as 'HTML', 'CSS', 'website', 'landing page', 'UI', 'dashboard', 'React component', '.html'

List more specific concrete actions like 'build responsive layouts, implement animations, create styled forms, design landing pages' to improve specificity and help Claude distinguish this from generic coding skills

DimensionReasoningScore

Specificity

Names the domain (frontend interfaces) and some actions (build web components, pages, applications, generates code), but lacks specific concrete actions like 'create responsive layouts, implement animations, style forms' — it stays at a moderate level of specificity.

2 / 3

Completeness

Clearly answers both 'what' (create distinctive, production-grade frontend interfaces, generates creative polished code) and 'when' (explicitly states 'Use this skill when the user asks to build web components, pages, or applications').

3 / 3

Trigger Term Quality

Includes some natural keywords like 'web components', 'pages', 'applications', and 'frontend', but misses common user terms like 'HTML', 'CSS', 'website', 'landing page', 'UI', 'React', 'dashboard', or file extensions that users would naturally mention.

2 / 3

Distinctiveness Conflict Risk

The description focuses on frontend/web interfaces which provides some distinctiveness, but 'web components, pages, or applications' is broad enough to overlap with general coding skills, React-specific skills, or other web development skills. The emphasis on 'high design quality' and avoiding 'generic AI aesthetics' adds some differentiation but could still conflict with styling or design-focused skills.

2 / 3

Total

9

/

12

Passed

Implementation

50%

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

This skill provides a solid conceptual framework for creating distinctive frontend interfaces with good anti-pattern guidance (what to avoid). However, it lacks concrete executable examples—no code snippets showing actual CSS, HTML, or component implementations that demonstrate the aesthetic principles. The content is somewhat verbose with motivational language that doesn't add instructional value, and it would benefit from validation checkpoints and reference files for specific frameworks or aesthetic examples.

Suggestions

Add 2-3 concrete, executable code examples showing distinctive CSS/HTML implementations (e.g., a typography pairing with CSS variables, a non-generic color scheme setup, a staggered animation sequence) to move from conceptual to actionable.

Add a validation/review checklist at the end of the workflow (e.g., 'Before delivering: verify no default fonts remain, check color contrast, confirm animations are performant, ensure no generic AI aesthetic patterns').

Remove motivational filler like 'Remember: Codex is capable of extraordinary creative work' and 'Don't hold back' — these waste tokens without adding instructional value.

Consider splitting detailed aesthetic guidelines (typography pairings, color palette examples, animation patterns) into a separate reference file linked from the main skill.

DimensionReasoningScore

Conciseness

The skill contains some unnecessary motivational language ('Remember: Codex is capable of extraordinary creative work. Don't hold back...') and repetitive emphasis on avoiding generic aesthetics. The design thinking section and aesthetics guidelines are mostly useful but could be tightened—several points are restated in different ways.

2 / 3

Actionability

The skill provides specific guidance on typography, color, motion, and layout with concrete anti-patterns (avoid Inter, Roboto, purple gradients). However, it lacks executable code examples, specific CSS snippets, or concrete before/after demonstrations. It describes what to do conceptually but doesn't show how with copy-paste ready code.

2 / 3

Workflow Clarity

There is a loose two-phase workflow (design thinking → implementation) with bullet points for each phase, but no explicit validation steps, no checklist for quality review, and no feedback loop for checking the output against the aesthetic goals. For a skill that produces production-grade code, a review/validation step would strengthen the workflow.

2 / 3

Progressive Disclosure

The content is organized into clear sections (Design Thinking, Frontend Aesthetics Guidelines) which is good, but everything is inline in a single file with no references to external resources, example galleries, or supplementary files. For a skill of this complexity covering multiple frameworks and aesthetic approaches, some progressive disclosure to detailed examples or reference materials would be beneficial.

2 / 3

Total

8

/

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.

Validation11 / 11 Passed

Validation for skill structure

No warnings or errors.

Repository
am-will/codex-skills
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.