Add HTML wireframe and prototype skills

[backnotprop]

Summary

• add html-wireframe for intentionally low-fidelity layouts, flows, responsive structure, and two or three distinct directions
• add html-prototype for styled mockups and working prototypes with realistic states, keyboard support, accessibility checks, and reduced motion
• keep html as the broad entry point and route focused work to html-wireframe, html-prototype, html-plan, or html-diagram
• keep html-plan and html-diagram independently usable
• replace copied guidance with concise skill boundaries and shared principles
• add one complete demonstration that moves the same product brief from wireframe to mockup to prototype
• update installation, invocation, repository positioning, plugin metadata, description, and topics

Skill boundaries

html-wireframe decides hierarchy, content, navigation, flow, and responsive structure before visual polish.

html-prototype covers two fidelity modes:

• Mockup: polished and responsive, but intentionally noninteractive
• Prototype: polished, responsive, and interactive enough to test behavior

The skills set quality constraints without prescribing a house style. User direction, project context, audience, and product purpose lead the visual decisions.

Shared demonstration

The example uses one credible brief: a release-readiness workspace for Atlas Mobile 4.8. It preserves the HTML for every stage and documents which decisions belong at each fidelity.

1. Wireframe

Three structural directions are available in the artifact: decision first, evidence ledger, and guided gate.

2. Mockup

The selected direction receives a visual system while behavior stays out of scope.

3. Prototype

The final stage adds rerun and review flows, validation, loading and failure recovery, release gating, dialogs, keyboard behavior, and mobile states.

Validation

• all five skills pass strict portable validation for Vercel, Claude, and Codex targets
• Claude Code native plugin validation passes
• clean listing and installation find all five skills
• clean invocations tested html routing plus every specialist without reading the checked-in examples
• desktop and mobile rendering tested at 1440×1000 and 390×844
• all three wireframe directions render without overflow or console errors
• the prototype regression covers loading, validation, save failure and retry, pass and fail reruns, disabled gating, empty notes, dialogs, focus containment and restoration, keyboard tab navigation, and reduced motion
• automated checks found no duplicate IDs, missing ARIA references, unnamed buttons, external runtime dependencies, or axe WCAG A/AA violations
• the mockup skill now requires computed foreground and background contrast checks after a clean test caught inherited dark-on-dark text
• installation instructions and JSON manifests were checked

Full evidence is recorded in examples/release-readiness/validation.md.

Review gate

Do not merge this PR until the owner has reviewed the three wireframe directions, styled mockup, and interactive prototype.

The implementation is complete, but the examples remain a product and design decision for owner approval.