Skill Store 33

Component Variants

Creates light and dark mode component variants with consistent color token mapping.

by ainergiz

The skill

Creates light and dark mode component variants with consistent color token mapping. Use when building dual-theme components, creating light/dark UI pairs, or implementing theme-aware designs.

This skill's licence does not allow redistribution, so the store does not show its text. Read it at the source.

Use this skill

Connect your agent to the Skill Store MCP server and ask for it by ref: ainergiz/component-variants-83922847213.

Markdown version

Details

Publisher
ainergiz
Category
Software Development › Frontend & UI
Updated
2026-01-07

References

More from ainergiz

  • Create New Design Scaffolds a new design in the design-inspirations repo with preview component, detail page, and m…
  • Dropdown Menu Creates dropdown menus with proper click-outside detection and z-index stacking for list contexts.
  • Expandable Card Creates expandable/collapsible cards using CSS grid-rows animation with smooth transitions.
  • Glassmorphism Creates frosted glass UI elements with blur, transparency, and subtle borders.

Related skills

  • Theming System Design theming architecture — brand variants, dark mode, and high-contrast — mapped through token…
  • Dark Mode Implementer Implements complete dark/light mode theming systems using CSS variables, Tailwind dark mode, Reac…
  • Material Ui Theming Guides Material UI theming and design tokens (createTheme, ThemeProvider, palette, colorSchemes,…
  • Color Mode And Theme Light, dark or both, and when a theme selector is worth it.
  • Color System Build or repair a color system: full brand and neutral ramps, semantic color tokens, contrast-ver…