oimiragieo/design-systems
.claude/skills/design-systems/SKILL.md
Design system lookup, CSS best practices, and AI-driven UI component generation via MCP tools
$ install --global
skillsauthnpx skillsauth add oimiragieo/agent-studio design-systemsInstall 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 7, 2026, 8:17 PM10.9s10 files scanned
SKILL.md
- name:
- design-systems
- description:
- Design system lookup, CSS best practices, and AI-driven UI component generation via MCP tools
- version:
- 1.0.0
- category:
- frontend
- agents:
- [frontend-pro, ui-components-expert, mobile-ux-reviewer]
Design Systems
Access design token libraries, CSS documentation, and AI-driven component generation.
Design Systems MCP (southleft/design-systems-mcp)
Semantic search across 188+ design systems (Material, Ant Design, Carbon, Chakra, etc.):
# Setup
npx @southleft/design-systems-mcp
# Example queries via MCP
mcp__design_systems__search_components({ query: "button with loading state" })
mcp__design_systems__get_tokens({ system: "material", category: "color" })
mcp__design_systems__get_patterns({ pattern: "form validation error" })
Use cases: Find existing component patterns before building custom, get design token values, compare component API across systems.
CSS MCP (stolinski/css-mcp)
MDN CSS documentation + browser compatibility via MCP:
mcp__css__query_property({ property: "container-type" }) # Container queries
mcp__css__check_compat({ property: "has()", browsers: ["chrome", "firefox", "safari"] })
mcp__css__get_examples({ selector: ":is()" })
Magic MCP — AI UI Component Generation (21st-dev)
Generate UI components from natural language:
# Configure Magic MCP with 21st-dev API key
mcp__magic__create_component({ description: "dark mode toggle with animation", framework: "react" })
mcp__magic__find_component({ query: "pricing table with feature comparison" })
Design Token Standards
/* CSS Custom Properties (recommended) */
--color-primary: #6366f1;
--spacing-md: 1rem;
--radius-lg: 0.5rem;
--font-sans: 'Inter', system-ui, sans-serif;
/* Token categories: color, spacing, typography, radius, shadow, z-index */
Anti-Patterns
- Never hardcode hex colors in components — use design tokens
- Never reinvent components that exist in your design system
- Never use px for spacing in responsive layouts — use rem/em
When to invoke
Skill({ skill: 'design-systems' }) for design token lookup, component pattern research, CSS best practices, AI component generation
Related Skills
oimiragieo/neurokit2
tools
VerifiedTrustedCommunity
Comprehensive biosignal processing toolkit for analyzing physiological data including ECG, EEG, EDA, RSP, PPG, EMG, and EOG signals. Use this skill when processing cardiovascular signals, brain activity, electrodermal responses, respiratory patterns, muscle activity, or eye movements. Applicable for heart rate variability analysis, event-related potentials, complexity measures, autonomic nervous system assessment, psychophysiology research, and multi-modal physiological signal integration.
24SKILL.mdUpdated Apr 15, 2026
oimiragieo/networkx
tools
VerifiedTrustedCommunity
Comprehensive toolkit for creating, analyzing, and visualizing complex networks and graphs in Python. Use when working with network/graph data structures, analyzing relationships between entities, computing graph algorithms (shortest paths, centrality, clustering), detecting communities, generating synthetic networks, or visualizing network topologies. Applicable to social networks, biological networks, transportation systems, citation networks, and any domain involving pairwise relationships.
24SKILL.mdUpdated Apr 15, 2026
oimiragieo/molfeat
data-ai
VerifiedTrustedCommunity
Molecular featurization for ML (100+ featurizers). ECFP, MACCS, descriptors, pretrained models (ChemBERTa), convert SMILES to features, for QSAR and molecular ML.
24SKILL.mdUpdated Apr 15, 2026
oimiragieo/modal
development
VerifiedTrustedCommunity
Run Python code in the cloud with serverless containers, GPUs, and autoscaling. Use when deploying ML models, running batch processing jobs, scheduling compute-intensive tasks, or serving APIs that require GPU acceleration or dynamic scaling.
24SKILL.mdUpdated Apr 15, 2026