Agent skill · daymade
interaction-design-board
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.
What it needs
About 6k tokens when loaded.
What this skill does
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: User job: the real task the operator is trying to complete. Decision scope: the one page, component, or bounded journey being compared. Immutable facts: real objects, labels, statuses, permissions, actions, and data semantics that every variant must preserve. Existing language: current tokens, components, navigation, density, and brand assets that must remain recognizable. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills daymade/interaction-design-board