ui

# UI

Design system reference and visual quality guidelines for the Devkit Vue stack.

**This is not a standalone workflow.** For full feature implementation, use `/feature` which automatically applies these guidelines when visual work is involved.

Invoke `/ui` directly only for pure design tasks (restyle, theme change, layout fix) that don't need the full `/feature` workflow.

This skill is an **enforcer**, not a creative brief. Its job is to keep visual work within the stack's design system (Vuetify 4 + MD3 + theme helpers). Creative direction for net-new identity work (landings, brand, bold aesthetic stances) belongs outside this skill.

## References

| What | File | Content |
|------|------|---------|
| Tokens, typography, spacing, breakpoints | `references/design-system.md` | Vuetify 4 MD3 classes, theme CSS variables, config paths |
| Component catalog | `references/components.md` | Home sections, core layout, module pattern, key Vuetify components |
| Theme helpers & code patterns | `references/patterns.md` | `liquidGlassStyle()`, `style()`, `overlapStyle()`, AOS, responsive |
| Visual verification | `references/verification.md` | Puppeteer screenshot flow, review checklist |

## Key rules (quick reminder)

- **Typography**: MD3 classes only (`text-display-large`, NOT `text-h1`). Responsive: `text-display-small text-sm-display-medium`
- **Colors**: Theme tokens via config or CSS variables (`rgb(var(--v-theme-primary))`), never hardcoded hex in templates
- **Dark/light**: Everything must work in both modes
- **Config-driven**: Prefer config options over hardcoded values
- **CSS last resort**: Prefer in order: Vuetify props (`flat`, `elevation`, `variant`, `density`) → Vuetify utility classes (`pa-0`, `d-flex`) → Vuetify transitions (`v-fade-transition`, `v-scale-transition`) → `<style scoped>` only if no Vuetify alternative exists
- **Reuse**: Check existing components before creating new ones
- **Verify**: Screenshot desktop+mobile, light+dark after visual changes

## Anti-patterns

- `text-h1`..`text-h6` → use MD3: `text-display-large`, `text-headline-medium`
- Hardcoded colors in templates → use theme variables
- New components for things existing ones already handle
- Ignoring dark mode
- Skipping visual verification
- Custom CSS when a Vuetify prop/class/transition covers the need