Packs

6 packs

Design System Foundation

Create design tokens, principles, and naming conventions for a new design system.

16 skills · pack

Design System Audit and Remediation

Identify design debt, audit tokens, and enforce consistency across a product.

14 skills · pack

Publish Mobile-First Page

Scaffold and publish a mobile-first page with responsive layout and design tokens.

4 skills · pack

React Motion UI System

Install foundational motion tokens, UI patterns, and accessibility enforcement for React/Next.js.

5 skills · pack

Design system skills: component specs, design tokens, naming conventions, spacing and grid systems, accessibility standards, and documentation.

11 skills · pack

Visual Critique

Visual critique skills: hierarchy analysis, brand consistency checks against mood/voice/tokens, composition evaluation, and typography audits — with a /critique-screen command that compiles a prioritised fix list.

7 skills · pack

Results for “tokens”

7 skills

Converts Stitch screen designs into production React components, fetching and caching assets locally, extracting design tokens, and archiving existing pages before replacement.

lwc-css-and-styling

Style Lightning Web Components using SLDS design tokens, styling hooks, scoped CSS, and ::part() while avoiding common pitfalls like !important and shadow-DOM piercing.

stitch-to-react

Migrates a Stitch screen to production React: fetches and caches wireframes, archives existing pages, converts to shadcn/ui components with semantic tokens, and documents the design system layers.

More results

Analyzes an existing Vue project's UI to map components, extract design tokens, and identify code patterns, then generates a project-specific contextual skill file for consistent future development.

Designs and structures the Movemental living SSOT dashboard (HTML/CSS/JS), aligning docs into a docs-first, token-based, agent-friendly dashboard.

Generate production-quality React + Tailwind CSS code using the Rayden UI component library with correct props, design tokens, and layout patterns.

Takes a PRD, reference URL, screenshot, or keywords to produce a DESIGN.md specification, then generates production-ready web code that meets UI/UX, visual, motion, and responsive standards.