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). (triggers: build a page, create a component, design a dashboard, landing page, UI for, build a layout, make it look good, improve the design, build UI, create interface, design screen)
82
77%
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Passed
No known issues
Optimize this skill with Tessl
npx tessl skill review --optimize ./.agent/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 with strong trigger term coverage and good completeness, explicitly stating both what the skill does and when to use it. Its main weaknesses are the somewhat vague capability description (relying on subjective terms like 'bold aesthetic choices' and 'distinctive' rather than concrete actions) and the very broad scope that could conflict with other frontend-related skills.
Suggestions
Add more specific concrete actions beyond 'design' — e.g., 'implement color palettes, typography hierarchies, responsive layouts, animations, and visual polish' to increase specificity.
Narrow the distinctiveness by clarifying what differentiates this from a general frontend coding skill — e.g., 'Focuses on visual design quality and aesthetics rather than business logic or functionality.'
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | It names the domain (frontend UI) and mentions some actions like 'building web components, pages, interfaces, dashboards, or applications,' but the core capability description ('Design distinctive, production-grade frontend UI with bold aesthetic choices') is more of a style claim than a list of concrete actions. It doesn't specify things like 'create responsive layouts, implement color schemes, build navigation bars.' | 2 / 3 |
Completeness | Clearly answers both 'what' (design distinctive, production-grade frontend UI with bold aesthetic choices) and 'when' (Use when building web components, pages, interfaces, dashboards, or applications in any framework) with an explicit trigger list. The 'Use when...' clause is present and detailed. | 3 / 3 |
Trigger Term Quality | Excellent coverage of natural trigger terms including 'build a page', 'create a component', 'design a dashboard', 'landing page', 'UI for', 'make it look good', 'improve the design', etc. These are phrases users would naturally say, and the explicit trigger list plus framework mentions (React, Next.js, Angular, Vue, HTML/CSS) provide strong keyword coverage. | 3 / 3 |
Distinctiveness Conflict Risk | While it focuses on 'bold aesthetic choices' and 'distinctive' design, the broad scope covering all frameworks and all types of UI (components, pages, dashboards, applications) means it could easily conflict with other frontend/UI skills. Terms like 'build a page' or 'create a component' are very general and could overlap with non-design-focused frontend skills. | 2 / 3 |
Total | 10 / 12 Passed |
Implementation
72%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-organized, opinionated design direction skill that excels at conciseness and progressive disclosure. Its main weakness is the gap between design philosophy and executable implementation — it tells Claude what aesthetic choices to make but doesn't provide concrete code examples showing how to implement them in any framework. The workflow could also benefit from explicit validation steps between design decisions and code output.
Suggestions
Add 1-2 concrete, executable code examples (e.g., a React component with styled typography pairing, or a CSS snippet implementing a staggered entrance animation) to bridge the gap between design direction and implementation.
Include a brief implementation workflow after Phase 0: e.g., '1. Set up font loading → 2. Define CSS custom properties → 3. Build layout skeleton → 4. Add motion → 5. Visual review checklist' with validation at each step.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | Every section is tightly written with no unnecessary explanation. Claude doesn't need to be told what typography or color theory is — the skill jumps straight to opinionated, actionable directives. Bullet points are crisp and each token earns its place. | 3 / 3 |
Actionability | The skill provides strong directional guidance (specific font-loading methods, CSS custom property naming, animation approaches) but lacks executable code examples. There are no copy-paste-ready code snippets for any framework — it's more of a design checklist than implementation guidance. | 2 / 3 |
Workflow Clarity | Phase 0 establishes a clear pre-code sequence with three questions, and the aesthetic dimensions provide a logical progression. However, there's no explicit workflow for how to go from design decisions to implementation, no validation checkpoints (e.g., 'verify font loading works before proceeding'), and no feedback loops for iterating on the design. | 2 / 3 |
Progressive Disclosure | The skill is a well-structured overview with clear one-level-deep references to tones.md and motion.md, each with descriptive labels indicating when to load them. Content is appropriately split between the main file and reference documents. | 3 / 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
- HoangNguyen0403/agent-skills-standard
- Commit
19a1140
- 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.