frontend-design
Build web interfaces with genuine design quality, not AI slop. Use for any frontend work - landing pages, web apps, dashboards, admin panels, components, interactive experiences. Activates for both greenfield builds and modifications to existing applications. Detects existing design systems and respects them. Covers composition, typography, color, motion, and copy. Verifies results via screenshots before declaring done.
87
84%
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Passed
No known issues
Quality
Discovery
92%Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.
This is a strong description that clearly communicates both capabilities and activation triggers. It lists concrete deliverables (landing pages, dashboards, etc.) and specific design concerns (typography, color, motion). The main weakness is its broad scope which could create overlap with other frontend or design-related skills, and the phrase 'not AI slop' is more of a quality claim than a functional differentiator.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Lists multiple specific concrete actions and domains: landing pages, web apps, dashboards, admin panels, components, interactive experiences, plus specific design concerns like composition, typography, color, motion, and copy. Also mentions screenshot verification. | 3 / 3 |
Completeness | Clearly answers both what ('Build web interfaces... landing pages, web apps, dashboards...') and when ('Use for any frontend work', 'Activates for both greenfield builds and modifications to existing applications'). The 'Use for' and 'Activates for' clauses serve as explicit trigger guidance. | 3 / 3 |
Trigger Term Quality | Includes strong natural trigger terms users would say: 'landing pages', 'web apps', 'dashboards', 'admin panels', 'components', 'frontend work', 'design'. These cover a wide range of how users naturally describe web UI tasks. | 3 / 3 |
Distinctiveness Conflict Risk | While it carves out a niche around design quality and frontend work, the scope is quite broad ('any frontend work') which could overlap with general coding skills, CSS skills, or framework-specific skills. The 'not AI slop' differentiator is subjective rather than functionally distinct. | 2 / 3 |
Total | 11 / 12 Passed |
Implementation
77%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
This is a high-quality, well-structured skill that provides genuinely distinctive and actionable design guidance. Its greatest strengths are the clear workflow with explicit checkpoints, the authority hierarchy that gracefully handles existing codebases, and the specificity of its anti-patterns and module-based guidance. The main weakness is its length — at 300+ lines it could benefit from splitting detailed modules and anti-pattern lists into referenced files, and some philosophical sections (Creative Energy, parts of the authority hierarchy) could be more concise.
Suggestions
Consider splitting Context Modules (A, B, C) and the Hard Rules/Anti-Patterns section into separate referenced files to improve progressive disclosure and reduce the main file's token footprint.
Tighten the 'Creative Energy' section — the list of aesthetic directions (brutalist, art deco, etc.) and rhetorical questions add flavor but limited actionable value for Claude.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The skill is well-written and mostly efficient, but at ~300+ lines it includes some sections that could be tightened. The 'Authority Hierarchy' explanation, 'Creative Energy' section, and some of the anti-pattern lists contain guidance Claude could infer. However, the domain-specific opinions (anti-patterns, module distinctions, tool cascades) genuinely add value and couldn't be assumed. | 2 / 3 |
Actionability | The skill provides highly concrete, actionable guidance throughout: specific signals to detect (CSS variable patterns), exact tool preferences with fallback cascades, named libraries per framework, specific section sequences for landing pages, and clear litmus checks. While it's more instruction-oriented than code-oriented, the guidance is specific enough to be directly executable. | 3 / 3 |
Workflow Clarity | The workflow is clearly sequenced (Detect → Plan → Build → Verify) with explicit checkpoints: Layer 0 classification determines mode, Layer 1 planning creates a user checkpoint before code, litmus checks serve as pre-verification validation, and visual verification has a clear tool preference cascade with scope control. The feedback loop for verification (screenshot → assess → fix → move on) is explicit. | 3 / 3 |
Progressive Disclosure | The content is well-structured with clear headers and logical sections, but it's a large monolithic file. The context modules (A, B, C) and the detailed anti-patterns list could be split into referenced files. There is one external reference (design-iterator agent) but the bulk of content is inline. For a skill this comprehensive, more progressive disclosure via linked files would improve navigability. | 2 / 3 |
Total | 10 / 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.
- Repository
- EveryInc/compound-engineering-plugin
- Commit
d18e28e
- 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.