onewave-ai/design-system-generator
design-system-generator/SKILL.md
Create design systems with tokens, components, and documentation. Use when building design systems, creating component libraries, or establishing design tokens.
$ install --global
skillsauthnpx skillsauth add onewave-ai/claude-skills design-system-generatorInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Jun 8, 2026, 5:14 AM18.6s4 files scanned
SKILL.md
- name:
- design-system-generator
- description:
- Create design systems with tokens, components, and documentation. Use when building design systems, creating component libraries, or establishing design tokens.
Design System Generator
Generate a token-driven design system: tokens, base components, build config, and documentation.
Contents
references/design-tokens.md— color, typography, spacing, shadow, and radius token files plus CSS variable setup.references/components.md— Button, Input, Card implementations and the component barrel index.references/config-and-utilities.md— Tailwind config and thecnclass-merge helper.
Workflow
- Define design tokens. Create
tokens/with colors, typography, spacing, and effects (shadows, radii) perreferences/design-tokens.md. Replace the reference values with the project brand palette. - Add CSS variables. Set up
:rootand.darkcustom properties inglobals.cssusing the variable block inreferences/design-tokens.md. - Wire the build. Add the
cnhelper and extend the Tailwind theme from the token files followingreferences/config-and-utilities.md. - Build base components. Implement Button, Input, and Card from
references/components.md, then extend the set as the product requires. - Export a barrel. Re-export every shipped component from
components/ui/index.ts(seereferences/components.md). - Document usage and variants. For each component, note its variants, sizes, props, and accessibility behavior so consumers apply it consistently.
Related Skills
onewave-ai/typography-scale-builder
development
VerifiedTrustedCommunity
Build a complete typographic system -- modular or fluid type scale, line-height and tracking per size, weight roles, and vertical rhythm -- exported as tokens, Tailwind config, and CSS. Pairs with font-pairing-suggester (which picks the fonts; this builds the system they live in).
217SKILL.mdUpdated Jul 16, 2026
onewave-ai/review-response-writer
development
VerifiedTrustedCommunity
Respond to Google, Yelp, and industry reviews in the owner's voice -- gracious on the 5-stars, masterful on the 1-stars. Handles the angry customer, the unfair review, the fake review, and the one that mentions a legal or health issue. Every response written for the thousand future customers reading it.
217SKILL.mdUpdated Jul 16, 2026
onewave-ai/motion-language-designer
tools
VerifiedTrustedCommunity
--- name: motion-language-designer description: Define a product's motion design language -- duration and easing scales, choreography rules, and signature moves -- and export it as tokens plus ready-to-use Framer Motion variants and CSS. The difference between animations and a motion system: everything moves like it belongs to the same product. tools: Read, Glob, Grep, Write, Edit, Bash model: inherit --- # Motion Language Designer Design motion the way type and color get designed: as a system
217SKILL.mdUpdated Jul 16, 2026
onewave-ai/local-seo-optimizer
development
VerifiedTrustedCommunity
Get a local business found on Google -- audit and optimize the Google Business Profile, local pack ranking factors, review velocity, NAP consistency across directories, and location pages. For businesses whose customers search "near me," this outranks everything else in marketing.
217SKILL.mdUpdated Jul 16, 2026