Update to Web & Mobile App Builder

{
  "description": "Create or adapt a consistent, accessible design system for a web, PWA, iOS/macOS or Android app, including tokens, components, typography, spacing and interaction states.",
  "included_files": [],
  "name": "create-design-system",
  "skill_md_contents": "---\nname: create-design-system\ndescription: Create or adapt a consistent, accessible design system for a web, PWA, iOS/macOS or Android app, including tokens, components, typography, spacing and interaction states.\n---\n\n# Create Design System\n\n1. Review the existing project's design tokens/components first; preserve its recognizable identity unless redesign is requested.\n2. Read `../../references/design-quality.md` and the relevant platform guide: `../../references/web-and-pwa.md`, `../../references/apple-native.md`, or `../../references/android-native.md`.\n3. Define semantic color tokens, typography roles, spacing scale, elevation/borders, radius, icon rules, motion duration/easing, responsive breakpoints or adaptive size classes. Design for content and task, not a single fashionable template.\n4. List component states (rest, hover where relevant, pressed, focus, disabled, loading, selected, error, success), light/dark and reduced-motion variants.\n5. Implement shared components and tokens rather than repeating hardcoded style fragments. Include examples and usage constraints.\n6. Verify contrast/focus, touch target sizing, screen-reader labeling, dynamic content, localization and long text. Follow native platform systems when building native apps.\n7. Provide code artifacts and before/after screenshots when implementation tools exist; otherwise a design token/spec file and explicit limits.\n"
}