UI Skills

A group of skills responsible for generating UI components and forms.

Constraint Priority and Application Conditions

1. By default, apply constraints from ${CLAUDE_SKILL_DIR}/references/ui-skills.md with highest priority.
2. Apply ${CLAUDE_SKILL_DIR}/references/frontend-design.md only when "edgy/unique/expressive/brand-enhancing" styles are explicitly requested.
3. UI Skills MUST/NEVER rules are maintained by default. However, the following exceptions are permitted only when explicitly requested by the user:
   • Gradients, glows, heavy decorations
   • Animations (additions/enhancements)
   • Custom easing

Feature Details

Feature	Details
Constraint set	See references/ui-skills.md / references/frontend-design.md
Component generation	See references/component-generation.md
Feedback forms	See references/feedback-forms.md

Execution Steps

1. Apply constraint set (following priority order)
2. Quality gate (Step 0)
3. Classify the user's request
4. Read the appropriate reference file from "Feature Details" above
5. Generate according to its content

Step 0: Quality Gate (a11y Checklist)

Ensure accessibility when generating UI components:

♿ Accessibility Checklist

Generated UI should meet the following:

### Required Items
- [ ] Set alt attributes on images
- [ ] Associate labels with form elements
- [ ] Keyboard navigable (Tab for focus movement)
- [ ] Focus state is visually distinguishable

### Recommended Items
- [ ] Do not rely on color alone for conveying information
- [ ] Contrast ratio 4.5:1 or higher (text)
- [ ] Appropriate use of aria-label / aria-describedby
- [ ] Heading structure (h1 -> h2 -> h3) is logical

### Interactive Elements
- [ ] Appropriate labels on buttons ("View product details" instead of "Details")
- [ ] Focus trap for modals/dialogs
- [ ] Error messages are read by screen readers

For VibeCoders

♿ Making Designs Accessible to Everyone

1. **Add descriptions to images**
   - Instead of "product image", use "red sneakers, front view"

2. **Make clickable areas keyboard-navigable too**
   - Navigate with Tab key, confirm with Enter

3. **Don't rely on color alone for judgment**
   - Not just red=error, but also icon+text