Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →nexu-io/web-prototype
General-purpose desktop web prototype. Single self-contained HTML file built by copying the seed `assets/template.html` and pasting section layouts from `references/layouts.md`. Default for any landing / marketing / docs / SaaS page when no more specific skill matches.
Passed 3 of 23 test cases with the skill, and 3 of 23 without it.
and 3 more in the full report
3 fixed0 passed either way17 still failing3 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 3 test cases the skill fixed. Same model, same prompt, with and without the skill.
We need a prototype for FleetLog, a logistics software product. First output a draft HTML file code block, and then follow it with the final `<artifact identifier="fleetlog-landing" type="text/html" title="FleetLog">` block. Precede the output with one summary sentence.
| Checked | Without skill | With skill |
|---|---|---|
| The response emits only a single canonical artifact block without writing a preliminary draft HTML code block. | Passed | Passed |
| All section elements feature data-od-id attributes. | Missed | Passed |
The instructions your model reads when the skill loads.
Produce a single, self-contained HTML prototype using the bundled seed and layout library — not by writing CSS from scratch. The seed already encodes good defaults (typography, spacing, accent budget). Your job is to compose it.
web-prototype/
├── SKILL.md ← you're reading this
├── assets/
│ └── template.html ← seed: tokens + class system + chrome (READ FIRST)
└── references/
├── layouts.md ← 8 paste-ready section skeletons
└── checklist.md ← P0/P1/P2 self-review
assets/template.html end-to-end — at minimum through the <style> block. The class inventory at the top of references/layouts.md lists every class that must be defined there; if one is missing, add it to <style> rather than re-defining it inline on every section.references/layouts.md so you know which section skeletons exist. Don't write a section type that isn't covered — pick the closest layout and adapt.:root variables in the seed; don't introduce new tokens.Choose one kebab-case artifact slug before composing the page. Use assets/template.html as the seed for the final artifact HTML.
Do not write a project-root HTML draft with file-write before emitting the final <artifact>. The live-artifact output is the canonical HTML file for this generation turn; an extra index.html, cast.html, or brief-derived draft can be stranded beside it as an orphan.
Replace the six :root variables with the active design system's tokens. Replace the page <title> and the topnav brand.
Pick layouts before writing copy. Default rhythms (from layouts.md):
| Page kind | Default rhythm |
|---|---|
| Landing | 1 hero → 3 features → 4 stats or 5 quote → custom split → 6 cta |
| Marketing / editorial | 1 hero-center → 7 log list → 6 cta |
test cases passed, vs 3 / 23 without
More skills from the same source and nearby in the registry, with their headline benchmark lift.