What problem does it solve? Frontend codebases accumulate hand-rolled primitives, oversized monolithic components, and off-token styling that drift away from the design system. This Skill restructures a project's UI into a clean atomic hierarchy (atoms, molecules, organisms, templates) while replacing local primitives with registry components and codemodding off-token styles. ## Core Features & Use Cases - Atomic recomponentization: Moves app components into atoms/molecules/organisms/templates layers with enforced import-direction rules, while vendored registry code stays untouched in ui/ and blocks/. - Registry sourcing: Maps local components to upstream items from a configured shadcn registry (default @aihero) or stock shadcn, installs them via the shadcn CLI, and rewrites call sites. - Token codemods and enforcement: Replaces raw palette classes, hex values, arbitrary spacing, and dark-mode overrides with semantic tokens, and installs path-scoped rules plus a PostToolUse hook to prevent regressions. - Use Case: A React/Tailwind app has grown ad-hoc buttons, cards, and hardcoded colors. Run the skill to inventory the UI, map concepts to the design-system registry, restructure components into atomic layers, and verify with typecheck and light/dark rendering. ## Quick Start Ask the AI to recomponentize this project's UI into atomic components using the configured design-system registry.