← ClaudeAtlas

pixel-portlisted

Pixel-port an executable Claude Design (or local design-ref HTML/CSS/JS) into a production site using a temple file tree, CSS design tokens, a plan gate, and a pixelmatch visual-diff. Use when the user wants a pixel port, to port a Claude Design page, to run visual-diff on a ported page, or to foundation-port tokens and primitives from a design kit.
AkhileshThykkat/pixel-port · ★ 0 · Web & Frontend · score 72
Install: claude install-skill AkhileshThykkat/pixel-port
# Pixel-port Port one **executable design** (HTML/CSS/JS that can be served statically — Claude Design by default) into a production site. Same **process** every run. Framework and brand are project-local. **Leading words:** *temple* (anyone walking the tree knows where a thing lives). *Foundation first* (tokens + primitives before pages). *Fail loud* (never silently diff the wrong variant or viewport). ## Inputs A session needs: 1. A Claude Design share link **or** an existing `design-ref/<slug>/` tree. 2. A page name (slug = kebab-case). 3. A **framework, chosen once.** If `.pixelport/config.json` exists, read it and never re-ask. Else detect `astro.config.*` / `next.config.*` in the target repo, or ask once, then write config with `npx pixel-port init`. Stop if framework is still unset. Then read [`adapters/<framework>.md`](adapters/astro.md) (`astro` | `next-static` | `html`). Optional variants (regions, locales) live in config. Default variant is `default`. Do not invent Transket-style geo unless the project config lists it. ## Two-pass **Foundation pass** (once per site, or when the design kit changed): extract `_ds/`, `kit/*.css`, `ui/*`, `ui-icons/*` into tokens + chrome + primitives. No marketing page. Done when: token files exist, `SPEC.md` reuse checklist has real paths, layout/smoke page consumes those tokens, visual-diff `--self-test` of the design-ref pipeline is green. **Page pass** (every page): steps below. Do not re-extract tokens unless the kit c