design-check
Audit UI code against the Mediatheca design system. Checks F# (Fable/Feliz) view files and CSS for violations of glassmorphism rules, typography hierarchy, theme tokens, DesignSystem.fs usage, backdrop-filter nesting, spacing/layout conventions, animation standards, and DaisyUI 5 patterns. Use when the user asks to "design check", "check design", "audit styles", "review UI code", "check glassmorphism", or any request to verify UI code follows the design system.
93
89%
Does it follow best practices?
Impact
99%
2.82xAverage score across 3 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 an excellent skill description that clearly defines a narrow, specific niche—auditing UI code against the Mediatheca design system. It enumerates concrete checks performed, names the specific technology stack, and provides explicit trigger phrases in a 'Use when...' clause. The description is comprehensive yet concise, making it easy for Claude to select this skill precisely when needed.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Lists multiple specific concrete actions: checks F# (Fable/Feliz) view files and CSS for violations of glassmorphism rules, typography hierarchy, theme tokens, DesignSystem.fs usage, backdrop-filter nesting, spacing/layout conventions, animation standards, and DaisyUI 5 patterns. | 3 / 3 |
Completeness | Clearly answers both 'what' (audits UI code against the Mediatheca design system, checking specific rules) and 'when' (explicit 'Use when...' clause with quoted trigger phrases and a general catch-all for verifying UI code follows the design system). | 3 / 3 |
Trigger Term Quality | Includes natural trigger phrases users would say: 'design check', 'check design', 'audit styles', 'review UI code', 'check glassmorphism', plus domain-specific terms like 'glassmorphism', 'DaisyUI 5', 'Fable/Feliz', and 'design system' that help with precise matching. | 3 / 3 |
Distinctiveness Conflict Risk | Highly distinctive due to the specific technology stack (F#/Fable/Feliz, DaisyUI 5), the named design system (Mediatheca), and the narrow focus on glassmorphism and design token auditing. Very unlikely to conflict with other skills. | 3 / 3 |
Total | 12 / 12 Passed |
Implementation
79%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
This is a well-structured, concise skill that provides clear actionable guidance for auditing UI code against a design system. Its main strengths are the concrete workflow steps, specific report format template, and severity classification. The primary weaknesses are the lack of validation/feedback loops (especially important for the auto-fix offer) and some ambiguity about whether the inline rule categories are exhaustive or merely summaries of the referenced design-rules.md.
Suggestions
Add a validation step after auto-fixing violations (e.g., re-run the audit to confirm fixes resolved issues without introducing new violations).
Clarify the relationship between the 9 inline rule categories and `references/design-rules.md`—state explicitly that the bullet list is a summary and the referenced file contains full rules with examples.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The content is lean and efficient. Every section serves a purpose—no unnecessary explanations of what design systems are or how auditing works. It assumes Claude understands F#, CSS, and design system concepts. | 3 / 3 |
Actionability | Provides a concrete git command for file discovery, specific file paths to read, an explicit list of 9 rule categories to check, and a detailed report format with table structure. The workflow is copy-paste actionable. | 3 / 3 |
Workflow Clarity | The 6-step workflow is clearly sequenced and well-structured, but lacks validation checkpoints. There's no step to verify that design-rules.md was successfully loaded, no feedback loop if DesignSystem.fs is missing or changed, and no verification step after auto-fixing violations. | 2 / 3 |
Progressive Disclosure | References `references/design-rules.md` and `src/Client/DesignSystem.fs` appropriately, but since no bundle files are provided, we can't verify these exist. The 9 rule categories are listed inline as bullet points rather than being fully detailed in the referenced design-rules.md, creating ambiguity about where the authoritative rules live. The skill itself is well-organized but the relationship between inline rules and the referenced file is unclear. | 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
- heimeshoff/Mediatheca
- Commit
b6b34e6
- 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.