alfredolopez80/design-system
.claude/skills/design-system/SKILL.md
Design system management for frontend agents. Actions: init (create DESIGN.md from template), load (inject into agent context), validate (check component compliance). Use when: (1) starting a frontend project, (2) generating UI components, (3) reviewing frontend code for design consistency. Triggers: /design-system, 'design system', 'create design', 'design tokens'.
$ install --global
skillsauthnpx skillsauth add alfredolopez80/multi-agent-ralph-loop design-systemInstall 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: Apr 15, 2026, 6:06 PM14.0s1 file scanned
SKILL.md
- # VERSION:
- 3.0.0
- name:
- design-system
- description:
- Design system management for frontend agents. Actions: init (create DESIGN.md from template), load (inject into agent context), validate (check component compliance). Use when: (1) starting a frontend project, (2) generating UI components, (3) reviewing frontend code for design consistency. Triggers: /design-system, 'design system', 'create design', 'design tokens'.
- argument-hint:
- <action: init|load|validate> [options]
- user-invocable:
- true
Design System Skill v3.0
Manage DESIGN.md files that frontend agents read to generate consistent UI.
Actions
/design-system init
Create a new DESIGN.md from the template:
- Copy
docs/templates/DESIGN.md.templateto project root asDESIGN.md - Ask user for: project name, visual theme, primary color
- Fill in template variables
- Output:
DESIGN.mdready for customization
/design-system init
# Creates DESIGN.md with 9 sections from template
/design-system load
Load DESIGN.md into current context for frontend work:
- Read
DESIGN.mdfrom project root (or specified path) - Extract design tokens as structured data
- Inject into agent context as reference
- Used automatically by orchestrator Step 3 (PLAN) for frontend tasks
/design-system load
# Loads DESIGN.md tokens into context
/design-system validate
Check generated components against DESIGN.md:
- Read DESIGN.md
- Scan specified files for design token usage
- Report violations: hardcoded colors, wrong spacing, missing states
- Output: compliance report with fix suggestions
/design-system validate src/components/
# Checks all components against design system
Integration Points
| Skill/Agent | How It Uses DESIGN.md | |---|---| | Orchestrator Step 3 | If task is frontend and DESIGN.md exists, include as context | | ralph-frontend | Loads DESIGN.md before generating any component | | /create-task-batch | Phase 1 asks about design system for frontend tasks | | /gates Stage 5 | BROWSER validation checks design compliance (future) |
Validation Checklist
The 9 required sections in every DESIGN.md:
- Visual Theme
- Color Palette (with CSS custom property tokens)
- Typography (with font stack and scale)
- Components (buttons, inputs, cards minimum)
- Layout (grid, spacing scale, breakpoints)
- Depth and Elevation
- Do's and Don'ts
- Responsive Behavior
- Agent Prompt Guide
Template
Source: docs/templates/DESIGN.md.template
Inspired by VoltAgent/awesome-design-md — 55+ real-world DESIGN.md files.
Related Skills
alfredolopez80/vault
development
VerifiedTrustedCommunity
Living knowledge base management. Actions: search (query vault), save (store learning), index (update indices), compile (raw->wiki->rules graduation), init (create vault structure). Follows Karpathy pipeline: ingest->compile->query. Use when: (1) searching accumulated knowledge, (2) saving learnings, (3) compiling raw notes into wiki, (4) initializing a new vault. Triggers: /vault, 'vault search', 'knowledge base', 'save learning'.
121SKILL.mdUpdated Apr 15, 2026
alfredolopez80/spec
testing
VerifiedTrustedCommunity
Produce a verifiable technical specification before coding. 6 mandatory sections: Interfaces, Behaviors, Invariants (from Aristotle Phase 2), File Plan, Test Plan, Exit Criteria (executable bash commands + expected results). Use when: (1) before implementing features with complexity > 4, (2) as Step 1.5 in orchestrator workflow, (3) when requirements need formalization. Triggers: /spec, 'create spec', 'write specification', 'technical spec'.
121SKILL.mdUpdated Apr 15, 2026
alfredolopez80/ship
testing
VerifiedTrustedCommunity
Pre-launch shipping checklist orchestrating /gates, /security, /browser-test, /perf. Ensures nothing ships without passing all quality checks. Use when: (1) before deploying, (2) before merging to main, (3) before release. Triggers: /ship, 'ship it', 'ready to deploy', 'pre-launch check'.
121SKILL.mdUpdated Apr 15, 2026
alfredolopez80/perf
development
VerifiedTrustedCommunity
Performance optimization skill. Core Web Vitals via Lighthouse, bundle size analysis, metrics tracking over time. Use when: (1) optimizing frontend performance, (2) analyzing bundle size, (3) tracking metrics regression. Triggers: /perf, 'performance audit', 'core web vitals', 'bundle size'.
121SKILL.mdUpdated Apr 15, 2026