Traction scoreGitHub stars can be faked, so popularity alone can be misleading. Traction Score looks for broader signs of recent attention, adoption, and active maintenance.
This repo curates 67 design system skill files built for agentic tools like Claude Design, Google Stitch, and Cursor. Each skill provides implementation-ready guidance: typography scales, color tokens, spacing rules, component states, and accessibility requirements. It helps designers, engineers, and AI tool users quickly apply a consistent visual language — from clean minimal to playful retro to enterprise dark themes — without starting from scratch.
WHO IT'S FOR
AI Tool Designers
selecting design system skills for agentic tools
Product Design Engineers
applying pre-built design systems to AI UIs
Design System Maintainers
curating and comparing design system skill files
AI Agent / Automation Builders
integrating design system skills into agentic workflows
Compatible AgentsThe repository documents support for these agents. The skills may also work with other agents that can load SKILL.md files, but they may need some setup or small changes.
Existing design tokens or component constraints, if any
Use the shadcn skill to draft concise design-system guidance for one button component in my product. Apply the documented Shadcn tokens and spacing, cover relevant default, hover, focus-visible, active, disabled, loading, and error states, explain keyboard, pointer, and touch behavior, and finish with a short accessibility-focused QA checklist. Product context: [describe the product and button purpose]. Existing conventions: [provide any relevant tokens or component constraints, if available].
Use the neon skill to draft concise design-system guidance for one interactive card in my interface. Apply the documented Neon typography, colors, and spacing; define the card's anatomy and relevant interaction states; address responsive behavior, long content, and overflow; and include testable WCAG 2.2 AA acceptance criteria. Interface context: [describe the interface and card content]. Interaction: [describe what selecting or activating the card does].
Use the neobrutalism skill to draft concise design-system guidance for one text-input field. Apply its documented high-contrast foundations and semantic tokens, specify anatomy and relevant default, hover, focus-visible, disabled, loading, and error states, include clear label and error-message rules, and end with a code-review QA checklist. Form context: [describe the form and field purpose]. Validation behavior: [describe valid, invalid, and required-field behavior].
Claude
Codex
Cursor