frontend-ui-ux
Designer-turned-developer who crafts stunning UI/UX even without design mockups
51
25%
Does it follow best practices?
Impact
97%
1.15xAverage score across 3 eval scenarios
Passed
No known issues
Optimize this skill with Tessl
npx tessl skill review --optimize ./src/features/builtin-skills/frontend-ui-ux/SKILL.mdQuality
Discovery
0%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 tagline rather than a functional skill description. It uses first/third-person hybrid voice with marketing fluff ('stunning'), provides no concrete actions, no trigger terms, and no 'use when' guidance. It would be nearly impossible for Claude to reliably select this skill from a pool of similar frontend/design skills.
Suggestions
Replace the persona framing with concrete actions, e.g., 'Creates responsive layouts, designs component hierarchies, implements CSS styling, and builds polished frontends from text descriptions.'
Add an explicit 'Use when...' clause with natural trigger terms, e.g., 'Use when the user asks to build UI components, style a webpage, create a landing page, or needs frontend design without mockups.'
Include specific file types or technologies to improve distinctiveness, e.g., 'HTML, CSS, React components, Tailwind, .tsx files'.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | The description uses vague, abstract language ('crafts stunning UI/UX') without listing any concrete actions. There are no specific capabilities like 'creates responsive layouts', 'builds component libraries', or 'implements design systems'. | 1 / 3 |
Completeness | The description fails to clearly answer 'what does this do' (no concrete actions) and completely lacks a 'when should Claude use it' clause. There are no explicit triggers or use-case guidance. | 1 / 3 |
Trigger Term Quality | The terms 'UI/UX' and 'design mockups' are somewhat relevant but the description reads more like a persona bio than a skill description. It lacks natural trigger terms users would say like 'build a landing page', 'style components', 'CSS', 'frontend', or 'responsive design'. | 1 / 3 |
Distinctiveness Conflict Risk | The description is extremely generic — 'UI/UX' could overlap with any frontend, design, CSS, or web development skill. The persona framing ('Designer-turned-developer') adds no distinguishing capability information. | 1 / 3 |
Total | 4 / 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 clear creative framework and opinionated design direction, which is valuable for guiding Claude's aesthetic choices. However, it lacks concrete code examples (no CSS snippets, no component templates, no animation code), which significantly limits actionability for a skill focused on implementation. The workflow could be strengthened with validation steps for visual output and accessibility.
Suggestions
Add concrete, executable code examples for key patterns—e.g., a CSS variable color palette setup, a staggered animation reveal using animation-delay, and a typography pairing implementation with @import or @font-face.
Include validation checkpoints in the workflow: verify visual output in browser, test responsive behavior, check accessibility (contrast ratios, focus states), and confirm animations perform well.
Remove motivational/identity framing language ('You see what pure developers miss', 'You are capable of extraordinary creative work') as it consumes tokens without adding actionable guidance.
Consider extracting the detailed Aesthetic Guidelines into a separate reference file and keeping SKILL.md as a concise overview with links, improving progressive disclosure.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The skill contains some unnecessary elaboration (e.g., the 'Role' preamble explaining what a designer-turned-developer sees) and motivational language ('You are capable of extraordinary creative work—don't hold back') that doesn't add actionable value. However, most sections are reasonably focused and the guidelines are presented efficiently. | 2 / 3 |
Actionability | The skill provides specific guidance on font choices, color approaches, motion techniques (animation-delay, CSS-only, Motion library), and layout principles, but lacks any concrete code examples. For a skill about creating UI/UX, executable CSS/HTML snippets showing recommended patterns (e.g., a staggered reveal animation, a CSS variable color palette setup, a typography pairing implementation) would significantly improve actionability. | 2 / 3 |
Workflow Clarity | The Design Process section provides a clear 4-step sequence (Purpose → Tone → Constraints → Differentiation), and the Work Principles establish a logical order (study → implement → verify). However, there are no validation checkpoints—no step to verify visual output, test across viewports, or validate accessibility, which are important for UI work. | 2 / 3 |
Progressive Disclosure | The content is well-structured with clear section headers and logical grouping (Design Process, Aesthetic Guidelines with subsections, Anti-Patterns, Execution). However, the Aesthetic Guidelines section is fairly lengthy inline content that could benefit from references to separate files for detailed examples, font pairing guides, or color palette references. | 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.
- Repository
- code-yeongyu/oh-my-openagent
- Commit
beb89fa
- 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.