# Interaction Design Board

Generates several distinct, clickable HTML interaction prototypes for one product...

- Repository: https://github.com/daymade/claude-code-skills (1509 stars)
- Category: Design
- License: MIT
- Last updated: 2026-11-01
- Runs scripts: yes, review before use

## Install

Claude Code: `npx skills add daymade/claude-code-skills --skill interaction-design-board -g -a claude-code -y`
Codex: `npx skills add daymade/claude-code-skills --skill interaction-design-board -g -a codex -y`
Cursor: `npx skills add daymade/claude-code-skills --skill interaction-design-board -g -a cursor -y`
Gemini CLI: `npx skills add daymade/claude-code-skills --skill interaction-design-board -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add daymade/claude-code-skills`

## Description

Generates several distinct, clickable HTML interaction prototypes for one product surface into a Design Board and collects selection/remix feedback before implementation. Use for multiple UI versions, interaction alternatives, progressive-disclosure options, or when styling is fine but hierarchy/workflow/interaction feels off. Not for static visual-style calibration (use design-style-picker) or a settled CSS tweak.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Interaction Design Board

Turn interaction uncertainty into inspectable evidence. Keep the product's real
facts and design language fixed; vary the interaction architecture enough that the
user can experience the trade-offs before production code changes.

## Route The Request

- Use this skill when the choice depends on behavior, state, workflow, hierarchy,
  or progressive disclosure.
- Use `design-style-picker` for static visual-style calibration and image matrices.
- Use gstack's `design-consultation` for a new product-wide design system and
  gstack's `design-shotgun` for static generated mockups.
- Return to this skill after a visual direction is chosen if the user still needs
  to compare clickable interaction structures.
- Do not use it for a settled one-line CSS adjustment or when the user already
  supplied an approved interaction specification and asked only for implementation.

## Non-Negotiable Outcome

Produce a decision, not a gallery:

1. Several runnable HTML candidates keep the same business facts, product scope,
   design tokens, and available actions.
2. Each candidate embodies a distinct interaction hypothesis rather than a skin.
3. The Design Board lets the user operate every candidate, record concrete
   feedback, select one, or request a named remix.
4. Production implementation does not start until the user approves the behavior.

Static screenshots are supporting evidence only. A screenshot cannot prove a
collapse state, keyboard path, selection model, or task handoff.

## Workflow

### 1. Freeze The Decision Contract

Before generating variants, write a compact contract in the session workspace:

The rest: https://github.com/daymade/claude-code-skills/blob/HEAD/daymade-codex/interaction-design-board/SKILL.md