pixel-portlisted
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