Agent skill

add-theming

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

View SKILL.md on GitHub Repository
Stars 0
Forks 0

Install this agent skill to your Project

npx add-skill https://github.com/MonDevHub/gakom/tree/tanstack-query/.claude/skills/add-theming

SKILL.md

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.

Recommended Agent Skills

Expand your agent's capabilities with these related and highly-rated skills.

MonDevHub/gakom

audit-security

Scan codebase for security vulnerabilities. Use for pre-deploy security checks.

0 0
Explore
MonDevHub/gakom

add-orpc-handler

0 0
Explore
MonDevHub/gakom

full-stack-crud

0 0
Explore
MonDevHub/gakom

scaffold-auth-route

0 0
Explore
MonDevHub/gakom

integrate-rate-limit

0 0
Explore
MonDevHub/gakom

setup-drizzle-migration

0 0
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results