prototype

작성자: mattpocock

Build a throwaway prototype to flesh out a design before committing to it. Routes between two branches — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route. Use when the user wants to prototype, sanity-check a data model or state machine, mock up a UI, explore design options, or says "prototype this", "let me play with it", "try a few designs".

npx skills add https://github.com/mattpocock/skills --skill prototype

Prototype

A prototype is throwaway code that answers a question. The question decides the shape.

Pick a branch

Identify which question is being answered — from the user's prompt, the surrounding code, or by asking if the user is around:

  • "Does this logic / state model feel right?"LOGIC.md. Build a tiny interactive terminal app that pushes the state machine through cases that are hard to reason about on paper.
  • "What should this look like?"UI.md. Generate several radically different UI variations on a single route, switchable via a URL search param and a floating bottom bar.

The two branches produce very different artifacts — getting this wrong wastes the whole prototype. If the question is genuinely ambiguous and the user isn't reachable, default to whichever branch better matches the surrounding code (a backend module → logic; a page or component → UI) and state the assumption at the top of the prototype.

Rules that apply to both

  1. Throwaway from day one, and clearly marked as such. Locate the prototype code close to where it will actually be used (next to the module or page it's prototyping for) so context is obvious — but name it so a casual reader can see it's a prototype, not production. For throwaway UI routes, obey whatever routing convention the project already uses; don't invent a new top-level structure.
  2. One command to run. Whatever the project's existing task runner supports — pnpm <name>, python <path>, bun <path>, etc. The user must be able to start it without thinking.
  3. No persistence by default. State lives in memory. Persistence is the thing the prototype is checking, not something it should depend on. If the question explicitly involves a database, hit a scratch DB or a local file with a clear "PROTOTYPE — wipe me" name.
  4. Skip the polish. No tests, no error handling beyond what makes the prototype runnable, no abstractions. The point is to learn something fast and then delete it.
  5. Surface the state. After every action (logic) or on every variant switch (UI), print or render the full relevant state so the user can see what changed.
  6. Delete or absorb when done. When the prototype has answered its question, either delete it or fold the validated decision into the real code — don't leave it rotting in the repo.

When done

The answer is the only thing worth keeping from a prototype. Capture it somewhere durable (commit message, ADR, issue, or a NOTES.md next to the prototype) along with the question it was answering. If the user is around, that capture is a quick conversation; if not, leave the placeholder so they (or you, on the next pass) can fill in the verdict before deleting the prototype.

mattpocock의 다른 스킬

grill-me
mattpocock
사용자의 계획이나 디자인에 대해 철저히 질문하여 공통된 이해에 도달할 때까지 결정 트리의 각 분기를 해결합니다. 사용자가 계획을 검증받고 싶어하거나, 디자인에 대해 집중 질문을 받고 싶어하거나, "grill me"라고 언급할 때 사용하세요.
researchcommunicationproject-management
grill-with-docs
mattpocock
기존 도메인 모델에 맞춰 계획을 검증하고, 용어를 명확히 하며, 결정이 구체화됨에 따라 문서(CONTEXT.md, ADR)를 즉시 업데이트하는 그릴링 세션입니다. 사용자가 프로젝트의 언어와 문서화된 결정에 맞춰 계획을 검증하고자 할 때 사용하세요.
developmentdocumentresearch
improve-codebase-architecture
mattpocock
코드베이스에서 심화 개선 기회를 찾되, CONTEXT.md의 도메인 언어와 docs/adr/의 결정 사항을 참고합니다. 사용자가 아키텍처를 개선하거나, 리팩토링 기회를 찾거나, 강하게 결합된 모듈을 통합하거나, 코드베이스를 더 테스트 가능하고 AI가 탐색하기 쉽게 만들고자 할 때 사용합니다.
developmentcode-reviewapi
teach
mattpocock
이 워크스페이스 내에서 사용자에게 새로운 기술이나 개념을 가르칩니다.
communicationproductivity
tdd
mattpocock
레드-그린-리팩터 루프를 사용한 테스트 주도 개발. 사용자가 TDD로 기능을 구축하거나 버그를 수정하려 할 때, "레드-그린-리팩터"를 언급할 때, 통합 테스트를 원할 때, 또는 테스트 우선 개발을 요청할 때 사용합니다.
developmenttesting
to-prd
mattpocock
현재 대화 컨텍스트를 PRD로 변환하여 프로젝트 이슈 트래커에 게시합니다. 사용자가 현재 컨텍스트에서 PRD를 생성하려 할 때 사용하세요.
developmentdocumentproject-management
handoff
mattpocock
현재 대화를 다른 에이전트가 이어받을 수 있도록 핸드오프 문서로 압축합니다.
communicationproject-managementdocument
diagnose
mattpocock
어려운 버그와 성능 회귀를 위한 체계적인 진단 루프입니다. 재현 → 최소화 → 가설 수립 → 계측 → 수정 → 회귀 테스트 순서로 진행됩니다. 사용자가 "이것을 진단해줘" / "이것을 디버깅해줘"라고 말하거나, 버그를 보고하거나, 무언가 고장났다/예외를 던진다/실패한다고 말하거나, 성능 회귀를 설명할 때 사용합니다.
developmenttestingcode-review