design-system

star 0

Apply design tokens and creative direction consistently

Z5US By Z5US schedule Updated 3/8/2026
play_arrow Run Skill in Manus View GitHub

name: design-system description: Apply design tokens and creative direction consistently autoTrigger: When creating or modifying visual components

Apply Design System

Before creating or modifying any visual component:

  1. Read /design-system/DIRECTION.md for creative direction
  2. Read /packages/ui/tokens.ts for design tokens
  3. Read /apps/web/styles/globals.css for CSS custom properties

Token usage

  • Use CSS custom properties (e.g., text-text-primary, bg-surface-secondary)
  • Never hardcode colors — always reference tokens
  • Use spacing from tokens via Tailwind classes
  • Use the motion curves defined in tokens for animations

Typography hierarchy

  • Display: font-display — for hero headlines
  • Heading: font-display — for section headings
  • Body: default font — for paragraphs
  • Tracking: apply tracking classes as defined in tokens

Animation rules

  • Always check prefers-reduced-motion before animating
  • Use GSAP for scroll-driven animations
  • Use Motion for component-level animations
  • Spring animations preferred over linear/cubic-bezier
  • One signature moment per page, not scattered micro-interactions

Anti-patterns (from CLAUDE.md NEVER DO list)

  • No Inter/Roboto/Arial
  • No purple gradients
  • No generic card grids
  • No #FFFFFF backgrounds
  • No opacity-only hover effects
Install via CLI
npx skills add https://github.com/Z5US/nextjs-studio-starter --skill design-system
Repository Details
star Stars 0
call_split Forks 0
navigation Branch main
article Path SKILL.md
More from Creator
Z5US
Z5US Explore all skills →