Agent-Skills.md

Agent Skills: add-theming

Enable dark mode and CSS variable theming on components. Use for consistent theming.

UncategorizedID: Oungseik/gakom/add-theming

Repository

Oungseik/gakom
MonDevHub

Install this agent skill to your local

pnpm dlx add-skill https://github.com/MonDevHub/gakom/tree/HEAD/.claude/skills/add-theming

Skill Files

Browse the full folder contents for add-theming.

Download Skill

Loading file tree…

.claude/skills/add-theming/SKILL.md

Skill Metadata

Name
add-theming
Description
Enable dark mode and CSS variable theming on components. Use for consistent theming.

Add theming support to existing components.

Update component to:

  • Use CSS custom properties from app.css (--primary, etc.)
  • Support .dark class for dark mode
  • Ensure OKLCH color compatibility
  • Handle theme transitions smoothly

Theming conventions:

  • Reference app.css vars like var(--primary)
  • Use conditional classes for theme differences
  • Test in both light and dark modes
  • Follow OKLCH for vibrant neutrality

See examples.md for themed component patterns.