agile-pen
Agile prototyping with Pen.dev
Use Pen.dev as the only prototype surface. Do not create HTML, Figma, Paper, or code-based fallback prototypes. Represent an interaction as a separate state frame whenever the result must be understood before implementation.
Use the current Pen.dev and pen-capture brands in user-facing prose. Preserve technical identifiers that still use the former Pencil name only when required for compatibility, including .pen, Pencil MCP tool names, legacy IR values, schema fields, and generated filenames.
Required tools and assets
- Use Pencil MCP tools for semantic
.peninspection, editing, variables, layout checks, screenshots, and exports. - Resolve
scripts/ads.mjsrelative to thisSKILL.mdand run it directly with Node or Bun for catalog sync, deterministic renderer materialization, capture ingest, project configuration, and evidence recording. Do not assume a globaladsbinary or anads binwrapper. - Resolve
scripts/pen-capture.mjsrelative to thisSKILL.mdand run it with--project <target-project>. The wrapper installs the exact pinned@djalmajr/pen-captureversion from GitHub Packages into the ignored project cache at.cache/agile-pen/pen-captureand installs its matching Playwright Chromium. It may usePEN_CAPTURE_CLIonly as an explicit local-development override; never assume a sibling checkout, npmjs package, global binary, orlatestversion. GitHub Packages authentication must come fromGITHUB_TOKEN,GH_TOKEN, or an authenticatedghCLI withread:packagesaccess. - Use
assets/pencil/examples/trello-clone/trello-clone.penas the generic reference for organization and traceability.
The pinned shadcn and Dice registries define component anatomy. Treat the project's root DESIGN.md as the source of truth for product identity where it intentionally overrides a captured composition.
ADS and pen-capture must never read or write .pen files. Generated batches are inert JavaScript artifacts until Pencil MCP applies them. Pencil MCP is the only .pen reader and writer.