skills.rest
gileck
gileckCOMMUNITY
Explore all skills by this author →
GitHub

theming-guidelines

Enforce semantic color tokens and consistent component styles in React/Next.js projects.

Updated Mar 28, 2025
Search Tags:#theming#accessibility#Tailwind#design-system#ui-consistency#semantic-tokens
One-click install
npx skills add https://github.com/gileck/app-template-ai --skill theming-guidelines
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: theming-guidelines
Source: https://github.com/gileck/app-template-ai/tree/main/.ai/skills/template/theming-guidelines
Command: npx skills add https://github.com/gileck/app-template-ai --skill theming-guidelines

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a standardized approach to theming and styling across UI components, helping teams avoid inconsistent visuals and color misuse by promoting semantic tokens and a cohesive design system.

Core Features & Use Cases

  • Semantic tokens: Replaces hardcoded colors with design-system tokens (bg-background, text-foreground, etc.) to ensure accessibility and consistency.
  • Component guidelines: Defines how to apply tokens across common components (cards, modals, buttons) for uniform appearance.
  • Use Case: A design team can audit an existing component library and refactor styles to rely on semantic tokens, achieving theme-agnostic styling across light/dark modes.

Quick Start

  • Review the current UI components and replace hard-coded colors with semantic tokens.
  • Reference docs/theming.md for full guidelines and token mappings.
  • Update or create a design-system note in the repository to document the conventions.

Frequently Asked Questions about theming-guidelines

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I standardize UI theming with semantic tokens in React and Next.js?▼

Semantic tokens replace hardcoded colors with design-system variables like bg-background and text-foreground. They ensure accessibility and consistent styling across UI components by decoupling visual properties from specific color values.

How do I refactor a component library to use semantic color tokens for light and dark modes?▼

Refactoring a component library involves auditing existing styles and replacing hardcoded color values with semantic tokens. This achieves theme-agnostic styling, allowing components to adapt coherently across light and dark modes without style conflicts.

Does this semantic theming approach work with Tailwind CSS for UI consistency?▼

Yes, the semantic theming approach works with Tailwind CSS by mapping utility classes to semantic tokens. This integration enforces UI consistency and ensures accessible color contrast ratios across all design-system components.

What is the best way to enforce design-system consistency across UI components?▼

The best way to enforce design-system consistency is defining component guidelines that standardize how semantic tokens apply to common elements like cards, modals, and buttons. This prevents visual inconsistencies and color misuse across the application.

Why should I use semantic tokens instead of hardcoded colors in my design system?▼

You should use semantic tokens instead of hardcoded colors to avoid inconsistent visuals and color misuse. Semantic tokens provide a standardized approach to theming, ensuring your UI components remain accessible and theme-agnostic.

Related Skills

Explore More Design & Creative Skills→
jiushiwonjiushiwon
44

frontend-style-harmonizer-skill

Audit frontend styles for duplication, dimension drift, and hardcoded values.

Community
Advanced
iButtersiButters
3

css-tokens

Generate CSS design tokens for colors, spacing, typography, and theming.

Community
Intermediate
moughamirmoughamir

color-palette

Generate accessible Tailwind v4 color palettes with WCAG contrast validation.

Community
Intermediate
murphytruemanmurphytrueman
155

token-compliance

Audit codebases for design token compliance and hardcoded values.

Community
Advanced