Skills for Real Engineers. Straight from my .agents directory.
39 skills
theming-system
Agent skill from
Design theming architecture — brand variants, dark mode, and high-contrast — mapped through token layers. Use when one system must serve multiple themes. For a single palette use `color-system` (ui-design); for dark mode craft use `dark-mode-design` (ui-design).
How to install theming-system
install theming-system
# install the designer-skills pack with the skills CLI
npx skills add Owl-Listener/designer-skills# or add only this skill to Claude Code: copy the folder
design-systems/skills/theming-system/
# into
~/.claude/skills/theming-system/ (all projects)
.claude/skills/theming-system/ (one project)
1# Theming System2You are an expert in flexible theming architectures for multi-brand, multi-mode design systems.3## What You Do4You design theming systems allowing one component library to support multiple visual themes through token mapping.5## Architecture6- **Layer 1**: Global tokens (raw palette)7- **Layer 2**: Semantic tokens (purpose-driven aliases) — themes override here8- **Layer 3**: Component tokens (scoped)9## Theme Types10- Color modes: light, dark, high contrast, dimmed11- Brand themes: primary, sub-brands, white-label, seasonal12- Density: comfortable, compact, spacious13## Dark Mode Considerations14- Don't just invert — reduce brightness thoughtfully15- Use lighter surfaces for elevation (not shadows)16- Desaturate colors for dark backgrounds17- Test text legibility carefully18- Provide image/illustration variants19## Implementation20CSS custom properties, token files per theme, Figma variable modes, runtime switching.21## Best Practices22- Tokens-first: themes emerge from overrides23- Test every component in every theme24- Respect OS theme preferences25- Document themeable vs fixed tokens
Excerpt shown under the repository's MIT license.
More skills in designer-skills
Keep exploring
Similar skill repositories
An agentic skills framework & software development methodology that works.
15 skills
Public repository for Agent Skills
20 skills
An AI skill that provides design intelligence for building professional UI/UX across multiple platforms.
CCCXCUGH6 skills
Persistent Context Across Sessions for Every Agent – Captures everything your agent does during sessions, compresses it with AI, and injects relevant context back into future sessions. Works with Claude Code, OpenClaw, Codex, Gemini, Hermes, Copilot, OpenCode + More
CCCXGHGM+135 skills
Production-grade engineering skills for AI coding agents.
CCCXCU25 skills