skills.rest
Kaakati
KaakatiCOMMUNITY
Explore all skills by this author →
Website𝕏@kaakatiGitHub

theming

Manage cross-platform design tokens and theming for web and mobile applications.

2|1|Updated Feb 27, 2026
Search Tags:#theming#design tokens#tailwind#dark mode#react native#css variables#rails
One-click install
npx skills add https://github.com/Kaakati/sdh-claude-skills --skill theming-kaakati
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: theming
Source: https://github.com/Kaakati/sdh-claude-skills/tree/main/.claude/skills/theming
Command: npx skills add https://github.com/Kaakati/sdh-claude-skills --skill theming-kaakati

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill ensures a consistent visual identity and user experience across all your applications by providing a unified system for design tokens and theming.

Core Features & Use Cases

  • Cross-Platform Consistency: Apply the same design language (colors, typography, spacing) to Rails, ReactJS, Next.js, and React Native projects.
  • Dark/Light Mode Management: Implement seamless dark and light mode switching with WCAG AA contrast compliance.
  • Use Case: When developing a new feature, use this Skill to ensure its colors, fonts, and spacing align perfectly with the existing design system across your web and mobile applications.

Quick Start

Apply the 'Modern Preset' to the project's design tokens.

Frequently Asked Questions about theming

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

FAQPage Schema
How do I manage cross-platform design tokens for web and React Native?▼

You can manage cross-platform design tokens by defining a unified token set for colors, typography, and spacing, then consuming them via CSS variables for web and platform-specific formats for React Native. This ensures visual consistency across frameworks from a single source.

What is the best way to implement dark mode with WCAG AA contrast in Tailwind?▼

Implement dark mode in Tailwind by mapping design tokens to CSS custom properties and switching their values based on the theme. This approach ensures that color transitions meet WCAG AA contrast compliance for both dark and light modes.

Can I use the same design tokens for Rails Phlex and ReactJS applications?▼

Yes, the same design tokens can be applied to Rails Phlex and ReactJS applications. The system provides per-platform token consumption, allowing web frameworks to share a unified visual identity across colors, typography, and spacing.

How do I set up a unified theming system for colors, typography, and spacing?▼

Set up a unified theming system by defining design token categories for colors, typography, spacing, borders, shadows, and transitions. You can apply presets like the Modern Preset to quickly establish a baseline design language across your projects.

Does cross-platform theming work with both CSS variables and React Native styles?▼

Yes, cross-platform theming works with both CSS variables and React Native styles. The system supports per-platform token consumption, allowing web applications to use CSS custom properties while React Native uses its native styling mechanisms.

Related Skills

Explore More Design & Creative Skills→
kmshihab7878kmshihab7878
6

ui-design-system

Generate design tokens from a brand color and export as CSS, SCSS, and JSON.

Community
Advanced
doncan-orozcodoncan-orozco

ux

Design and implement UX/UI patterns for Papyro with Phlex and Tailwind CSS.

Community
Intermediate
ArieGoldkinArieGoldkin
10

design-system-starter

Generate design tokens, React component templates, and WCAG 2.1 accessibility documentation.

Community
Advanced
xurenluxurenlu
1

expo-tailwind-setup

Configure Tailwind CSS v4, react-native-css, and NativeWind v5 in Expo projects.

Community
Intermediate