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-ux49
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.mdQuality
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'
| Dimension | Reasoning | Score |
|---|---|---|
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
| Dimension | Reasoning | Score |
|---|---|---|
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.
Validation — 11 / 11 Passed
Validation for skill structure
No warnings or errors.
Table of Contents
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.