Agent skill · design visual · aiskillstore
design-system-starter
Use this skill when creating or evolving design systems for applications. Provides design token structures, component architecture patterns, documentation templates, and accessibility guidelines. Ensures consistent, scalable, and accessible UI design across products.
Why this skill is useful
Provides comprehensive design token structures and component architecture patterns that enhance UI design consistency and accessibility, which the AI may not generate reliably on its own.
What it needs
About 8k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
Design System Starter Overview This skill provides comprehensive guidance for building robust, scalable design systems that ensure visual consistency, improve development velocity, and create exceptional user experiences. Whether starting from scratch or evolving an existing system, this framework helps teams design with intention and scale. When to use this skill: Creating a new design system from scratch Evolving or refactoring existing design systems Establishing design token standards Defining component architecture Creating design documentation Ensuring accessibility compliance (WCAG 2.1) Implementing theming and dark mode Bundled Resources: references/component-examples.md - Complete component implementations templates/design-tokens-template.json - W3C design token format templates/component-template.tsx - React component template checklists/design-system-checklist.md - Design system audit checklist Design System Philosophy What is a Design System? A design system is more than a component library—it's a collection of: 1. Design Tokens: Foundational design decisions (colors, spacing, typography) 2. Components: Reusable UI building blocks 3. Patterns: Common UX solutions and compositions 4. Guidelines: Rules, principles, and best practices 5. Documentation: How to use everything effectively Core Principles 1. Consistency Over Creativity Predictable patterns reduce cognitive load Users learn once, apply everywhere Designers and developers speak the same language 2. Accessible by Default WCAG 2.1 Level AA compliance minimum Keyboard navigation built-in Screen reader support from the start 3. Scalable and Maintainable Design tokens enable global changes Component composition reduces duplication Versioning and deprecation strategies 4. Developer-Friendly Clear API contracts Comprehensive documentation Easy to integrate and customize --- Design Tokens Design tokens are the atomic design decisions that define your system's visual language. Token Categories 1. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/design-system-starter