# Ns Proto Creator

> (NS) Playwright reverse-prototyping — capture live UI; create/evolve single prototype/ (git history; never v1/v2). Use when prototyping from a URL, reversing a screen into prototype/, evolving a prototype, AS-IS flows/fields, or "prototype this app/page". Do NOT use for appearance MDs only (ns-proto-visual-guide), full SDD (ns-spec-driven), bare code fixes (ns-coder), or /ns-harness prepare.

- Skill: `nextstage-brasil/ns-proto-creator` (Agent Skill, multi-file: 5 files)
- Install (CLI): `npx skillmds@latest add nextstage-brasil/ns-proto-creator`
- Raw SKILL.md: https://api.skillmd.com/api/skills/nextstage-brasil/ns-proto-creator/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- License: Apache-2.0
- Author: nextstage-brasil (https://skillmd.com/u/nextstage-brasil)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/nextstage-brasil/ns-proto-creator

---


# Proto Creator

**Delivery face:** Playwright reverse prototyping. Capture → AS-IS docs → create/evolve one `prototype/` → quality → living appearance → optional visual guides.

**Orchestrate.** Load worker `SKILL.md` at delegation. No inline full design checklists or Element|How tables.

## Layout (locked)

```
prototype/              # THE prototype — create once, evolve forever
docs/                   # AS-IS briefs, screenshots, appearance guides
docs/specs/             # Living domain specs (when consolidating)
```

- Missing `prototype/` → **create**.
- Existing `prototype/` → **evolve in place**.
- Never scaffold `vN/prototype/` or ask version-folder name. Versioning = **git**. Optional: remind commit after meaningful evolve.

## Harness

See `../../ns-harness/references/session-boot.md` and `../../ns-harness/references/artifact-layout.md`.

## Near-miss routing

| User wants | Redirect |
| ---------- | -------- |
| Only `*-visual.md` / descrição normativa / guia de aparência | `ns-proto-visual-guide` |
| Full SDD version / requirements / tasks | `ns-spec-driven` |
| Bare bugfix, no prototype scope | `ns-coder` |
| Brownfield architecture map only | Tell user run `/ns-harness prepare` |

## Boot (mandatory, once per session)

Short natural-language questions. No giant questionnaire.

1. **Base URL** — login / which Playwright MCP profile if multiple.
2. **Scope** — screens, roles, add/change.
3. **Prototype mode** — detect `prototype/`:
   - absent → **create**
   - present → **evolve in place**

No version-id / `v1` folder question.

## Journey

```mermaid
flowchart TB
  boot[Boot questions]
  capture[Capture Playwright]
  asis[AS-IS docs]
  build[Build or evolve prototype]
  quality[Best practices + guidelines]
  living[Living appearance]
  handoff[Offer visual guide]

  boot --> capture --> asis --> build --> quality --> living --> handoff
```

| Phase | Reference / worker | Behavior |
| ----- | ------------------ | -------- |
| Capture | `references/capture-playwright.md` | Discover Playwright MCP; navigate; screenshots; note structure, fonts, icons, density |
| AS-IS | `references/as-is-docs.md` | Write/update `docs/` briefs from evidence |
| Build / Evolve | `references/build-prototype.md` + `ns-frontend-design` | Only under `prototype/`; mirror flows/fields/states; modern stack — no legacy clone |
| Quality | `ns-best-practices` | Hygiene + Web Interface Guidelines review on prototype surfaces |
| Living | `ns-living-spec` **appearance** | Create `docs/specs/` + INDEX if missing; SHALL for visible product behavior only |
| Handoff | `ns-proto-visual-guide` | Offer / run for implementation appearance MDs |

## Hard rules

- One prototype tree; evolve in place; never parallel `vN/` copies
- Fidelity from live Playwright evidence; no invented screens
- Stack-free modern UI under `prototype/` — load `ns-frontend-design`
- English for this skill's artifacts; project docs language follows repo
- Versioning = git; optional commit remind after meaningful evolve
- No hardcoded product-specific login — project rules / user credentials path

## Related skills

- `ns-proto-visual-guide` — normative appearance MDs
- `/ns-harness` `codebase-reverse-spec.md` — business reverse from code (complement URL capture)
- `ns-frontend-design` / `ns-best-practices` — design + quality workers