All Skills Search Tools

|

Loading...

AI Agent Skills Directory with categorization, English/Chinese translation, and script security checks.

Sitemap

Home
All Skills
Search
Tools

About

About Us
Disclaimer
Copyright

Help

FAQ
Privacy
Terms

Contact Us:osulivan147@qq.com

© 2026 Skill4Agent. All rights reserved.

Home/All Skills/Frontend Development/theming-system

theming-system

Original：🇺🇸 English

Translated

Design a theming architecture that supports brand variants, dark mode, and high-contrast modes with token mapping.

1installs

Sourceowl-listener/designer-skills

Added on2026-03-13

NPX Install

npx skill4agent add owl-listener/designer-skills theming-system

Tags

Translated version includes tags in frontmatter

theming-architecture token-mapping dark-mode multi-brand-theming css-custom-properties

SKILL.md Content

View Translation Comparison →

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

Download

Download TranslatedIncludes original Skill.md

(1.8 KB)Download Original(835 B)

Related Skills

performance

Optimize web performance for faster loading and better user experience. Use when asked to "speed up my site", "optimize performance", "reduce load time", "fix slow loading", "improve page speed", or "performance audit".

web-design-reviewer

This skill enables visual inspection of websites running locally or remotely to identify and fix design issues. Triggers on requests like "review website design", "check the UI", "fix the layout", "find design problems". Detects issues with responsive design, accessibility, visual consistency, and layout breakage, then performs fixes at the source code level.

tools-ui

Tool lifecycle UI components for React/Next.js from ui.inference.sh. Display tool calls: pending, progress, approval required, results. Capabilities: tool status, progress indicators, approval flows, results display. Use for: showing agent tool calls, human-in-the-loop approvals, tool output. Triggers: tool ui, tool calls, tool status, tool approval, tool results, agent tools, mcp tools ui, function calling ui, tool lifecycle, tool pending

reka-ui

Use when building with Reka UI (headless Vue components) - provides component API, accessibility patterns, composition (asChild), controlled/uncontrolled state, virtualization, and styling integration. Formerly Radix Vue.