project-to-componentlisted

Port a page, screen, or design language from ANY existing codebase into a production-grade Next.js + TypeScript + Tailwind + shadcn/ui page in the current project — the source being another repo/folder on disk (a static design mock, an old app, a legacy frontend — CSS Modules, styled-components, SCSS, plain CSS, Vue, older React/Next, or a Tailwind app with different conventions). Use this whenever the user points at an existing project as the design source — "copy the dashboard from <path/repo>", "port /admin/orders from our old app", "make this route match <project>", "rebuild this screen from <codebase>", "migrate these pages into the new frontend", "make our page look like project X". It reads the source READ-ONLY, derives a reusable translation map (source colors/fonts/spacing → the target's oklch theme tokens; source custom UI → shadcn/ui + shared components), lifts the source theme first when the target still has the stock shadcn theme, then builds dedup-first — scanning ARCHITECTURE.md + MODULE_REGIST
vipincode/exr-agent-skills · ★ 0 · Web & Frontend · score 57

Install: claude install-skill vipincode/exr-agent-skills

# project-to-component Reproduce a screen that exists in **another codebase** as a production page in the **target Next.js + Tailwind + shadcn/ui project** — porting the *design*, not the code. The source project (a design mock, a legacy app, someone else's frontend) is a **layout / structure / spacing / visual reference only**: its styling system, custom UI components, and framework idioms stay behind. Everything is re-created with the target's design system — oklch theme tokens, shadcn/ui primitives, the shared component library, and the project's conventions. This is the third member of the design-to-code family. `figma-to-component` reads Figma, `html-to-component` reads an HTML file/URL, this one reads a **project**. All three follow the same rules downstream: contract files first, dedup-first building, one home per component, tokens not raw values. ## The three problems this skill solves 1. **Foreign styling doesn't transplant.** The source styles with CSS Modules, styled-components, SCSS, hex CSS variables, or a different Tailwind theme. Copying any of that across (a `.module.css`, a hex value, a `var(--color-accent)`) produces a page that ignores the target's theme and dies at the next redesign. The fix: derive a **translation map** once per source project — every recurring source value mapped to a target token, every source custom component mapped to a shadcn/shared equivalent — and route every pixel through it. 2. **Designs repeat, ports duplicate.** The same he