CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

interaction-design-board

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.

Quality

92%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide
SecuritybySnyk

Passed

No findings from the security scan

SKILL.md
Quality
Evals
Security

Quality

Content

92%Weight 40%Scale 1-5

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

An exemplary skill body: a tightly sequenced six-step workflow with real validation checkpoints and feedback loops, copy-paste-ready commands with expected outputs, and a clean overview-plus-references split where every referenced bundle file exists and nothing nests further. The only nit is a handful of rhetorical flourishes in the approval/inventory section that could be tightened for token efficiency.

DimensionReasoningScore

Conciseness

The body is dense and imperative throughout — no time is spent explaining concepts Claude already knows (no "what HTML is", no library tutorials), and every section carries operational instructions. Not a 5 because a few rhetorical justifications could be trimmed, e.g., "the removals are the load-bearing rows — a behavior nobody can account for is a regression that was never filed, and the author is the last person able to notice it" and "Expect the count of intentional removals to be wrong on the first pass"; the point survives in half the tokens. Comfortably above the 3 anchor, which requires unnecessary explanation.

4 / 5

Actionability

Fully executable guidance: copy-paste-ready bash for building the board (with SKILL_ROOT resolution and placeholders clearly marked), serving it with BOARD_URL extraction guarded by `test -n "$BOARD_URL"`, and the reload API curl with its expected `{"reloaded":true}` response; artifact formats (decision contract fields, board.json via references/board-contract.md, approved.json contents) are enumerated field-by-field, and fallbacks are specified when a command path fails. This matches the 5 anchor (copy-paste ready commands covering the common cases) rather than 4, which allows minor gaps.

5 / 5

Workflow Clarity

Six clearly sequenced steps with explicit validation checkpoints and feedback loops: the builder's rejection conditions ("byte-identical candidates, path traversal, missing declared states") with the instruction to fix the candidate rather than weaken the boundary, expected `BOARD_BUILT variants=...` output, the BOARD_URL guard, the reload-vs-reserve distinction with expected response, an explicit stop condition ("Stop adding rounds when feedback no longer changes the decision"), an approval gate ("Then—and only then—implement"), and a disposition-recheck loop for the behavior inventory. Matches the 5 anchor (explicit validation, error-recovery loops, checklists).

5 / 5

Progressive Disclosure

The SKILL.md body is an appropriate overview that offloads detail to one-level-deep, clearly signaled resources: "Read `references/interaction-design-method.md` before proposing the candidate architectures" and "Create `board.json` using `references/board-contract.md`", plus the `scripts/build_board.py` invocation. All referenced paths exist in the bundle, the reference files contain no further nested references, and the `assets/design-board-template.html` file is consumed by the script rather than orphaned. Clean match for the 5 anchor.

5 / 5

Total

19

/

20

Passed

Description

87%Weight 40%Scale 1-5

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

A strong description: third-person, specific, with an explicit "Use for..." trigger clause and explicit negative boundaries that route away adjacent skills. The only improvement space is broader trigger synonym coverage (prototype/mockup/flow wording) and a fuller enumeration of the skill's post-selection capabilities.

DimensionReasoningScore

Specificity

Concrete actions are named in third person — "Generates several distinct, clickable HTML interaction prototypes for one product surface into a Design Board and collects selection/remix feedback before implementation" — which lists several specific capabilities (generate prototypes, board them, collect feedback, gate implementation). Not a 5 because the action list stops at the entry-point actions and does not cover the full capability set (e.g., iterating on remix feedback, approval capture).

4 / 5

Completeness

Explicitly answers both questions: what ("Generates several distinct, clickable HTML interaction prototypes... and collects selection/remix feedback before implementation") and when ("Use for multiple UI versions, interaction alternatives, progressive-disclosure options, or when styling is fine but hierarchy/workflow/interaction feels off"), with concrete trigger phrases and additional negative boundaries ("Not for static visual-style calibration... or a settled CSS tweak"). Clearly matches the top anchor rather than the 4 anchor, whose 'when' is less explicit.

5 / 5

Trigger Term Quality

Natural user phrasings are present: "multiple UI versions", "interaction alternatives", "progressive-disclosure options", "when styling is fine but hierarchy/workflow/interaction feels off" — language a user would plausibly say. Not a 5 because common synonyms such as "prototype", "mockup", "wireframe", "flow", or "UX" are absent; not a 3 because the included terms are varied and clearly map to the trigger scenario rather than one generic keyword.

4 / 5

Distinctiveness Conflict Risk

The description carves a clear niche (runnable interaction prototypes for one product surface) and actively disambiguates from neighbors: "Not for static visual-style calibration (use design-style-picker) or a settled CSS tweak". Triggers are interaction-specific terms, minimizing conflict with visual-styling or implementation skills — a clean match for the 5 anchor.

5 / 5

Total

18

/

20

Passed

Validation

100%

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation — 16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository

daymade/claude-code-skills

Path

daymade-codex/interaction-design-board/SKILL.md

Reviewed

Table of Contents

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.