Traction scoreGitHub stars can be faked, so popularity alone can be misleading. Traction Score looks for broader signs of recent attention, adoption, and active maintenance.
This skill provides creative direction for developing visual HTML deliverables, including reports, landing pages, and small tools. It focuses on the intentional selection of color palettes, typography pairings, and layouts to ensure a professional register.
Product designers can use these principles to refine the theming and structure of interactive prototypes, moving beyond standard templates toward polished, high-fidelity mockups.
WHO IT'S FOR
Product Designers
creating interactive prototypes and high-fidelity mockups
Compatible AgentsThe repository documents support for these agents. The skills may also work with other agents that can load SKILL.md files, but they may need some setup or small changes.
Replace [PATH_TO_PRODUCT_BRIEF] with the path to a product brief describing the user, task, required information and actions, and known constraints.
Use html-wireframe with the product brief at [PATH_TO_PRODUCT_BRIEF]. Create one self-contained HTML wireframe for a single screen or bounded flow. If its structure is still unsettled, include two meaningfully different layout directions with real labels and representative content, explain each direction's tradeoff, and keep the result intentionally low fidelity. Verify desktop and mobile layout, focus visibility, overflow, and any implemented click path; then return the absolute file path and identify the visual decisions left open.
Replace [PATH_TO_SCENARIO_BRIEF] with the path to a brief defining the user, critical job, bounded scenario, relevant states, and product boundary.
Provide existing design-system references or screenshots when available.
Use html-prototype with the scenario brief at [PATH_TO_SCENARIO_BRIEF]. In prototype mode, build the smallest credible, responsive flow that answers one behavioral question. Use realistic content, make the modeled navigation and forms work, include only relevant reachable states such as loading, error, success, disabled, or empty, and mark where the real product would take over. Deliver one self-contained HTML file, test the modeled controls and keyboard flow at desktop and mobile widths, and return the absolute path with the implemented states and omitted production behavior.
Replace [PATH_TO_SOURCE_MATERIAL] with the path to the architecture notes, process description, state model, hierarchy, timeline data, or other relationship-focused source.
State the reader and the question the diagram should answer.
Use html-diagram with the source material at [PATH_TO_SOURCE_MATERIAL]. Identify one question readers should be able to answer, choose the simplest fitting diagram form—such as topology, sequence, process, state, hierarchy, timeline, matrix, or quantitative view—and build one self-contained HTML file. Keep labels and relationships legible, add interaction only if it helps answer the question, verify wide and narrow layouts plus keyboard behavior, and return the absolute path, chosen form, and main assumptions or simplifications.
Claude
Codex