common-ui-design
Design distinctive, production-grade frontend UI with bold aesthetic choices. Use when building web components, pages, interfaces, dashboards, or applications in any framework (React, Next.js, Angular, Vue, HTML/CSS).
85
83%
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Passed
No known issues
Quality
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 has strong trigger term coverage with explicit framework names and UI-related keywords, and it clearly addresses both 'what' and 'when'. However, the specificity of capabilities leans more toward aesthetic philosophy ('bold aesthetic choices', 'production-grade') rather than concrete actions, and the extremely broad scope (any frontend UI in any framework) creates moderate conflict risk with other development-related skills.
Suggestions
Add more concrete actions to improve specificity, e.g., 'Creates layouts, styles components, implements responsive designs, builds interactive elements' rather than relying on the abstract 'bold aesthetic choices'.
Narrow the distinctiveness by clarifying what makes this skill different from general frontend coding skills—e.g., emphasize it's specifically for visual design quality, styling, and aesthetics rather than logic or functionality.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Names the domain (frontend UI) and mentions some actions ('Design', 'building web components, pages, interfaces, dashboards'), but the core capability description is more about aesthetic philosophy ('bold aesthetic choices', 'production-grade') than listing concrete actions like 'create layouts, style components, implement responsive designs'. | 2 / 3 |
Completeness | Clearly answers both 'what' (design distinctive, production-grade frontend UI with bold aesthetic choices) and 'when' (explicit 'Use when building web components, pages, interfaces, dashboards, or applications in any framework') with specific trigger scenarios. | 3 / 3 |
Trigger Term Quality | Includes strong natural keywords users would say: 'web components', 'pages', 'interfaces', 'dashboards', 'applications', 'React', 'Next.js', 'Angular', 'Vue', 'HTML/CSS', 'frontend', 'UI'. These cover a wide range of terms users naturally use when requesting UI work. | 3 / 3 |
Distinctiveness Conflict Risk | While the 'bold aesthetic choices' and 'distinctive' qualifiers add some differentiation, the scope is very broad (any frontend UI in any framework), which could easily overlap with general coding skills, component library skills, or framework-specific skills. The distinguishing factor is the design/aesthetic emphasis, but 'building web components' or 'dashboards' could trigger many other skills. | 2 / 3 |
Total | 10 / 12 Passed |
Implementation
85%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
A well-structured, opinionated design direction skill that is concise, well-organized, and uses progressive disclosure effectively. Its main weakness is the lack of executable code examples — adding concrete CSS/React snippets for font loading, color variable setup, or animation patterns would make it significantly more actionable. The anti-patterns section is a strong differentiator that adds real value.
Suggestions
Add 1-2 executable code snippets (e.g., a `next/font` setup or CSS custom property block with a sample palette) to boost actionability from direction to implementation-ready guidance.
Include a small concrete example showing a complete styled component or HTML/CSS block that demonstrates the aesthetic principles in practice.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | Every section is lean and directive. No unnecessary explanations of what CSS is or how fonts work — it assumes Claude's competence and delivers opinionated, specific guidance efficiently. | 3 / 3 |
Actionability | Provides concrete design direction and anti-patterns, but lacks executable code examples. Guidance like 'use CSS custom properties' and 'self-host via next/font' is specific but not copy-paste ready — no actual code snippets for font loading, keyframe definitions, or color variable setups. | 2 / 3 |
Workflow Clarity | Clear Phase 0 pre-code checklist with three mandatory questions, followed by well-sequenced aesthetic dimensions. For a design direction skill (not a destructive/batch operation), the workflow is unambiguous: answer design questions first, then apply each dimension. | 3 / 3 |
Progressive Disclosure | Clean overview with well-signaled one-level-deep references to tones.md and motion.md. Content is appropriately split — the main file covers direction and principles while detailed examples are delegated to reference files with clear loading guidance. | 3 / 3 |
Total | 11 / 12 Passed |
Validation
81%Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.
Validation — 9 / 11 Passed
Validation for skill structure
| Criteria | Description | Result |
|---|---|---|
metadata_version | 'metadata.version' is missing | Warning |
metadata_field | 'metadata' should map string keys to string values | Warning |
Total | 9 / 11 Passed | |
- Repository
- HoangNguyen0403/agent-skills-standard
- Commit
4c72e76
- 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.