Menü
Token hierarchy, theming strategy, and cross-platform consistency
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Basierend auf der SOC-Berufsklassifikation
| name | Design System Architecture |
| department | artisan |
| description | Token hierarchy, theming strategy, and cross-platform consistency |
| version | 1 |
| triggers | ["design system","design tokens","theme","dark mode","CSS variables","Figma","Storybook","component library","style guide"] |
Design a token-based design system architecture, including primitive → semantic → component token hierarchy, theming strategy (dark/light mode), and cross-platform implementation plan.
Review the existing styling approach:
Establish the raw values that form the foundation:
Map primitives to semantic meaning:
Map semantic tokens to component-specific values:
Define how themes override token values:
If multiple platforms:
# Design System Architecture
## Token Hierarchy
### Primitive Tokens
| Category | Token | Value |
|----------|-------|-------|
| Color | blue-500 | #3B82F6 |
| Spacing | space-4 | 16px |
| Type | text-base | 16px/24px |
### Semantic Tokens
| Token | Light | Dark | Usage |
|-------|-------|------|-------|
| surface-primary | white | gray-900 | Main background |
| text-primary | gray-900 | gray-50 | Body text |
| interactive-primary | blue-500 | blue-400 | Buttons, links |
### Component Tokens
| Component | Token | Maps To |
|-----------|-------|---------|
| Button (primary) | button-bg | interactive-primary |
| Button (primary) | button-text | text-inverse |
## Theme Switching
[Implementation approach — CSS class, media query, user preference]
## File Structure
tokens/ primitives.json semantic-light.json semantic-dark.json components.json
## Migration Plan
[Steps to migrate from current approach to token-based system]
Local git operations for syncing, branching, merging, and conflict resolution
GitHub interactions for issues, PRs, releases, and repository management
Use this skill when performing hardware security analysis for System-on-Chip components — threat modeling, verification scaffolding, compliance mapping, executive briefing, microarchitectural attack analysis, physical side-channel assessment, kernel security analysis, emerging hardware security, or TLA+ formal specification. Routes to the appropriate specialist. Trigger phrases include "threat model my SoC", "run STRIDE analysis", "generate SVA assertions", "compliance check against FIPS", "executive summary of findings", "Spectre analysis for cache", "DPA attack assessment", "kernel hardening review", "PQC hardware review", "TLA+ spec for access control". Do NOT use for software-only security, network security, or web application security.
Use when working with Terraform or OpenTofu - creating modules, writing tests (native test framework, Terratest), setting up CI/CD pipelines, reviewing configurations, choosing between testing approaches, debugging state issues, implementing security scanning (trivy, checkov), or making infrastructure-as-code architecture decisions
Security audit checklist for web applications. Use when reviewing, auditing, or hardening a web app's security posture. Covers rate limiting, auth headers, IP blocking, CORS, security middleware, input validation, file upload limits, ORM usage, and password hashing. Triggers on requests like "review security", "harden this app", "security audit", "check for vulnerabilities", or when building/reviewing API endpoints.
Use this skill when connecting AI or LLMs to data platforms. Covers MCP servers for warehouses, natural-language-to-SQL, embeddings for data discovery, LLM-powered enrichment, and AI agent data access patterns. Common phrases: "text-to-SQL", "MCP server for Snowflake", "LLM data enrichment", "AI agent access". Do NOT use for general data integration (use data-integration) or dbt modeling (use dbt-transforms).