Loading
Direct-invocation specialist for polished, responsive, self-contained HTML mockups and interactive prototypes grounded in the user's conversation, product context, and design language. Use when the us
The skill file stays in the publisher's repository.
Paste the copied command in a terminal. It installs this SKILL.md into that agent.
npx skills add plannotator/effective-html --skill html-prototype -a cursor -y
Direct-invocation specialist for polished, responsive, self-contained HTML mockups and interactive prototypes grounded in the user's conversation, product context, and design language. Use when the user explicitly invokes html-prototype or the broad html skill routes a mockup or prototype request here. Do not activate independently from a general request. Treat a mockup as a noninteractive fidelity mode within this skill, not as a separate skill.
Direct-invocation specialist for polished, responsive, self-contained HTML mockups and interactive prototypes grounded in the user's conversation, product context, and design language. Use when the user explicitly invokes html-prototype or the broad html skill routes a mockup or prototype request here. Do not activate independently from a general request. Treat a mockup as a noninteractive fidelity mode within this skill, not as a separate skill.
Build a credible model of a product decision. Match the artifact to the user's context instead of applying a recurring house style. The goal is not to make every possible screen. The goal is to make the important visual or behavioral question testable.
Use one of two modes:
Do not create a separate html-mockup skill. Do not add behavior merely to make a mockup seem more complete. If a user asks for both modes, preserve the same content and structure so changes in fidelity remain easy to compare.
Inspect the conversation, supplied references, and project before designing. Look for design-system documentation, tokens, existing components, product screenshots, and nearby artifacts.
Authority runs in this order:
Before coding, settle:
When no design system exists, create a specific direction from the subject and use case. Do not default to a gradient, a dark dashboard, interchangeable cards, or decorative metrics. A prototype for a field tool, an editorial workflow, and a financial approval should not feel like the same product.
When design-artifact is available and the visual
direction remains open, read and compose it with this skill. Use it to choose
the register, palette, type, and composition; keep this skill authoritative for
fidelity, state, and interaction completeness.
Choose the smallest flow that can answer the review question. Use realistic, internally consistent names, dates, statuses, quantities, and copy.
List the states before building. Include the states that the chosen scenario can actually reach:
An asynchronous-looking prototype action should normally show loading, success, and failure or recovery. A collection should normally consider empty state. A gated action should show why it is disabled. Do not force irrelevant states into the main flow just to satisfy a checklist. Make omitted states explicit in the handoff.
Escape, and restore focus to the trigger.prefers-reduced-motion while preserving state feedback.In mockup mode, preserve semantic structure and visible focus styles even if the controls are not wired. Make the static review boundary clear.
.html file with essential CSS and JavaScript inline.Test the artifact at wide desktop and narrow mobile widths. Exercise every modeled state and control. Test Tab, Shift+Tab, Enter, Space, arrow keys where appropriate, and Escape for dialogs. Check the console, page overflow, long content, disabled behavior, focus restoration, and reduced-motion mode.
Inspect computed foreground and background colors on every distinct surface, especially text that may inherit the body color inside a dark or tinted region. If browser tooling is unavailable, say which visual and interaction checks remain unverified instead of treating source inspection as a substitute.
Return the absolute file path, the fidelity mode, the scenario modeled, the states implemented, and the production behavior deliberately left out.
Read Plannotator's HTML wireframes and prototypes for coding agents for guidance on moving from an approved structure to a mockup or working prototype.