# chocpink123/prototype-previewer-skill architecture

> Architecture diagram of the GitHub repository chocpink123/prototype-previewer-skill, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-29). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/chocpink123/prototype-previewer-skill
- Repository: https://github.com/chocpink123/prototype-previewer-skill

## Overview

Prototype Previewer is a reusable assistant skill pack for creating interactive prototype-review pages, with adapters for Cursor and Claude Code and direct use in Codex. The main workflow is invocation, project/screen adaptation, and generation of the reviewer page, optionally with a Figma capture page. The README documents the templates and guidance; sampled source only covers the optional validation helper, so its runtime behavior is shown without assuming how the unsampled skill instructions implement generation.

Main entry points: [`prototype-previewer/SKILL.md`](https://github.com/chocpink123/prototype-previewer-skill/blob/main/prototype-previewer/SKILL.md) (Previewer skill), [`prototype-previewer/scripts/check_previewer.py`](https://github.com/chocpink123/prototype-previewer-skill/blob/main/prototype-previewer/scripts/check_previewer.py) (Previewer checker), [`adapters/cursor/.cursor/commands/prototype-previewer.md`](https://github.com/chocpink123/prototype-previewer-skill/blob/main/adapters/cursor/.cursor/commands/prototype-previewer.md) (Cursor command), [`adapters/claude/.claude/commands/prototype-previewer.md`](https://github.com/chocpink123/prototype-previewer-skill/blob/main/adapters/claude/.claude/commands/prototype-previewer.md) (Claude command)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_entry["Tool Entry Points"]
  node_cursor_adapter["Cursor command"]
  node_cursor_rules["Cursor rules"]
  node_claude_adapter["Claude command"]
  node_claude_guidance["Claude guidance<br/>[CLAUDE.md]"]
end

subgraph group_guidance["Review Guidance"]
  node_skill["Previewer skill<br/>[SKILL.md]"]
  node_spec["Previewer spec<br/>[previewer-spec.md]"]
  node_checklist["Adaptation checklist"]
end

subgraph group_templates["Output Templates"]
  node_interactive_template["Interactive template"]
  node_capture_template["Figma capture template"]
end

subgraph group_validation["Validation"]
  node_checker["Previewer checker<br/>[check_previewer.py]"]
end

node_user(("Project author"))
node_codex(("Codex"))
node_cursor(("Cursor"))
node_claude(("Claude Code"))
node_reviewer["Generated reviewer"]
node_capture_page["Generated capture page"]

node_user -->|"invokes skill"| node_codex
node_codex -->|"uses"| node_skill
node_user -->|"invokes command"| node_cursor
node_cursor -->|"loads"| node_cursor_adapter
node_cursor -.->|"may load"| node_cursor_rules
node_cursor_adapter -->|"dispatches"| node_skill
node_user -->|"invokes command"| node_claude
node_claude -->|"loads"| node_claude_adapter
node_claude -.->|"may merge"| node_claude_guidance
node_claude_adapter -->|"dispatches"| node_skill
node_skill -->|"follows"| node_spec
node_skill -->|"uses"| node_checklist
node_skill -->|"adapts"| node_interactive_template
node_skill -->|"generates"| node_reviewer
node_skill -.->|"optionally adapts"| node_capture_template
node_skill -.->|"optionally generates"| node_capture_page
node_user -->|"runs"| node_checker
node_checker -->|"checks"| node_reviewer
node_checker -->|"checks"| node_capture_page

click node_skill "https://github.com/chocpink123/prototype-previewer-skill/blob/main/prototype-previewer/SKILL.md"
click node_spec "https://github.com/chocpink123/prototype-previewer-skill/blob/main/prototype-previewer/references/previewer-spec.md"
click node_checklist "https://github.com/chocpink123/prototype-previewer-skill/blob/main/prototype-previewer/references/adaptation-checklist.md"
click node_cursor_adapter "https://github.com/chocpink123/prototype-previewer-skill/blob/main/adapters/cursor/.cursor/commands/prototype-previewer.md"
click node_cursor_rules "https://github.com/chocpink123/prototype-previewer-skill/blob/main/adapters/cursor/.cursor/rules/prototype-previewer.mdc"
click node_claude_adapter "https://github.com/chocpink123/prototype-previewer-skill/blob/main/adapters/claude/.claude/commands/prototype-previewer.md"
click node_claude_guidance "https://github.com/chocpink123/prototype-previewer-skill/blob/main/adapters/claude/CLAUDE.md"
click node_interactive_template "https://github.com/chocpink123/prototype-previewer-skill/blob/main/prototype-previewer/assets/index.template.html"
click node_capture_template "https://github.com/chocpink123/prototype-previewer-skill/blob/main/prototype-previewer/assets/figma_capture_index.template.html"
click node_checker "https://github.com/chocpink123/prototype-previewer-skill/blob/main/prototype-previewer/scripts/check_previewer.py"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_cursor_adapter,node_cursor_rules,node_claude_adapter,node_claude_guidance,node_reviewer toneBlue
class node_skill,node_spec,node_checklist toneAmber
class node_interactive_template,node_capture_template toneMint
class node_checker toneRose
class node_user,node_codex,node_cursor,node_claude,node_capture_page toneIndigo
```

## Components

### Tool Entry Points

- [Cursor command](https://github.com/chocpink123/prototype-previewer-skill/blob/main/adapters/cursor/.cursor/commands/prototype-previewer.md): `adapters/cursor/.cursor/commands/prototype-previewer.md`
- [Cursor rules](https://github.com/chocpink123/prototype-previewer-skill/blob/main/adapters/cursor/.cursor/rules/prototype-previewer.mdc): `adapters/cursor/.cursor/rules/prototype-previewer.mdc`
- [Claude command](https://github.com/chocpink123/prototype-previewer-skill/blob/main/adapters/claude/.claude/commands/prototype-previewer.md): `adapters/claude/.claude/commands/prototype-previewer.md`
- [Claude guidance](https://github.com/chocpink123/prototype-previewer-skill/blob/main/adapters/claude/CLAUDE.md): `adapters/claude/CLAUDE.md`

### Review Guidance

- [Previewer skill](https://github.com/chocpink123/prototype-previewer-skill/blob/main/prototype-previewer/SKILL.md): `prototype-previewer/SKILL.md`
- [Previewer spec](https://github.com/chocpink123/prototype-previewer-skill/blob/main/prototype-previewer/references/previewer-spec.md): `prototype-previewer/references/previewer-spec.md`
- [Adaptation checklist](https://github.com/chocpink123/prototype-previewer-skill/blob/main/prototype-previewer/references/adaptation-checklist.md): `prototype-previewer/references/adaptation-checklist.md`

### Output Templates

- [Interactive template](https://github.com/chocpink123/prototype-previewer-skill/blob/main/prototype-previewer/assets/index.template.html): `prototype-previewer/assets/index.template.html`
- [Figma capture template](https://github.com/chocpink123/prototype-previewer-skill/blob/main/prototype-previewer/assets/figma_capture_index.template.html): `prototype-previewer/assets/figma_capture_index.template.html`

### Validation

- [Previewer checker](https://github.com/chocpink123/prototype-previewer-skill/blob/main/prototype-previewer/scripts/check_previewer.py): `prototype-previewer/scripts/check_previewer.py`

### Other components

- **Project author**
- **Codex**
- **Cursor**
- **Claude Code**
- **Generated reviewer**
- **Generated capture page**

## Connections

- Project author → Codex: invokes skill
- Codex → Previewer skill: uses
- Project author → Cursor: invokes command
- Cursor → Cursor command: loads
- Cursor → Cursor rules: may load
- Cursor command → Previewer skill: dispatches
- Project author → Claude Code: invokes command
- Claude Code → Claude command: loads
- Claude Code → Claude guidance: may merge
- Claude command → Previewer skill: dispatches
- Previewer skill → Previewer spec: follows
- Previewer skill → Adaptation checklist: uses
- Previewer skill → Interactive template: adapts
- Previewer skill → Generated reviewer: generates
- Previewer skill → Figma capture template: optionally adapts
- Previewer skill → Generated capture page: optionally generates
- Project author → Previewer checker: runs
- Previewer checker → Generated reviewer: checks
- Previewer checker → Generated capture page: checks