What problem does it solve? Applying a new brand's color palette to an existing React TSX artifact normally requires tedious manual find-and-replace of hex values, which risks missing embedded literals or breaking CSS variable references. This Skill automates the token swap while preserving structure, content, and behavior. ## Core Features & Use Cases - AST-Based Hex Swapping: Parses TSX with Babel and rewrites exact-match hex literals, including hex values embedded inside larger strings, while leaving var(--color-*) references untouched. - CSS Regeneration: Regenerates the brand-vars CSS file for the target brand via the template-forge vite-shell-css template. - WCAG Contrast Reporting: Scores key color pairs (ink/ember/muted on backgrounds, white on ember) against WCAG 2.1 levels and reports warnings without blocking output. - Use Case: You have a React component built for the knowme brand and need an identical version styled for prometheus-ags; run the Skill with both brand TOMLs to produce a rebranded TSX plus matching CSS in one step. ## Quick Start Ask the agent to rebrand your TSX file by providing the source path, the from-brand and to-brand names, and the desired output path.
