Create polished, intentional frontend interfaces. Use this skill when building any UI — dashboards, admin panels, landing pages, marketing sites, or web applications. Routes to specialized guidance based on context.
71
58%
Does it follow best practices?
Impact
88%
1.31xAverage score across 3 eval scenarios
Passed
No known issues
Optimize this skill with Tessl
npx tessl skill review --optimize ./frontend-design-principles/SKILL.mdQuality
Discovery
82%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 effectively communicates when to use the skill with a clear 'Use this skill when...' clause and good trigger term coverage across common UI project types. However, it lacks specificity in concrete actions (what exactly does it do beyond 'create'?), and its very broad scope covering all frontend work creates potential overlap with more specialized UI skills. The phrase 'polished, intentional' is subjective filler that doesn't aid skill selection.
Suggestions
Add specific concrete actions beyond 'create' — e.g., 'Generates component layouts, applies responsive design patterns, structures page hierarchies' to improve specificity.
Clarify what 'routes to specialized guidance based on context' means — listing the specialized sub-areas would help Claude understand the skill's unique value and reduce conflict risk with other UI-related skills.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Names the domain (frontend interfaces) and lists types of UIs (dashboards, admin panels, landing pages, marketing sites, web applications), but doesn't describe concrete actions beyond 'create' and 'routes to specialized guidance.' Words like 'polished' and 'intentional' are vague qualifiers rather than specific capabilities. | 2 / 3 |
Completeness | Clearly answers both 'what' (create frontend interfaces) and 'when' with an explicit 'Use this skill when...' clause listing specific trigger scenarios (building dashboards, admin panels, landing pages, marketing sites, web applications). | 3 / 3 |
Trigger Term Quality | Includes strong natural keywords users would say: 'UI', 'dashboards', 'admin panels', 'landing pages', 'marketing sites', 'web applications', 'frontend'. These cover a good range of terms users would naturally use when requesting UI work. | 3 / 3 |
Distinctiveness Conflict Risk | While it specifies frontend/UI work, the scope is extremely broad — covering dashboards, landing pages, admin panels, and web applications could overlap with many other skills (e.g., a React skill, a CSS skill, a dashboard-specific skill). The phrase 'routes to specialized guidance' suggests it's a meta-skill, which adds some distinction but also ambiguity. | 2 / 3 |
Total | 10 / 12 Passed |
Implementation
35%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
This skill file reads more like a design philosophy manifesto than an actionable skill. While it has genuine insight about avoiding generic AI output and includes useful checklists, it's severely over-written — spending hundreds of tokens on motivational prose about craft and defaults that could be condensed to a fraction of the size. The lack of any concrete code examples, CSS snippets, or executable guidance is a significant gap for a frontend design skill.
Suggestions
Cut 'Why This Process Exists' and 'Where Defaults Hide' sections by 75% — distill each to 2-3 bullet points of actionable guidance rather than philosophical exposition.
Add concrete, executable examples: a CSS token naming example, a component code snippet showing a 'signature element' in practice, or a before/after showing generic vs. intentional output.
Move 'Principles' and 'Craft Foundations' sections to a referenced file (e.g., references/principles.md, which is already listed) to reduce the main file's token footprint.
Replace subjective validation checks ('squint test,' 'swap test') with more concrete criteria — e.g., specific CSS property ranges to check, contrast ratio thresholds, or a structured self-review template.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The skill is extremely verbose at ~200+ lines, with extensive philosophical exposition about defaults, craft, and design intent that Claude already understands conceptually. Sections like 'Why This Process Exists,' 'Where Defaults Hide,' and lengthy principle explanations ('Sameness Is Failure,' 'Intent Must Be Systemic') are padded with motivational prose rather than actionable instruction. Much of this reads like an essay rather than a skill file. | 1 / 3 |
Actionability | The skill provides structured checklists (Intent Questions, Four Required Outputs, pre-show checks) which give concrete steps, but lacks any executable code, specific commands, or copy-paste-ready examples. The 'Direction' format template is helpful but the guidance remains largely conceptual — telling Claude what to think about rather than what to do. No concrete CSS examples, no component code, no specific tool usage. | 2 / 3 |
Workflow Clarity | There is a clear multi-step sequence: (1) answer intent questions, (2) produce four outputs, (3) propose direction and confirm, (4) run checks before showing. However, validation checkpoints are subjective ('squint test,' 'swap test') rather than concrete verification steps. The routing logic (app.md vs marketing.md) is well-defined. Missing explicit feedback loops for iteration — the 'iterate before showing' instruction is vague about what iteration looks like. | 2 / 3 |
Progressive Disclosure | The skill references app.md, marketing.md, and references/principles.md for deeper content, which is good structure. However, the main file itself contains too much inline content that could be split out — the lengthy 'Where Defaults Hide' section, 'Principles' section, and 'Craft Foundations' could live in referenced files. The routing section at the top is well-designed, but the body doesn't practice the disclosure it sets up. No bundle files were provided to verify references exist. | 2 / 3 |
Total | 7 / 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.
Validation — 11 / 11 Passed
Validation for skill structure
No warnings or errors.
40067f1
Table of Contents
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.