CtrlK
BlogDocsLog inGet started
Tessl Logo

frontend-ui-ux

Designer-turned-developer who crafts stunning UI/UX even without design mockups

Install with Tessl CLI

npx tessl i github:code-yeongyu/oh-my-openagent --skill frontend-ui-ux
What are skills?

49

Quality

36%

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Optimize this skill with Tessl

npx tessl skill review --optimize ./src/features/builtin-skills/frontend-ui-ux/SKILL.md
SKILL.md
Review
Evals

Quality

Discovery

22%

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 reads as a persona statement rather than a functional skill description. It uses first-person framing ('Designer-turned-developer who crafts') which violates the third-person voice requirement, lacks concrete actions, and provides no guidance on when Claude should select this skill. The marketing-style language ('stunning') adds no functional value.

Suggestions

Rewrite in third person with concrete actions: 'Creates UI components, implements responsive layouts, and applies visual design principles to frontend code.'

Add explicit trigger guidance: 'Use when building user interfaces without design mockups, implementing frontend components, or when the user needs help with CSS, layouts, or visual styling.'

Include natural trigger terms users would say: 'frontend', 'CSS', 'components', 'responsive', 'styling', 'layout', 'visual design'

DimensionReasoningScore

Specificity

Uses vague, abstract language like 'crafts stunning UI/UX' without listing any concrete actions. No specific capabilities are mentioned (e.g., create components, implement layouts, style elements).

1 / 3

Completeness

Describes a persona rather than what the skill does or when to use it. No 'Use when...' clause or explicit trigger guidance. Both 'what' and 'when' are essentially missing.

1 / 3

Trigger Term Quality

Contains some relevant keywords ('UI/UX', 'design mockups') that users might mention, but missing common variations like 'frontend', 'CSS', 'components', 'styling', 'responsive design'.

2 / 3

Distinctiveness Conflict Risk

UI/UX focus provides some distinction, but 'designer-turned-developer' is vague enough to potentially overlap with general frontend, design system, or component library skills.

2 / 3

Total

6

/

12

Passed

Implementation

50%

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

This skill provides a strong conceptual framework for design-focused development with clear aesthetic principles and anti-patterns. However, it lacks the concrete, executable examples that would make it immediately actionable—no code snippets, no specific font recommendations (only what to avoid), and no validation steps to ensure designs meet quality standards.

Suggestions

Add concrete code examples: CSS snippets for staggered animations, example color palette with CSS variables, specific typography pairings (e.g., 'Playfair Display + Source Serif Pro')

Include a validation checklist: How does Claude verify the design is 'visually striking'? Add specific criteria like 'Check contrast ratios', 'Test animation performance', 'Verify font loading'

Provide at least 2-3 specific font recommendations to use (not just what to avoid) with example use cases

Consider splitting detailed aesthetic examples into a separate EXAMPLES.md file to keep the main skill focused on workflow

DimensionReasoningScore

Conciseness

The content is reasonably efficient but includes some philosophical padding ('You see what pure developers miss', 'You are capable of extraordinary creative work'). The anti-patterns and guidelines sections could be tighter, though most content adds value.

2 / 3

Actionability

Provides specific guidance on fonts to avoid, color approaches, and motion priorities, but lacks concrete code examples. No executable CSS/JS snippets for animations, no example color palettes with actual values, no sample typography pairings with specific font names to use.

2 / 3

Workflow Clarity

The design process section provides a clear 4-step sequence (Purpose → Tone → Constraints → Differentiation), but lacks validation checkpoints. No guidance on how to verify the design meets the stated goals or how to iterate if something doesn't work.

2 / 3

Progressive Disclosure

Content is organized into logical sections (Principles, Process, Guidelines, Anti-Patterns, Execution) but everything is inline in one file. For a skill this comprehensive, detailed examples of each aesthetic direction or typography pairings could be split into reference files.

2 / 3

Total

8

/

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.

Validation11 / 11 Passed

Validation for skill structure

No warnings or errors.

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.