interaction-design-board

An agent skill by daymade, from daymade/claude-code-skills. Tags: design, evaluation, prototyping, ui-ux, web.

What it does

Generate several genuinely different, runnable HTML interaction prototypes for one product surface, combine them in an interactive Design Board, collect structured selection/remix feedback, and only then hand the approved behavior to production implementation. Use when a user asks for multiple clickable UI versions, interaction alternatives, progressive-disclosure options, a Design Board, HTML prototypes, test-time scaling for product design, or says the visual styling is acceptable but the hierarchy, workflow, layout, or interaction still feels unprofessional. Prefer this over static image exploration when the decision depends on what happens after clicking, expanding, selecting, filtering, or moving through states.

Install

With the skills CLI, which installs into Claude Code, Codex, Cursor and other agents:

npx skills add daymade/claude-code-skills --skill interaction-design-board

Or copy the skill folder into Claude Code's skills directory by hand (~/.claude/skills for every project, or .claude/skills inside one):

git clone --depth 1 https://github.com/daymade/claude-code-skills
cp -r claude-code-skills/daymade-codex/interaction-design-board ~/.claude/skills/interaction-design-board

Safety box score

Grade B, low risk: 21 of 100 risk points, rated 2026-10-19. The grade rates what the skill and its scripts can reach on the machine of whoever installs it, across eight categories from shell execution to secrets access. How the score works.

This skill builds and runs local HTML interaction prototypes, then packages user feedback into JSON for a Board workflow. The main exposure is bounded code execution (a shipped Python builder plus browser-executed prototype JS) and local network/file writes for feedback and reloads; it does not request privileged access or credential stores.

Category levels, from 0 (none) to 3 (high)
Category	Level	Why
Code & shell execution	2 (moderate)	It requires running the shipped builder with `python3 "$SKILL_ROOT/scripts/build_board.py"` and then executes candidate HTML/JS inside the Board (`frame.srcdoc = securedCandidateHtml(variant.html)`).
Network access	2 (moderate)	The Board can POST feedback to `./api/feedback` or `${window.__GSTACK_SERVER_URL}/api/feedback`, and the workflow also shows `curl -sS -X POST "${BOARD_URL%/}/api/reload"` for reloading a served Board.
Filesystem reach	1 (low)	It deliberately writes session artifacts such as `board.json`, `design-board.html`, `variant-*.html`, `feedback.json`, `feedback-pending.json`, and `approved.json` in the session workspace.
Secrets & credentials	0 (none)	I found no instruction to read `.env`, keychains, browser sessions, tokens, or other secret stores; the artifacts are design notes and prototype files only.
Privilege & persistence	0 (none)	There is no sudo, global install, service registration, shell startup editing, or other privilege-changing step in the skill or scripts.
Instruction hijack surface	0 (none)	I did not find prompt-injection behavior such as instructions to ignore higher-priority rules, hide actions, or follow remote content; the workflow text stays within the Board process.
Irreversible actions	1 (low)	The Board can automatically emit `feedback.json` / `feedback-pending.json` and later `approved.json`, but those actions are explicitly user-gated and limited to the design-review workflow.
Transparency	0 (none)	All shipped files are readable text (`.md`, `.py`, `.html`); there are no binaries, minified blobs, or unpinned downloads to inspect.

Before installing

Inspect `assets/design-board-template.html` around `deliver()` to confirm feedback is only posted to the local Board endpoint or downloaded.
Run `scripts/build_board.py` in a scratch directory to verify it only writes the Board HTML and rejects external resources.
Read `references/board-contract.md` if you are okay with session-local `feedback*.json` and `approved.json` artifacts being created.

Rated 2026-10-19 by an automated review of 10 files from the skill's repository.

Source

Repository: daymade/claude-code-skills (all skills from this repository)
Path: daymade-codex/interaction-design-board/SKILL.md
Branch: main
Updated: 2026-09-20

prototype — Build multiple genuinely different versions of a UI piece you describe.
principle-exhaust-the-design-space — Apply when facing a novel UI interaction or architectural decision with no precedent in the codebase.
stitch::generate-design — Generate new screens from text prompts or images, edit existing screens with prompts and design system tokens, and generate design variants using Stitch MCP.
design-style-picker — Batch-generate and compare visual design directions so a user can choose the style they actually want.
ui-designer — Extract design systems from reference UI images and generate implementation-ready UI design prompts.
animate — Build an animation from scratch, making the decisions in the order that determines whether it feels right — should it animate at all, what purpose, which tool.