| name | ui |
| description | Design system reference for the Devkit Vue stack (Vuetify 4 + custom theme helpers). Use when asked about styling, theming, layout, design system, Vuetify components, visual verification, or UI patterns. Automatically consumed by /feature when the task has a visual component. Can also be invoked directly for design-only tasks (restyle, theme change, layout fix).
|
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 of the design system (Vuetify 4 + MD3 + theme helpers) and a craft baseline — the "Beauty pass" below is teachable, encodable craft (not taste-by-vibes), the difference between correct and beautiful. Net-new brand identity (a bold landing aesthetic, a new visual language) still belongs to creative direction outside this skill; the Beauty pass makes the everyday output stop looking generic.
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
Beauty pass (correct → beautiful)
Consistency + accessibility make a UI correct; these seven rules make it beautiful. Each is a checkable rule with a named failure mode — the inverse of each is exactly what makes a layout read as generic. Apply on every visual surface; they need no bespoke CSS (Vuetify props, spacing classes, elevation, and theme tokens carry all seven). Deeper config levers to push past the generic Material look: references/design-system.md § "Beauty levers".
- Whitespace first, then reduce. Start generous, don't fill the viewport; cramped padding is the #1 generic tell. Lean on
pa-6/pa-8, section py-12+. Context-calibrate: dense dashboards tighten, but never start cramped.
- Hierarchy by weight + color, not size alone. Cap ~3 type sizes per view; de-emphasize secondary/tertiary with a lighter
text-medium-emphasis / muted color, not just smaller. Size-only hierarchy is a slop signature.
- Spacing on the fixed scale only. Use the spacing classes (steps
0→16 = 4→64px); never an arbitrary inline margin: 13px. Off-scale spacing reads ad-hoc.
- Color reserved for emphasis. Mostly-neutral base (tinted greys via
surface/background, not pure grey); primary for the ONE action that matters, not spread across the screen. Even color spread = the default-Material generic look. Never grey text on a colored background.
- Depth = soft, two-part elevation. Prefer low
elevation-1/elevation-2 (Vuetify's shadows are already the layered contact+ambient pair) or elevation-0 + a subtle surface border; overlap elements to layer. One harsh high-contrast shadow reads cheap.
- Proximity groups related items (Gestalt). A field label sits tight to its input; a card's title/body/action cluster with less gap inside than between cards. Uniform spacing everywhere destroys grouping.
- Restraint over decoration. Fewer weights, one accent, generous rhythm — boring-and-consistent beats clever-and-busy. Delete an element before adding one.
These seven rules are the canonical craft baseline: name the visual intent when planning a surface, apply the rules while building, and score the rendered result against them in QA. This skill is where they're authored.
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
- Generic-look tells (Beauty pass inverses): cramped padding · hierarchy by size alone · color spread evenly instead of reserved for emphasis · one harsh shadow · arbitrary off-scale spacing · pure untinted greys · grey text on colored backgrounds
