a11y-pass
Catch the accessibility failures that ship in almost every AI-built UI. Use after building any interactive component.
Expand a 1-4 sentence product brief into a full spec with a design language, acceptance surface, and an ordered feature list.
$ npx -y skills add Archive228/loopkit --skill planner-spec-expand --agent claude-codeHow it fires
How this skill gets triggered: by you, by Claude, or both.
/planner-spec-expandContext preview
The summary Claude sees to decide when to auto-load this skill.
Expand a 1-4 sentence product brief into a full spec with a design language, acceptance surface, and an ordered feature list.
name: planner-spec-expand description: Expand a 1-4 sentence product brief into a full spec with a design language, acceptance surface, and an ordered feature list. when_to_use: Bootstrapping a project from a one-liner prompt before any generator agent runs, re-planning after scope creep changes the target, producing the input document that feature-list-json will be seeded from
A one-line brief ("build a claude.ai clone", "a habit tracker with streaks") is not enough surface for a coding agent to make good decisions from. It has no design language, no acceptance criteria, no ordering. The generator ends up inventing scope mid-session and shipping incoherent slices.
The planner's job is to expand the brief into a spec dense enough that every downstream decision — what feature to pick, what "done" looks like, what the button should say — has an answer already written down. See Prithvi's post on planner/generator/evaluator separation for the underlying architecture: https://www.prithvirajrk.com/blog/three-agent-harness.
Do the sections in order. Later sections depend on earlier ones being locked.
1. **Restate the brief in one paragraph.** In your own words, what is being built and for whom. If you can't write this cleanly, ask the user before continuing — the brief is under-specified. 2. **Pick a design language.** One sentence each on: visual tone (minimal / dense / playful), typography stance (one sans / serif+sans / mono accents), color posture (monochrome + one accent / two-color / full palette), density (airy / compact). This locks a thousand later micro-decisions. 3. **Enumerate the acceptance surface.** For each user-observable capability, write one sentence of user-observable behavior AND the concrete steps a human would take to verify it. This is the shape [[feature-list-json]] wants — write it in that shape now. 4. **Order the features.** Sort by dependency: nothing appears before what it depends on. Ties broken by "what does the user see first when they open the app." The top of the list must be runnable-alone. 5. **Name the out-of-scope.** One short list of things the brief could imply but you are explicitly not building. Prevents the generator from wandering. 6. **Write the smoke path.** The single user journey that proves the product exists — 3-6 steps end-to-end. This becomes the initializer's smoke test.
Skip this for briefs already specified to acceptance-criteria depth, or for single-feature edits to an existing project — use [[shift-notes]] and pick from the existing [[feature-list-json]] instead.
Related: [[feature-list-json]], [[shift-notes]], [[broken-window-check]].
33 battle-tested skills + minimal .claude harness for any coding agent (Claude Code, Cursor, Codex, Gemini CLI).
Catch the accessibility failures that ship in almost every AI-built UI. Use after building any interactive component.
Before compaction Loopkit extracts decisions into claude-decisions.json (machine-readable). Read it alongside claude-progress.txt…
Review a diff against the goal spec assuming the code is BROKEN. The reviewer
Verify that an endpoint checks ownership, not just authentication. Use on any handler that reads or mutates user data.
Find the exact commit that introduced a bug. Use when something worked before and broke, and you don't know which change did it.
Before picking new work, smoke-test the last "completed" feature. If it's broken, revert and re-open it before touching anything…