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).
61
73%
Does it follow best practices?
Impact
—
No eval scenarios have been run
Passed
No known issues
Optimize this skill with Tessl
npx tessl skill review --optimize ./.github/skills/common/common-ui-design/SKILL.mdQuality
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.
This is a solid description that clearly communicates both what the skill does and when to use it, with good trigger term coverage across frameworks and UI types. Its main weaknesses are the somewhat vague capability description (lacking specific concrete actions beyond 'design') and the broad scope that could overlap with other frontend or design-related skills.
Suggestions
Add more specific concrete actions like 'create responsive layouts, implement design systems, style interactive components, build data visualizations' to improve specificity.
Narrow the distinctiveness by clarifying what makes this skill different from general frontend coding — e.g., emphasize the design/aesthetic focus more explicitly with terms like 'visual design', 'color palettes', 'typography', 'spacing'.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Names the domain (frontend UI) and mentions some actions ('Design', 'building web components, pages, interfaces, dashboards'), but lacks specific concrete actions like 'create responsive layouts, implement animations, style form elements'. The phrase 'bold aesthetic choices' is somewhat vague. | 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'). | 3 / 3 |
Trigger Term Quality | Good coverage of natural terms users would say: 'web components', 'pages', 'interfaces', 'dashboards', 'applications', 'React', 'Next.js', 'Angular', 'Vue', 'HTML/CSS', 'frontend', 'UI'. These are terms users would naturally use when requesting UI work. | 3 / 3 |
Distinctiveness Conflict Risk | The scope is quite broad — 'any framework' and covering all frontend UI work could overlap with framework-specific skills or general coding skills. The 'bold aesthetic choices' and 'production-grade' qualifiers add some distinctiveness but the overall scope is wide enough to potentially conflict with other frontend or design skills. | 2 / 3 |
Total | 10 / 12 Passed |
Implementation
64%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, opinionated design direction skill that efficiently communicates aesthetic principles without over-explaining. Its main weaknesses are the lack of executable code examples (font loading snippets, CSS variable setups, animation code) and missing bundle files that the content references. The Phase 0 design thinking checklist is a strong feature, but the implementation phase lacks sequencing and validation steps.
Suggestions
Add concrete, copy-paste-ready code examples for key patterns: a `@font-face` declaration, CSS custom property setup with a sample palette, and a staggered entrance animation using `@keyframes` + `animation-delay`.
Include the referenced bundle files (references/tones.md and references/motion.md) or remove the references — broken links undermine trust in the skill.
Add a brief implementation sequence after Phase 0 (e.g., 1. Set up font loading → 2. Define color tokens → 3. Build layout composition → 4. Add motion) with a checkpoint like 'Review: does the static layout convey the chosen tone before adding animation?'
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The content is lean and efficient. It avoids explaining basic concepts Claude already knows (CSS, fonts, animations) and instead provides opinionated, specific design direction. Every section delivers actionable guidance without padding. | 3 / 3 |
Actionability | The skill provides specific design principles and anti-patterns, but lacks executable code examples. For a UI design skill, concrete code snippets showing font loading, CSS custom property setup, or animation patterns would significantly improve actionability. The guidance is specific but more descriptive than executable. | 2 / 3 |
Workflow Clarity | Phase 0 provides a clear pre-code checklist, and the aesthetic dimensions are well-organized categories. However, there's no sequenced workflow for the actual implementation phase — it's unclear what order to tackle typography, color, motion, etc., and there are no validation checkpoints to verify the design coheres before proceeding. | 2 / 3 |
Progressive Disclosure | The skill references two external files (references/tones.md and references/motion.md) with clear signals for when to load them, which is good structure. However, no bundle files were provided, meaning these references are broken. The main content is appropriately scoped as an overview, but the missing referenced files undermine the disclosure strategy. | 2 / 3 |
Total | 9 / 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
556618c
- 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.