SKILL.md
Screenshot to Code
Recreate the UI in the image as clean, responsive, accessible code, then check the render against the image.
Workflow
-
Pick the target stack. If the user is inside a project, match it: read
package.jsonfor React/Next/Vue and the Tailwind version, and reuse existing components, tokens, and icon libraries. Do not ask when the repo already answers it. With no project:- Single screen or quick prototype: one self-contained
index.html(Tailwind via the browser build, see references/stack-setup.md). - App or multi-screen: React + TypeScript + Tailwind v4 on Vite.
- User mentions Next.js, SSR, or routing: Next.js App Router.
- Single screen or quick prototype: one self-contained
-
Write a short spec before coding. Looking at the image, note:
- Layout regions top to bottom (nav, hero, sidebar, grid, footer) and the grid or flex structure of each
- Design tokens: 3-6 colors as hex, font family guess and the type scale, spacing rhythm (usually multiples of 4px), corner radius, shadow style
- Repeated components (cards, list rows, buttons) that should be one component with props
- What the image cannot show: hover and focus states, mobile layout, real data, content below the fold
Estimate sizes from the image resolution. If the screenshot is 2x (a Retina capture 2880px wide is a 1440px layout), halve the pixel measurements.