# Build Focused Logic and UI Prototypes

Design decisions are difficult to evaluate before users can interact with them. This skill builds disposable prototypes that expose state behavior or compare interface variants.

## Install

```bash
npx skillstore add mattpocock/prototype
```

## Metadata

- Status: approved
- Slug: mattpocock-prototype
- Skillstore revision: r2
- Version status: missing
- Tree hash: a455095bcfa24f007b186ffaa0ac65a509339b4362d4e32c38a046914161654b
- Author: mattpocock
- GitHub username: mattpocock
- License: MIT
- Repository: https://github.com/mattpocock/skills/tree/main/skills/engineering/prototype/
- Ref: ebdfe608f5de2b66ff37ab4af12af8ac4f5e8006
- Supported tools: Claude, Codex, Claude Code
- Audit status: complete
- Agent install advisory: allowed
- Manual install advisory: allowed
- Artifact signature: available
- Audit attestation: unavailable
- Human verification: not\_verified
- Risk factors: external\_commands, env\_access
- Quality score: 79
- Quality tier: bronze
- Public page: https://skillstore.pages.dev/skills/mattpocock-prototype
- Manifest: https://skillstore.pages.dev/api/skills/mattpocock-prototype/manifest

## Capabilities

- Selects a logic or UI workflow based on the design question and surrounding project context.
- Builds small terminal interfaces for exercising state models and viewing each transition.
- Separates prototype logic from terminal input and rendering through a portable module interface.
- Creates three structurally distinct interface variants with URL-based switching on one route.
- Documents the tested question, run command, result, and cleanup path.

## Use Cases

- Validate State Transitions: Exercise difficult business rules through a small terminal interface before committing to an architecture.
- Compare Interface Directions: Review three structurally different page layouts with the same data and surrounding application context.
- Resolve Team Decisions: Create an interactive artifact that helps a team select a direction and record why it won.

## Prompt Templates

### Test a State Model

```
Build a logic prototype for [feature]. Use [runtime], show the full state after each action, and provide one run command.
```

### Compare Page Layouts

```
Create three structurally different variants for [page] on its existing route. Reuse current data and add URL-based switching.
```

### Probe Edge Cases

```
Prototype [workflow] as a pure state module with a thin terminal interface. Include actions for [cases] and expose invalid transitions clearly.
```

### Evaluate an Embedded Flow

```
Build five distinct variants for [flow] inside [host page]. Keep data loading unchanged, stub mutations, add keyboard switching, and define evaluation criteria.
```

## Limitations

- Produces disposable code with minimal testing and error handling, so results need production hardening.
- Uses in-memory or stubbed data by default and does not validate production persistence.
- Depends on the host project's runtime, router, task runner, and component conventions.
- Answers one focused question and does not replace full usability or security testing.

## Best Practices

- Write the design question before implementation and keep every prototype focused on that question.
- Use existing project tools, routes, data loading, and visual conventions.
- Record the winning decision, remove temporary controls, and harden retained code before production.

## Anti Patterns

- Do not treat prototype code as production-ready implementation.
- Do not connect interface variants to irreversible production mutations.
- Do not create cosmetic variants that preserve the same layout and hierarchy.

## Security Audit

- Audited at: 2026-07-23T16:29:58.196\+00:00
- Summary: All seven static findings are false positives caused by safe documentation examples. No malicious execution, covert input capture, secret access, prompt injection, or obfuscated payload was found.

## Stats

- Views: 68
- Downloads: 8
- Favorites: 0
- Popularity score: 0