CtrlK
BlogDocsLog inGet started
Tessl Logo

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

Quality

73%

Does it follow best practices?

Impact

No eval scenarios have been run

SecuritybySnyk

Passed

No known issues

Fix and improve this skill with Tessl

tessl review fix ./.github/skills/common/common-ui-design/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

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-conceived, opinionated design direction skill that is concise and avoids explaining things Claude already knows. Its main weaknesses are the lack of executable code examples (CSS snippets, font declarations, animation keyframes) that would make the guidance immediately actionable, and missing bundle files that the content references. The workflow could benefit from explicit implementation sequencing and validation steps.

Suggestions

Add concrete, executable CSS/JSX code examples for at least 2-3 dimensions (e.g., a @keyframes staggered reveal, a gradient mesh background, a @font-face declaration with next/font usage).

Include the referenced bundle files (references/tones.md and references/motion.md) or remove the references if they don't exist.

Add a brief implementation sequence after Phase 0 (e.g., '1. Set up fonts → 2. Define color tokens → 3. Build layout → 4. Add motion → 5. Visual review against chosen tone') with a validation checkpoint.

DimensionReasoningScore

Conciseness

The content is lean and efficient. It avoids explaining basic concepts Claude already knows (CSS, fonts, frameworks) 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 CSS snippets (e.g., a staggered reveal animation, a gradient mesh background, a font-face declaration) would make it copy-paste actionable rather than directional.

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 how to move from design thinking through implementation, and no validation checkpoints (e.g., 'review rendered output against chosen tone 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 point to non-existent files, undermining the progressive disclosure architecture.

2 / 3

Total

9

/

12

Passed

Description

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 description has strong completeness with an explicit 'Use when' clause and good trigger term coverage across frameworks and UI types. However, it is somewhat vague on specific capabilities (what exactly does 'bold aesthetic choices' mean in practice?) and its extremely broad scope covering all frontend UI across all frameworks creates potential overlap with more specialized skills.

Suggestions

Add more specific concrete actions like 'create responsive layouts, implement animations, design color palettes, build interactive components' to improve specificity.

Narrow the distinctive niche—clarify what makes this different from a general frontend coding skill, e.g., emphasize the visual design/aesthetic focus more concretely with terms like 'custom styling, visual polish, design-forward interfaces'.

DimensionReasoningScore

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' (Use when building web components, pages, interfaces, dashboards, or applications in any framework) with an explicit 'Use when...' clause.

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 naturally use when requesting UI work.

3 / 3

Distinctiveness Conflict Risk

The scope is quite broad—covering all frontend UI work across multiple frameworks. It could easily conflict with framework-specific skills, general coding skills, or design system skills. The 'bold aesthetic choices' and 'production-grade' qualifiers help somewhat but the domain is still very wide.

2 / 3

Total

10

/

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.

Validation9 / 11 Passed

Validation for skill structure

CriteriaDescriptionResult

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
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.