sharaf/theme-designer
Use when the user wants to design, critique, or refine a website theme, visual style, look and feel, branding, CSS theme, design system, tokens.css file, or CSS token system. Produces theme directions, typography/color/composition/motion systems, implementation-ready CSS custom properties, component motif rules, and light/dark/density variant strategy.
99
100%
Does it follow best practices?
Impact
99%
1.45xAverage score across 7 eval scenarios
Passed
No known issues
Quality
Discovery
100%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 skill description that clearly defines both when to use it and what it produces. It uses third-person voice correctly, includes a rich set of natural trigger terms spanning both design and development vocabulary, and specifies concrete deliverables. The description is well-scoped to a distinct niche of website theme/design system work without being overly verbose.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Lists multiple specific concrete actions: 'design, critique, or refine a website theme', 'Produces theme directions, typography/color/composition/motion systems, implementation-ready CSS custom properties, component motif rules, and light/dark/density variant strategy.' These are highly specific deliverables. | 3 / 3 |
Completeness | Explicitly answers both 'what' (produces theme directions, CSS custom properties, component motif rules, variant strategies) and 'when' (starts with 'Use when the user wants to design, critique, or refine...' with clear trigger scenarios). | 3 / 3 |
Trigger Term Quality | Excellent coverage of natural terms users would say: 'website theme', 'visual style', 'look and feel', 'branding', 'CSS theme', 'design system', 'tokens.css', 'CSS token system'. These cover both designer and developer vocabulary naturally. | 3 / 3 |
Distinctiveness Conflict Risk | Clearly carved out niche around website theming, CSS tokens, and design systems. The specific mention of 'tokens.css', 'CSS custom properties', 'light/dark/density variant strategy' makes it highly distinct from general CSS or branding skills. | 3 / 3 |
Total | 12 / 12 Passed |
Implementation
100%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 skill that efficiently packs a complex design workflow into a scannable, actionable format. The reference table for progressive disclosure is exemplary, the mode-specific outputs are concrete and well-differentiated, and the decision checklist provides clear minimums without over-explaining. The tokens.css example grounds the implementation guidance in real, executable CSS.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The content is dense and efficient. It avoids explaining what themes, CSS variables, or design systems are. Every section delivers actionable structure—tables, checklists, templates—without padding or redundant explanation. | 3 / 3 |
Actionability | Provides concrete output structures per mode, a decision checklist with specific minimums (e.g., exact type scale notation, required color tokens), executable CSS template with real values, and explicit critique/refine skeletons. The tokens.css example is copy-paste ready with realistic values. | 3 / 3 |
Workflow Clarity | The workflow is clearly sequenced: infer mode → load references → produce mode-specific outputs → run decision checklist → final checks. Validation is explicit ('Before every final deliverable, run evaluation-guardrails.md') and the fix sequence in critique mode includes causal ordering. The final checks section serves as a comprehensive verification checkpoint. | 3 / 3 |
Progressive Disclosure | Excellent progressive disclosure with a clear reference table mapping needs to specific files, all one level deep. The SKILL.md serves as a concise overview with actionable defaults while deferring depth (full token gates, evaluation criteria, workflow details) to well-named reference files. Navigation is immediately clear from the table. | 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.
Validation — 11 / 11 Passed
Validation for skill structure
No warnings or errors.
Reviewed
Table of Contents