# Web Design

> Design a web app or site in its own framework — direction anchors, design tokens, a component gallery, then full screens rendered headlessly at three viewports in light and dark for screenshot iteration. Use when designing a new web UI, landing page, dashboard or console, exploring visual directions for the web, asked for "web mockups", redesigning a React/Next/Vue/HTML surface, or starting a web…

- **Type:** Skill
- **Install:** `agentstack add skill-dndungu-agent-skills-web-design`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [dndungu](https://agentstack.voostack.com/s/dndungu)
- **Installs:** 0
- **Category:** [Data & Analytics](https://agentstack.voostack.com/c/data-and-analytics)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [dndungu](https://github.com/dndungu)
- **Source:** https://github.com/dndungu/agent-skills/tree/main/web-design

## Install

```sh
agentstack add skill-dndungu-agent-skills-web-design
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# web-design — mockups in the framework you ship

Same workflow as /ios-design, different medium: direction -> tokens ->
component gallery -> screens, iterated on real rendered screenshots. Mockups
are authored in the TARGET framework (React/Next + Tailwind, Vue, Svelte, or
plain HTML) so the mockup language IS the implementation language — the
same-language rule from /design-fidelity-loop.

Why not just use Claude Design: it renders HTML `.dc.html` artifacts inside
its own runtime. That is excellent for standalone deliverables and decks, and
this skill borrows its verify loop wholesale — but a `.dc.html` is not your
Next.js app, so shipping it still costs a translation. Route to Claude Design
(via DesignSync) when the deliverable IS a standalone page or deck; use this
skill when the deliverable becomes product code.

Read `WEB.md` before Phase 1 — the web delta to the two canons.
Read `RENDERER.md` before the first render — capture harness and gotchas.
Read `~/.claude/skills/ios-design/VERIFY.md` before showing any render — the
fresh-eyes loop is medium-agnostic and applies unchanged.

## The rubric (three files, one hierarchy)

1. `ios-design/TASTE.md` — beauty laws (15), medium-agnostic.
2. `ux-design/CANON.md` — experience laws (18), medium-agnostic.
3. `WEB.md` — the delta: what changes, what is web-only, the click budget.

On craft disagreements the Vercel `web-interface-guidelines` skill wins; on
aesthetics TASTE.md wins. Record any deliberate law break in DESIGN.md.

## Phase 0 — Read first

1. Resolve the repo. Detect the stack before proposing anything: framework
   (Next/React, Vue, Svelte, plain), styling (Tailwind config, CSS vars,
   CSS-in-JS), component library (shadcn/ui, Radix, headless), and whether
   Playwright already exists (most repos with e2e tests have it — reuse it).
2. Inventory existing design assets: `tailwind.config.*`, `globals.css` /
   theme CSS vars, `docs/design/`, a component directory, brand assets.
   An existing token system is EXTENDED, never replaced.
3. Inventory experience artifacts: `EXPERIENCE.md` / `journeys.yaml` from
   /ux-design, or a journeys doc. If they exist, screens come FROM flows —
   every screen names its flow node. If the user wants flows first, route to
   /ux-design before Phase 1.
4. If the `web-interface-guidelines` skill is installed, say so — it is the
   craft authority for Phase 5 handoff.

## Phase 1 — Direction (read WEB.md now)

5. Interview ( fresh-eyes subagent verdict against the user's asks
    verbatim + WEB.md laws -> act. Only a `VERDICT: done` set reaches the
    user.

## Phase 5 — Iterate, then hand off

17. Show the contact sheet. Apply feedback at the right altitude: color /
    spacing / type -> tokens; behavior -> component; screen-local fixes are
    rare. Re-render with a bumped iteration prefix; never overwrite history.
18. User approval is the only exit. Then persist `docs/design//`
    with DESIGN.md (POV, signature detail, 3 checkable laws, the motion
    spec incl. the reduced-motion variant, decision log, any recorded law
    breaks), the gallery route, and renders/.
19. Hand off: /web-craft for production hardening (and the Vercel
    `web-interface-guidelines` skill for the 100+ implementation rules);
    /ui-review + /ux-review (web lanes) to audit the built result.

## Output format

- Renders named `r---.png` in `renders/`,
  plus an `index.html` contact sheet. Schemes always come in pairs.
- Progress messages show screenshots, not code.

## Does not do

- Production hardening, a11y/perf audits, framework idioms — /web-craft plus
  the Vercel guidelines skill.
- Journeys, flows, navigation architecture — /ux-design (upstream).
- Auditing an app that already exists — /ui-review (pixels) and
  /ux-review (experience), both of which have web lanes.
- Native iOS design — /ios-design. Standalone HTML pages, decks, or design
  systems browsable at claude.ai/design — Claude Design via DesignSync.
- Theme A/B on an existing component kit — /skin-gallery.

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [dndungu](https://github.com/dndungu)
- **Source:** [dndungu/agent-skills](https://github.com/dndungu/agent-skills)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-dndungu-agent-skills-web-design
- Seller: https://agentstack.voostack.com/s/dndungu
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.