Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →hashgraph-online/web-design
Use for web interfaces, landing pages, product sites, dashboards, React, Next.js, Astro, Tailwind, frontend audits, responsive design, browser interaction, web motion, or requests for a distinctive non-generic website. Select the web surface and implementation track, load a small reference bundle, preserve usability and accessibility, and validate the rendered result. Skip when the target is exclusively native Apple, Android, or Windows.
Passed 22 of 23 test cases with the skill, and 8 of 23 without it.
and 23 more in the full report
14 fixed8 passed either way1 still failing0 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 14 test cases the skill fixed. Same model, same prompt, with and without the skill.
We are establishing the aesthetic direction for a high-craft literary digital journal. The designer wants to combine brutalist neon badges, active bento grids, dark glow gradients, and mono tech labels all on one page. Which direction file path under references should be loaded for an editorial direction, and how many directions should be selected?
| Checked | Without skill | With skill |
|---|---|---|
| Loads ../../references/web-direction-editorial.md as the visual direction reference. | Missed | Passed |
| Restricts the visual choice to exactly one aesthetic direction family. | Passed | Passed |
The instructions your model reads when the skill loads.
Design the product surface before choosing decoration or libraries.
Load two core references for the selected mode and no more than two conditional references. Use ../../references/ui-patterns/README.md and ../../references/web-patterns/README.md only as catalogs. Do not read every linked document.
Choose one:
Do not apply campaign spacing and choreography to repeated-use applications.
| Surface | Core references | Conditional additions |
|---|---|---|
| Product app | task-ergonomics.md, interaction-state-matrix.md | navigation, component API, direct manipulation, responsive gate |
| Dashboard | dashboard-insight-hierarchy.md, data-visualization-library-selection.md | realistic data, adaptive composition, performance |
| Product landing | creative-direction.md, page-proof-architecture.md | conversion proof, brand motif, asset realism |
| Cinematic page | animation-creation.md, choreography-state-machine.md | cinematic landing, motion libraries, performance |
| Docs/API | navigation-information-architecture.md, progressive-disclosure-information-scent.md | typography, search/command interaction |
| Checkout/trust | form-state-validation-system.md, accessibility-interaction-contract.md | conversion proof, usability scenarios |
| Design system | design-system-production-loop.md, token-implementation-contract.md | component API, state gallery |
| Audit/repair | ui-audit-rubric.md, visual-repair-playbook.md | usability, accessibility, fingerprint diversity |
Paths in this table are under ../../references/ui-patterns/ except task-ergonomics.md, which is under ../../references/ux-patterns/.
test cases passed, vs 8 / 23 without
Published skills whose descriptions closely match this one, with their headline benchmark lift.
More skills from the same source and nearby in the registry, with their headline benchmark lift.