← ClaudeAtlas

prototype-setuplisted

Run once per repo to make /prototype's wireframes look like your app instead of gray boxes. Finds your components, design tokens and fonts, confirms them with you, and writes .prototypes/kit.css + kit.md. Re-running it is how you change the answers.
madebydiego/prototype · ★ 0 · Web & Frontend · score 73
Install: claude install-skill madebydiego/prototype
# prototype setup One pass: look, confirm, write files. Nothing else. Never delete or rewrite anything already under `.prototypes/` — this skill only writes the files named below, and touches existing ones only where stated. Prototypes are gray by default and that's fine — this only exists because "gray box" and "our button" are different amounts of useful when you're trying to picture a screen. **Not in a git repo?** Say so and stop: this is a per-repo setting, and `/prototype` keeps working with the gray kit regardless. ## Step 1 — Look before you ask Find it yourself. Do not interview the user about their own codebase. **Monorepo first.** If the repo holds several apps (`apps/*`, `packages/*` each with a `package.json`): when the working directory is inside one app, configure that one; otherwise the one question in Step 2 becomes "which app?" with the candidate paths as options. Spend the file-reading budget inside the chosen app plus the shared UI package it imports. Record the choice as an `app:` line in `kit.md`. - **Components** — `Glob` for `src/components/**`, `app/components/**`, `components/**`, `packages/ui/**`. Note the deepest directory that actually holds them. - **Library** — read `package.json` dependencies: `tailwindcss`, `@radix-ui/*` (likely shadcn/ui — confirm with a `components.json`), `@mui/*`, `@chakra-ui/*`, `@mantine/*`, `antd`, `bootstrap`. None of those means plain CSS. - **Tokens** — resolve each kit variable in this order, first hit wins;