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.

Quality

84%

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

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 with natural language users would employ. It excels at specificity by listing concrete deliverables and design dimensions, and provides explicit 'Use for' and 'Activates for' clauses. The main weakness is its very broad scope covering essentially all frontend work, which could create overlap with other web development or component-specific skills.

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' and verification via screenshots.	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 for web interfaces, the scope is quite broad ('any frontend work') which could overlap with general web development or coding skills. The emphasis on 'genuine design quality, not AI slop' and screenshot verification helps differentiate, but the breadth of 'web apps, dashboards, admin panels' could conflict with more specialized skills.	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, opinionated design skill with excellent workflow structure and strong actionability. Its main weakness is length — at 300+ lines it's comprehensive but could benefit from splitting context modules and anti-pattern lists into referenced files. The authority hierarchy and mode classification system are particularly well-designed, ensuring the skill adapts to existing codebases rather than bulldozing them.

Suggestions

Consider extracting Modules A, B, and C into separate referenced files (e.g., MODULE_LANDING.md, MODULE_DASHBOARD.md, MODULE_COMPONENT.md) to reduce the main skill's token footprint.

The 'Hard Rules & Anti-Patterns' section could be more concise — several items overlap or could be combined (e.g., the multiple entries about generic aesthetics).

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 (font choices, card rules, composition principles) 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 section sequences for landing pages, specific font names to avoid, specific animation library recommendations per framework, a clear tool preference cascade for verification, and concrete examples of good vs bad copy. The guidance is prescriptive and executable.	3 / 3
Workflow Clarity	The workflow is clearly sequenced (Detect → Plan → Build → Verify) with explicit checkpoints: Layer 0 detection determines mode classification, Layer 1 planning creates a user checkpoint before code is written, litmus checks provide pre-verification validation, and visual verification has a clear tool 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 could be split into referenced files. There are two good external references (agent-browser skill, design-iterator agent), but the bulk of content is inline. For a skill this comprehensive, more progressive disclosure would improve token efficiency.	2 / 3
	Total	10 / 12 Passed

Validation

100%

Warnings & errors only

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: b979143

Reviewed: about 17 hours ago

Table of Contents

Discovery Implementation Validation

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.