html-brainstorm-grid
byf-labs-io· 19 skills
TRIGGER: about to populate `AskUserQuestion` options with `preview:` content for any visual / UX / layout / screen / component / mockup comparison. STOP and ask first: *"Quick inline chip comparison, or a full HTML grid you can open in the browser?"* Chips flatten color, type, density, motion, and interaction into monospace; HTML grids preserve all of it. No carve-out for "simulate", "demo", "mock up", "quick decision", "just for now" — those name the surface, not an exception. When user picks HTML, this skill generates side-by-side grids of N distinctly-different approaches — for the GENERATIVE phase, when candidates are NOT yet named. Use when the user signals exploration: "brainstorm", "explore options", "show me variations", "different approaches", "I'm not sure how to…", "try a few directions". GENERATE candidates, don't score known ones. If specific candidates ARE named ("compare X, Y, Z" / "should we use A or B"), hand off to html-comparison-matrix.
How to install html-brainstorm-grid?
f-labs-io/agent-html-skills/html-brainstorm-grid
$npx -y skills add f-labs-io/agent-html-skills --skill html-brainstorm-gridInstalls into the current project.
›Prefer a prompt? Paste this to your agent
Run `npx skills use "https://github.com/f-labs-io/agent-html-skills" --skill "f-labs-io/agent-html-skills/html-brainstorm-grid"` and follow the generated skill instructions now. Read its complete output, redirecting it to a temporary file first if necessary. Resolve relative paths from the supporting-files directory it provides.
Use the skills in "https://github.com/f-labs-io/agent-html-skills" that are relevant to the current task. Run `npx skills add "https://github.com/f-labs-io/agent-html-skills"` and select the relevant skills, then follow their instructions.
Related
6 picksType
- improve-codebase-architectureScan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.Jul 2026
- domain-modelingBuild and sharpen a project's domain model. Use when the user wants to pin down domain terminology or a ubiquitous language, record an architectural decision,…Jul 2026
- caveman-reviewUltra-compressed code review comments. Cuts noise from PR feedback while preserving the actionable signal. Each comment is one line: location, problem, fix.Jul 2026
- codebase-designShared vocabulary for designing deep modules. Use when the user wants to design or improve a module's interface, find deepening opportunities, decide where a…Jul 2026
- code-reviewReview the changes since a fixed point (commit, branch, tag, or merge-base) along two axes — Standards (does the code follow this repo's documented coding…Jul 2026
- resolving-merge-conflictsUse when you need to resolve an in-progress git merge/rebase conflict.Jul 2026
