aj-geddes/design-system-creation
skills/design-system-creation/SKILL.md
Build comprehensive design systems with components, patterns, and guidelines. Enable consistent design, faster development, and better collaboration across teams.
$ install --global
skillsauthnpx skillsauth add aj-geddes/useful-ai-prompts design-system-creationInstall 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 2, 2026, 2:09 AM67.0s6 files scanned
SKILL.md
- name:
- design-system-creation
- description:
- >
Design System Creation
Table of Contents
- Overview
- When to Use
- Quick Start
- Reference Guides
- Best Practices
Overview
A design system is a structured set of components, guidelines, and principles that ensure consistency, accelerate development, and improve product quality.
When to Use
- Multiple product interfaces or teams
- Scaling design consistency
- Reducing redundant component development
- Improving design-to-dev handoff
- Creating shared language across teams
- Building reusable components
- Documenting design standards
Quick Start
Minimal working example:
Design System Structure:
Foundation Layer:
Typography:
- Typefaces (Roboto, Inter)
- Font sizes (scale: 12, 14, 16, 20, 28, 36, 48)
- Font weights (Regular, Medium, Bold)
- Line heights and letter spacing
Colors:
- Primary brand color (#2196F3)
- Secondary colors
- Neutral palette (grays)
- Semantic colors (success, error, warning)
- Dark mode variants
Spacing:
- Base unit: 4px
- Scale: 4, 8, 12, 16, 24, 32, 48, 64px
- Apply consistently across UI
Shadows & Elevation:
- Elevation 0 (flat)
- Elevation 1, 2, 4, 8, 16 (increasing depth)
- Used for modals, cards, overlays
// ... (see reference guides for full implementation)
Reference Guides
Detailed implementations in the references/ directory:
| Guide | Contents | |---|---| | Design System Components | Design System Components | | Component Documentation | Component Documentation | | Design System Governance | Design System Governance | | Design System Documentation | Design System Documentation |
Best Practices
✅ DO
- Start with essential components
- Document every component thoroughly
- Include code examples
- Test components across browsers
- Include accessibility guidance
- Version the design system
- Have clear governance
- Communicate updates proactively
- Gather feedback from users
- Maintain incrementally
❌ DON'T
- Create too many components initially
- Skip documentation
- Ignore accessibility
- Make breaking changes without migration path
- Allow inconsistent implementations
- Ignore user feedback
- Let design system stagnate
- Create components without proven need
- Make components too prescriptive
- Ignore performance impact
Related Skills
aj-geddes/zero-trust-architecture
development
VerifiedTrustedCommunity
Implement Zero Trust security model with identity verification, microsegmentation, least privilege access, and continuous monitoring. Use when building secure cloud-native applications.
154SKILL.mdUpdated Apr 1, 2026
aj-geddes/xss-prevention
development
VerifiedTrustedCommunity
Prevent Cross-Site Scripting (XSS) attacks through input sanitization, output encoding, and Content Security Policy. Use when handling user-generated content in web applications.
154SKILL.mdUpdated Apr 1, 2026
aj-geddes/wireframe-prototyping
tools
VerifiedTrustedCommunity
Create wireframes and interactive prototypes to visualize user interfaces and gather feedback early. Use tools and techniques to communicate design ideas before development.
154SKILL.mdUpdated Apr 1, 2026
aj-geddes/websocket-implementation
development
VerifiedTrustedCommunity
Implement real-time bidirectional communication with WebSockets including connection management, message routing, and scaling. Use when building real-time features, chat systems, live notifications, or collaborative applications.
154SKILL.mdUpdated Apr 1, 2026