Agent Skills: design-system-starter

Create and evolve design systems with design tokens, component architecture, accessibility guidelines, and documentation templates. Ensures consistent, scalable, and accessible UI across products.

[design-system ui components design-tokens accessibility frontend]

ID: softaworks/agent-toolkit/design-system-starter

Author

softaworks

https://github.com/softaworks View all skills

Repository

softaworks/agent-toolkit

softaworksLicense: MIT

2,453226

Install this agent skill to your local

npx skills add softaworks/agent-toolkit --skill design-system-starter

Skill Files

The files that make up design-system-starter.

Download Skill

Loading file tree…

Read the full instructions for design-system-starter on GitHub.View on GitHub

More agent skills

jiraUse when the user mentions Jira issues (e.g., "PROJ-123"), asks about tickets, wants to create/view/update issues, check sprint status, or manage their Jira workflow. Triggers on keywords like "jira", "issue", "ticket", "sprint", "backlog", or issue key patterns.
draw-iodraw.io diagram creation, editing, and review. Use for .drawio XML editing, PNG conversion, layout adjustment, and AWS icon usage.
lesson-learnedAnalyze recent code changes via git history and extract software engineering lessons. Use when the user asks 'what is the lesson here?', 'what can I learn from this?', 'engineering takeaway', 'what did I just learn?', 'reflect on this code', or wants to extract principles from recent work.
excalidrawUse when working with *.excalidraw or *.excalidraw.json files, user mentions diagrams/flowcharts, or requests architecture visualization - delegates all Excalidraw operations to subagents to prevent context exhaustion from verbose JSON (single files: 4k-22k tokens, can exceed read limits)
react-navigationProvides React Navigation UI patterns for stacks, tabs, drawers etc. Use when building navigation UIs with React Navigation, configuring headers, bottom sheets or handling safe areas and insets.
react-native-tv-best-practicesReviews React Native TV apps for focus/D-pad navigation, 10-foot UI layout, TV playback/DRM integration, low-memory TV performance, and TV accessibility. Use when building, debugging, or reviewing react-native-tvos, Expo TV, Amazon Vega/Kepler, or React Native web TV targets where the issue depends on remote input, TV focus, TV packaging, TV hardware, or TV playback constraints.