whiteboard

Design-first UX/UI skills for coding agents. Whiteboard helps you agree on goals, flows, states, copy, and visual direction before AI generates UI.

Install

npx whiteboard-skills

Select all skills when prompted. Slash commands are user-invoked; the five discipline skills can also fire automatically when relevant work is detected. Use /whiteboard-me for a complete design kickoff.

Which skill do I use?

Starting something new

| Skill | Use it for | |---|---| | /whiteboard-me | Full kickoff: flow, UI direction, and a principles-cited brief. | | /whiteboard-flow | Screens, steps, states, errors, and recovery only. | | /whiteboard-ui | Hierarchy, spacing, type, color, tokens, and motion only. | | ux-flow | Automatic flow engine for goals, steps, states, and journeys. | | ui-craft | Automatic visual engine for UI direction and systems. |

Something exists and feels wrong

| Skill | Use it for | |---|---| | design-review | Auditing flow, states, hierarchy, accessibility, and AI UX. | | copy-craft | Rewriting labels, errors, empty/loading/success states, and confirmations. | | token-drift | Finding raw colors, off-scale spacing, rogue type, and state drift. |

Utilities

| Skill | Use it for | |---|---| | /ask-whiteboard | Routing to one appropriate skill. | | /setup-whiteboard | Optional first setup: docs home, platforms, WCAG target, and token source. | | /update-canon | Refreshing maintained UX/UI references from vetted sources. |

Best default: /whiteboard-me

Describe what you want to build. The session then:

1. Interrogates the goal, persona, flow, states, errors, and recovery.
2. Locks visual direction, tokens, accessibility, and motion.
3. Writes a brief with decisions, citations, open questions, and a screen/state inventory.

Answer one question at a time. Relevant recommendations explain their principle. Nothing is generated until the relevant decisions are confirmed.

Laws of UX coverage

All 30 Laws of UX are routed through the principle application matrix. Skills cite a principle only when its behavior is in scope, then record the resulting decision or evidence. They do not force irrelevant citations into every session.

What a full /whiteboard-me session gives you

• A flow map and screen/state inventory.
• A locked UI system in light and dark modes.
• Principles-cited decisions and open questions.
• WCAG 2.2 AA, performance, and motion checks.
• A reusable brief at docs/design/<feature>-brief.md by default, or in the configured Docs home.

Update installed skills

npx skills update

Develop this repository

pnpm install --frozen-lockfile
pnpm validate
pnpm test
pnpm package:check

License

MIT