| name | frontend-design |
| description | Frontend & UI design hub — create distinctive, production-grade interfaces, with on-demand references for a UI pattern catalog and brand color systems. Use when building or styling web components, pages, dashboards, or apps; choosing a visual style / font pairing / layout / chart; building a design system (Tailwind tokens, component libraries, responsive patterns); or generating an accessible brand color palette (11-shade scale, semantic tokens, dark mode, WCAG contrast). Generates creative, polished code that avoids generic AI aesthetics. Pairs with the `shadcn` MCP skill, `accessibility`, and `ipix-wireframe`.
|
| version | 2.0.0 |
| metadata | {"priority":3} |
Frontend & UI Design Hub
Create distinctive, production-grade frontend interfaces. Load a references/ file on demand
for deeper UI patterns or color systems — don't paste their bodies here.
Consolidation note (v2.0.0): the former standalone skills ui-ux-pro-max and
color-palette are now references/ inside this skill. Behavior preserved; only the packaging
changed.
Design principles
- Avoid generic AI aesthetics — no boring cards, overused gradients, or generic icons.
- Typography-first — distinctive font pairings set the tone.
- Purposeful whitespace — breathing room communicates premium quality.
- Consistent micro-interactions — hover, focus, transition states.
- Dark mode support — class-based; design both themes.
Process
- Understand the content hierarchy.
- Define the visual rhythm (type scale, spacing, grid).
- Build components inside-out (content → padding → border → shadow).
- Animate with purpose (entry, state change, feedback).
- Responsive from the start (mobile-first).
Stacks
- React + TypeScript + Tailwind CSS (preferred) · shadcn/ui (Radix primitives) · Framer Motion / CSS transitions.
References — load on demand
| Need | Reference |
|---|
| UI pattern catalog — 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks; plan/build/review actions | references/ui-catalog/ui-ux-pro-max.md |
| Brand color system — hex → 11-shade scale (50–950), semantic tokens, dark mode, WCAG contrast; Tailwind token template | references/color/color-palette.md (+ references/color/{references,templates,rules,agents}/) |
Design system — tokens, component libraries, responsive patterns (Tailwind v4 — matches iPix's installed version, @tailwindcss/postcss, no tailwind.config.js) | references/tailwind/tailwind-design-system.md |
Related sibling skills
| Task | Skill |
|---|
Add / search / compose shadcn/ui components (registry, presets — pairs with the shadcn MCP) | shadcn |
| Responsive layouts — container queries, fluid typography, CSS Grid, mobile-first breakpoints | No dedicated skill yet — follow the "Process" §5 rule above (mobile-first) and the Responsive checklist in dc-to-react-plan-template.md §12 |
| WCAG / a11y audit | accessibility |
| Lo-fi wireframes before production UI | ipix-wireframe |
| Build the multi-file feature behind the UI | feature-dev |
iPix design system
Honor the iPix brand (.cursor/rules/ui-design.mdc): Cormorant Garamond + Outfit, orange
#E87C4D / blue #1E293B / mustard #F3B93C / off-white #FBF8F5, premium muted aesthetic.
