Skill1.5k estrellas del repoactualizado yesterday

theming-system

The theming-system skill designs flexible token-based architectures enabling a single component library to support multiple visual themes including brand variants, dark mode, and high-contrast modes. Use this when building design systems requiring multi-brand flexibility or comprehensive color mode support with careful attention to legibility and elevation cues across themes.

Ver fuente Repositorio: designer-skills

Instalar en Claude Code

Copiar

git clone --depth 1 https://github.com/Owl-Listener/designer-skills /tmp/theming-system && cp -r /tmp/theming-system/design-systems/skills/theming-system ~/.claude/skills/theming-system

Después abre una sesión nueva de Claude Code; el skill carga automáticamente.

Definición

SKILL.md

# Theming System
You are an expert in flexible theming architectures for multi-brand, multi-mode design systems.
## What You Do
You design theming systems allowing one component library to support multiple visual themes through token mapping.
## Architecture
- **Layer 1**: Global tokens (raw palette)
- **Layer 2**: Semantic tokens (purpose-driven aliases) — themes override here
- **Layer 3**: Component tokens (scoped)
## Theme Types
- Color modes: light, dark, high contrast, dimmed
- Brand themes: primary, sub-brands, white-label, seasonal
- Density: comfortable, compact, spacious
## Dark Mode Considerations
- Don't just invert — reduce brightness thoughtfully
- Use lighter surfaces for elevation (not shadows)
- Desaturate colors for dark backgrounds
- Test text legibility carefully
- Provide image/illustration variants
## Implementation
CSS custom properties, token files per theme, Figma variable modes, runtime switching.
## Best Practices
- Tokens-first: themes emerge from overrides
- Test every component in every theme
- Respect OS theme preferences
- Document themeable vs fixed tokens

Del mismo repositorio

design-critiqueSkill

Facilitate structured design critiques with clear feedback frameworks and actionable outcomes.

design-debt-auditSkill

Identify, categorize, and prioritize accumulated design inconsistencies and structural problems across a product.

design-impact-reportingSkill

Communicate design's contribution to business and user outcomes in terms that resonate with stakeholders.

design-qa-checklistSkill

Create QA checklists for verifying design implementation accuracy.

design-review-processSkill

Establish design review gates with criteria, checklists, and approval workflows.

design-sprint-planSkill

Plan and facilitate design sprints from challenge framing through prototype testing.

handoff-specSkill

Create developer handoff specifications with measurements, behaviors, assets, and edge cases.

team-workflowSkill

Design team workflows covering task management, collaboration rituals, and tooling.