| name | ui |
| description | Explicit helper for UI components, hero sections, forms, feedback, and contact surfaces. Do NOT load for: authentication, backend implementation, database work, or business logic. |
| description-en | Explicit helper for UI components, hero sections, forms, feedback, and contact surfaces. Do NOT load for: authentication, backend implementation, database work, or business logic. |
| allowed-tools | ["Read","Write","Edit","Bash"] |
| user-invocable | false |
| disable-model-invocation | true |
UI Skills
A set of skills responsible for generating UI components and forms.
Constraint Priority and Applicability
- By default, apply the constraints in
${CLAUDE_SKILL_DIR}/references/ui-skills.md with highest priority.
- Apply
${CLAUDE_SKILL_DIR}/references/frontend-design.md only when "sharp/distinctive/expressive/brand-focused" is explicitly requested.
- UI Skills MUST/NEVER rules are maintained in principle. However, the following exceptions are allowed only when the user explicitly requests them:
- Gradients, glow effects, strong decorations
- Animations (additions/extensions)
- Custom easing
Feature Details
Execution Steps
- Apply constraint set (follow priority order)
- Quality gate (Step 0)
- Classify the user's request
- Read the appropriate reference file from "Feature Details" above
- Generate following its instructions
Step 0: Quality Gate (Accessibility Checklist)
When generating UI components, ensure accessibility:
♿ Accessibility Checklist
It is recommended that the generated UI meets the following:
### Required
- [ ] Set alt attributes on images
- [ ] Associate labels with form elements
- [ ] Keyboard operable (Tab to move focus)
- [ ] Focus state is visually apparent
### Recommended
- [ ] Information not conveyed by color alone
- [ ] Contrast ratio 4.5:1 or higher (text)
- [ ] Appropriate use of aria-label / aria-describedby
- [ ] Heading structure (h1 → h2 → h3) is logical
### Interactive Elements
- [ ] Buttons have appropriate labels (e.g., "View product details" not just "Details")
- [ ] Focus trap in modals/dialogs
- [ ] Error messages are read by screen readers
For VibeCoder
♿ Making designs usable by everyone
1. **Add descriptions to images**
- "Red sneakers, front view" not just "Product image"
2. **Make clickable areas keyboard-accessible too**
- Move with Tab key, confirm with Enter
3. **Don't rely on color alone**
- Not just red=error; also use icon + text
