← ClaudeAtlas

create-design-systemlisted

Use when the user asks to plan, document, create, audit, or implement a design system, UI kit, component system, design tokens, typography, colours, spacing, accessibility rules, or reusable frontend component standards. Works for any stack, not only React - PHP, WordPress, Laravel, Vue and static HTML have their own adapters.
johnoconnor0/johns-os · ★ 0 · Web & Frontend · score 73
Install: claude install-skill johnoconnor0/johns-os
# Create Design System ## Trigger Use when the user asks for a design system, UI kit, component library, visual language, design tokens, frontend UI standards, component inventory, typography system, colour system, spacing system, accessibility rules, or reusable interface guidelines. ## When To Use - After product requirements or UX flows are clear enough. - Before building UI prototypes or MVP screens. - When an existing app has inconsistent UI patterns. - When frontend implementation needs reusable component standards. - When design tokens, components, states, or accessibility rules need to be documented. - When a prototype needs a consistent visual system. ## When Not To Use - Use `create-discovery-brief` when the product idea is unclear. - Use `create-prd` when requirements are missing. - Use `create-ux-flow` when user journeys and screens are missing. - Use `build-ui-prototype` when the user wants code for a clickable UI prototype. - Use `create-technical-design-document` when the user wants broad architecture planning. - Use `review-change` when the user wants a completed UI change reviewed. ## Inputs Inspected Inspect available inputs before creating design-system claims: - Product profile. - Discovery brief. - PRD. - UX flow. - Screen inventory. - Prototype plan when available. - Existing routes, pages, layouts, components, styling, tokens, and design conventions. - Package scripts and frontend framework configuration. - Existing design assets or brand notes