rcode-theme-system

Audit frontend theme tokens for styling consistency and RTL readiness.

2|1|Updated Apr 10, 2026
One-click install
npx skills add https://github.com/hanzlahabib/rcode --skill rcode-theme-system
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: rcode-theme-system
Source: https://github.com/hanzlahabib/rcode/tree/main/rcode/skills/core/rcode-theme-system
Command: npx skills add https://github.com/hanzlahabib/rcode --skill rcode-theme-system

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams catch frontend theme drift before launch by auditing whether colours, typography, spacing, motion, breakpoints, and RTL behavior are consistently tokenized instead of hardcoded.

Core Features & Use Cases

  • Token Audit: Checks that visual values come from a single design-token system rather than scattered literals.
  • Consistency Review: Verifies dark mode pairing, logical spacing, radii, shadows, motion, and breakpoint usage across the interface.
  • RTL Readiness: Confirms right-to-left support for layouts, icons, and mixed-language content.
  • Use Case: A product team about to ship a multilingual app can run this Skill to find inconsistent colours, hardcoded spacing, and layout issues before release.

Quick Start

Ask the skill to audit your frontend theme system for token drift, hardcoded values, and RTL consistency before launch.

Frequently Asked Questions about rcode-theme-system

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

FAQPage Schema
How do I audit frontend design tokens for hardcoded values before launch?

Audit frontend design tokens by checking that colors, typography, spacing, motion, and breakpoints come from semantic CSS variables rather than scattered literals. This verifies dark mode pairing and RTL behavior to catch theme drift before release.

What is theme drift in a CSS variable design system?

Theme drift occurs when visual values bypass a centralized design token system and become hardcoded literals. It breaks dark mode pairing, logical spacing, and RTL behavior consistency across components and pages.

How do I check RTL readiness and logical property support across my interface?

Check RTL readiness by confirming right-to-left support for layouts, icons, and mixed-language content. Verify that logical properties and semantic CSS variables replace directional literals across the interface.

Does this frontend theme audit work for multilingual app pre-launch reviews?

Yes, this frontend theme audit suits multilingual app pre-launch reviews by verifying RTL behavior, logical spacing, and consistent tokenization across colors, typography, motion, and breakpoints before release.

How do I verify dark mode pairing and consistency across frontend components?

Verify dark mode pairing by auditing semantic CSS variables across the interface to confirm that colors, typography, spacing, radii, shadows, and motion stay consistently tokenized without hardcoded literals.

What is the best way to remove hardcoded CSS literals from a design system?

Remove hardcoded CSS literals by auditing frontend theme tokens to verify that visual values come from a single design-token system, confirming dark mode and logical-property support across the interface.