# pxlkit — Claude Code skills

Plugin v1.0.0, built against @pxlkit/ui-kit v2.1.1.
The two version independently; the skills read whichever kit version your project has.

Five skills for building pixel-art interfaces with @pxlkit/ui-kit:
111 React components, 226+ pixel-art icons, a switchable
pixel/linear surface, and seven tones.

Docs: https://pxlkit.xyz/skills
Source: https://github.com/Joangeldelarosa/pxlkit

## Install

    claude plugin marketplace add Joangeldelarosa/pxlkit && claude plugin install pxlkit@pxlkit

Minimal clone (skips the rest of the monorepo):

    claude plugin marketplace add Joangeldelarosa/pxlkit --sparse plugins/pxlkit

Update:

    claude plugin update pxlkit

## Requirements

  - React 18.2 or 19
  - Tailwind CSS v4 — the stylesheet is CSS-first and will not compile on v3
  - Node 20 or newer
  - Claude Code with the `claude plugin` CLI

## Skills

## /pxlkit:start — Set the project up

Checks whether this project can run pxlkit at all, then wires it up.

  What it does:
    - Classifies the project as ready, repairable or incompatible
    - Detects the framework and package manager, because the setup genuinely differs
    - Applies the matching recipe: stylesheet, @source directive, providers, fonts, dark mode
    - Introduces the other four commands

  Arguments:
    [project directory]  —  Defaults to the working directory.

  Example:
    /pxlkit:start

## /pxlkit:imagine — Build something new

Composes a page from the real component API, then measures what it built.

  What it does:
    - Reads the kit version your project actually has installed
    - Picks sections from recipes extracted from templates that ship
    - Writes a component budget as a table before writing any code
    - Generates, then runs the audit gates on its own output
    - Reports the gate results, including anything still failing

  Arguments:
    [description]  —  What you want. Plain language.
    --from <template>  —  landing · dashboard · ecommerce · portfolio · docs
    --surface pixel|linear  —  Chunky retro, or the same components with soft edges.

  Example:
    /pxlkit:imagine an operations dashboard for a data platform: pipeline health across regions, throughput and latency charts, a runs table with statuses, a command palette, and an inspect drawer. Dense, dark, cyan and green.

## /pxlkit:pixelate — Convert what exists

Swaps the presentation layer for pxlkit and leaves your logic alone.

  What it does:
    - Records your test results as a baseline before touching anything
    - Maps every source element to its pxlkit equivalent and shows you the table
    - Converts incrementally, preserving routes, state, handlers and aria attributes
    - Maps your brand palette to tones, or re-skins the tokens to keep your colours
    - Verifies your behavioural tests still pass

  Arguments:
    [path]  —  A file, a directory, or the app root.
    --scope page|component|app  —  How much to take on at once.

  Example:
    /pxlkit:pixelate src/app/dashboard --scope page

## /pxlkit:icon — Draw an icon

Authors a 16×16 PxlKitData icon that passes both validators before it is written.

  What it does:
    - Searches the 226 shipped icons by tag so you do not redraw one that exists
    - Designs the grid, showing it as ASCII while it iterates
    - Renders it to SVG and looks at it, because character grids lie
    - Validates against a strict superset of both pxlkit validators
    - Writes it, and in the monorepo registers it in the pack

  Arguments:
    [name] [description]  —  Kebab-case name and what it depicts.
    --pack <pack>  —  ui · feedback · social · weather · gamification · effects · parallax
    --animated  —  Multi-frame icon with a trigger.

  Example:
    /pxlkit:icon habit-streak "a flame with a small counter badge"

## /pxlkit:audit — Check the result

Runs the gates the other skills validate against, and can apply the fixes.

  What it does:
    - Types, build and runtime — the checks that must pass
    - Component diversity and token purity, measured by script
    - Screenshots at three widths in light and dark, scored against a visual checklist
    - axe-core per route
    - A report of rule, file, line and fix

  Arguments:
    [path]  —  What to audit.
    --fix  —  Apply the mechanical corrections, after showing the diff.
    --visual  —  Include the screenshot pass.

  Example:
    /pxlkit:audit src/app --fix --visual

## Out of scope

These are explicitly not covered. Do not assume support for them.

  - The voxel engine and anything 3D
  - The web icon builder
  - Storybook generation
  - Frameworks without React (Vue, Svelte, Astro without React)

## Notes for agents

  - The skills read the @pxlkit/ui-kit version installed in the target project and
    prefer its types over their own bundled digest when the two differ.
  - Component prop signatures are not in the digest. Read them from
    node_modules/@pxlkit/ui-kit/dist/index.d.ts.
  - Every quality check is a command with an exit code. A check that cannot run is
    reported as SKIP, never as a pass.
  - /pxlkit:pixelate operates on local code only. It will not fetch a URL to convert.
  - The kit's styles.css is not self-contained: it needs a Tailwind v4 build.