recomponentize-ui

Refactor UI code into atomic component layers sourced from a design-system registry.

5|1|Updated Mar 7, 2026
One-click install
npx skills add https://github.com/ai-hero/hero-skills --skill recomponentize-ui-ai-hero
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: recomponentize-ui
Source: https://github.com/ai-hero/hero-skills/tree/main/skills/recomponentize-ui
Command: npx skills add https://github.com/ai-hero/hero-skills --skill recomponentize-ui-ai-hero

SYSTEM DOCUMENTATION & REQUIREMENTS

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.

Frequently Asked Questions about recomponentize-ui

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

FAQPage Schema
How do I refactor a React UI into atomic components?

Run the recomponentize step to sort components into atoms, molecules, organisms, and templates with downward-only imports. Vendored registry code stays flat in ui/ and blocks/, while app components are placed at the lowest layer that fits their complexity.

How do I migrate a project to a shadcn registry design system?

Configure a registries block in components.json with your namespace and token, then inventory local components and map each concept to upstream items using shadcn search and the docs gallery. Install matches with npx shadcn add and rewrite call sites, never the vendored files.

Can I use this without a private design-system registry?

Yes. Without a registry it falls back to stock shadcn, an existing UI library like MUI or Chakra, or a recomponentize-only pass with no new dependencies. The atomic refactor and token codemods run in every case.

Why does shadcn registry authentication fail with a 401 error?

The CLI only expands the plain ${VAR} form, so ${VAR:-default} ships as a literal header string. Also the .env file must sit next to components.json, not the repo root, or export the token in the shell instead.

Should I edit vendored components in components/ui directly?

No. Vendored files are overwritten by the next shadcn add, so local edits are silently reverted. Instead compose around them, pass className which merges via cn(), or change the component upstream and re-add it.

When should I not run a UI recomponentization pass?

Do not run it on a producer repo that publishes the design system itself, since it would invert the pipeline by consuming its own output. Also avoid forcing upstream matches for components with no real equivalent; keep those local and recomponentize only.