New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Prd V04 Visual Prototype Gate

by mattgierhart in mattgierhart/PRD-driven-context-engineering

Generate visual prototype prompts from SCR- entries for Google Stitch (or equivalent UI generation tool).

MITAuto-check passedProduct & Project Management

Install Prd V04 Visual Prototype Gate

skills CLI
$ npx skills add mattgierhart/PRD-driven-context-engineering --skill prd-v04-visual-prototype-gate -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install mattgierhart/PRD-driven-context-engineering prd-v04-visual-prototype-gate --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/mattgierhart/PRD-driven-context-engineering.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/prd-v04-visual-prototype-gate .claude/skills/prd-v04-visual-prototype-gate && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
prd-v04-visual-prototype-gate
GitHub stars
180
Token cost
~1.6k tokens
SKILL.md length
622 words
Files
4 (incl. references, assets)
Skills in repo
45
Repo updated
First seen
Licence
MIT

At a glance

Generate visual prototype prompts from SCR- entries for Google Stitch (or equivalent UI generation tool).

  • Works in 5 steps: Confirm Inputs Exist → Write the Prototype Context Brief → Generate Per-Screen Prompts → …
  • : make a prototype
  • SKILL.md covers Consumes, Produces, Step-by-Step Process and Stitch Workflow Notes, plus 3 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Prd V04 Visual Prototype Gate is an agent skill from mattgierhart/PRD-driven-context-engineering. Generate visual prototype prompts from SCR- entries for Google Stitch (or equivalent UI generation tool). Triggers on: 'make a prototype', 'visualize screens', 'generate Stitch prompt', 'I need a visual demo', 'prototype the workflow', 'show me what this looks like', 'get this to a demo', 'visual gate'. Consumes SCR- (Screen Flow Definition), PER- (Personas), UJ- (User Journeys), DES- (Design Components). Outputs Stitch prompt blocks per SCR- entry + Feedback Capture Template. No new SoT IDs created — this skill…

Its SKILL.md is about 1.6k tokens, which your agent loads only when the skill is triggered. The skill folder holds 5 other files, including reference files and assets (for example `assets/feedback-capture-template.md`, `references/screen-count-guidelines.md` and `references/tool-adaptation-notes.md`).

It sits in Product & Project Management, covering PRD writing and Customer journey mapping. It works with Google Stitch. The repository describes itself as: PRD-Led Context Engineering — Memory as Infrastructure. An ontology layer for product teams building products that solve real problems — with AI agents that remember. Gated PRD… The licence is MIT.

When your agent uses it

  • : make a prototype
  • Visualize screens
  • Generate Stitch prompt
  • I need a visual demo

Example prompts

  • “make a prototype”
  • “visualize screens”
  • “generate Stitch prompt”
  • “/prd-v04-visual-prototype-gate”

Requirements

  • Pre-approved tools (allowed-tools): Read, Write, Edit, Glob, Grep

Workflow steps

5 steps, taken from the step headings in SKILL.md.

  1. Confirm Inputs Exist
  2. Write the Prototype Context Brief
  3. Generate Per-Screen Prompts
  4. Identify the Money Shot
  5. Output Feedback Capture Template

What it can do on your machine

Read from SKILL.md and the folder at commit 30ed1b0. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves these tools, so the agent can use them without asking each time:

    • Read
    • Write
    • Edit
    • Glob
    • Grep

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Prd V04 Visual Prototype Gate loads about 1.6k tokens when it runs, and up to ~2.5k if it reads all its reference files. Until then it costs about 154 tokens; SKILL.md has 622 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~154
When it runs · the whole SKILL.md, loaded when a task matches
~1.6k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~2.5k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from mattgierhart/PRD-driven-context-engineering at commit 30ed1b0, republished under its MIT licence (© mattgierhart). 622 words, ~1,631 tokens.

Download SKILL.mdSave it as .claude/skills/prd-v04-visual-prototype-gate/SKILL.md (or your agent's skills folder). This skill also uses 3 other files; get the full folder from GitHub.
name
prd-v04-visual-prototype-gate
description
Generate visual prototype prompts from SCR- entries for Google Stitch (or equivalent UI generation tool). Triggers on: 'make a prototype', 'visualize screens', 'generate Stitch prompt', 'I need a visual demo', 'prototype the workflow', 'show me what this looks like', 'get this to a demo', 'visual gate'. Consumes SCR- (Screen Flow Definition), PER- (Personas), UJ- (User Journeys), DES- (Design Components). Outputs Stitch prompt blocks per SCR- entry + Feedback Capture Template. No new SoT IDs created — this skill makes existing SCR- entries visual and routes feedback back to them.
allowed-tools
Read, Write, Edit, Glob, Grep
context
fork

Visual Prototype Gate

Position in workflow: v0.4 Screen Flow Definition → v0.4 Visual Prototype Gate → v0.5 Red Team Review

Screens on paper are hypotheses. Screens rendered visually are testable. This skill converts SCR- entries into structured prompts for Google Stitch (or any UI generation tool), then captures feedback routed back to specific SoT IDs.

Rule: No product advances past v0.4 without a visual prototype reviewed by at least one stakeholder.

Consumes

  • SCR-* entries (from Screen Flow Definition) — Each SCR- becomes one Stitch prompt. 1:1 mapping, no exceptions.
  • PER-* entries (from Persona Definition) — User context shapes copy, complexity, and emotional framing per screen.
  • UJ-* entries (from User Journey Mapping) — Journey position determines each screen's emotional beat (uncertainty → clarity → confidence).
  • DES-* entries (from Screen Flow Definition) — Shared components referenced in prompts for visual consistency.
  • BR-* business rules — Constraints affecting visual layout (pricing tiers, role-based visibility, data rules).

Produces

  • Stitch Prompt Block per SCR- — One structured prompt per screen, ready to paste into Stitch. Grouped by UJ- journey for context.
  • Prototype Context Brief — Product context + design style preamble (pasted once into Stitch before screen prompts).
  • Feedback Capture Template — Table mapping each prototype screen to its SCR- ID for structured review. See assets/feedback-capture-template.md.
  • No new SoT IDs — This skill visualizes existing IDs. Feedback routes back to SCR-, DES-, or CFD- entries.

Step-by-Step Process

Step 1: Confirm Inputs Exist

Check that Screen Flow Definition is complete:

  • At least 3 SCR- entries exist with Purpose, Key Elements, and Related IDs populated
  • At least 1 UJ- journey references those screens
  • Design style preference confirmed with user (or default: "Clean B2B SaaS, minimal, professional")

If SCR- entries are incomplete, stop and run prd-v04-screen-flow-definition first.

Step 2: Write the Prototype Context Brief

One block, written once per product. This is pasted into Stitch as the opening context before individual screen prompts.

PRODUCT CONTEXT
[2-3 sentences from PRD v0.1 Spark: what the product is, who uses it, what pain it solves]

PRIMARY USER
[From PER-001: role, context, technical comfort level]

DESIGN STYLE
[Confirmed aesthetic — e.g., "Clean B2B SaaS, dark sidebar, minimal. Color for status only."]
Step 3: Generate Per-Screen Prompts

For each SCR- entry, produce one Stitch prompt block. Follow this template:

SCREEN: [SCR-XXX] — [Screen Name]
Journey position: [UJ-XXX], Step [N] of [Total]
User goal: [From SCR- Purpose field]
Situation: [What just happened — derived from prior UJ- step]
Key UI elements: [From SCR- Key Elements, using specific UI/UX keywords]
  - [Element 1: be specific — "green 'Run' button, top right, disabled until selection made"]
  - [Element 2: reference DES-XXX if shared component]
  - [Element 3+]
Constraints: [BR-XXX rules affecting this screen — e.g., "free tier sees max 3 items"]
Emotional beat: [Derived from journey position — early=uncertainty, mid=engagement, end=confidence]
Layout: [UI surface type — full page, sidebar panel, modal, card grid, etc.]

Stitch-specific guidance (from research):

  • Use UI/UX keywords: "navigation bar," "card layout," "call-to-action," not vague terms like "a button"
  • One screen per Stitch generation for best results — do not combine multiple SCR- entries into one prompt
  • Include adjectives for aesthetic: "minimal," "clean," "dark," "warm" — Stitch uses these for palette and typography
  • Reference specific positions: "top-right," "below the header," "spanning full width"
Show full SKILL.md (244 more words)Show less
Step 4: Identify the Money Shot

Select the single screen that communicates core product value fastest. This is typically the screen at the UJ- "Moment of Value" step. Mark it in the output. This frame gets screenshotted for any stakeholder deck, landing page, or pitch.

Step 5: Output Feedback Capture Template

Alongside prompts, output the feedback capture template (see assets/feedback-capture-template.md). This is the structured review artifact — reviewers annotate per-screen, feedback routes to specific IDs.

Stitch Workflow Notes

Google Stitch iterates best with incremental refinement:

  1. Paste the Prototype Context Brief first
  2. Generate one screen at a time using per-screen prompts
  3. Refine each screen with targeted follow-ups ("Move the CTA to the right," "Change card layout to 2-column grid")
  4. Export to Figma if design iteration continues beyond prototype stage

For non-Stitch tools, see references/tool-adaptation-notes.md.

Quality Gates (v0.4 → v0.5 Readiness)

Before proceeding to v0.5 Red Team Review:

  • All SCR- entries have a corresponding visual prototype screen
  • At least one stakeholder has reviewed the prototype
  • Feedback Capture Template is completed with disposition for each item
  • Money Shot identified and captured

Downstream Connections

ConsumerWhat It Uses
v0.5 Red Team ReviewVisual prototype informs risk assessment — "does this feel buildable?"
v0.6 ArchitectureValidated screens inform API data requirements
v0.7 Build ExecutionPrototype becomes the visual spec for implementation
Stakeholder CommunicationMoney Shot used in decks, pitches, landing pages

Detailed References

  • Feedback capture template: See assets/feedback-capture-template.md
  • Tool adaptation notes: See references/tool-adaptation-notes.md
  • Screen count guidelines: See references/screen-count-guidelines.md

© mattgierhart, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 3 other files (references, assets) in .claude/skills/prd-v04-visual-prototype-gate of mattgierhart/PRD-driven-context-engineering.

  • SKILL.md
  • assets/feedback-capture-template.md
  • references/screen-count-guidelines.md
  • references/tool-adaptation-notes.md

Open the folder on GitHubat commit 30ed1b0

Compare with similar skills

Prd V04 Visual Prototype Gate next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Prd V04 Visual Prototype Gate compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Prd V04 Visual Prototype Gate this skillmattgierhart/PRD-driven-context-engineering180—~1.6kAutomated safety check: PassMIT
Prd To UXragnar-pwninskjold/tech-snacks137—~1.3kAutomated safety check: PassMIT
Prdjuanandresgs/claude-ctrl193—~2.9kAutomated safety check: PassNone
Idea Ossickn33/agentic-awesome-skills47k1 repos~1.5kAutomated safety check: PassMIT
Aidd Product Managerparalleldrive/aidd384—~845Automated safety check: PassMIT
CCPM Project Managementautomazeio/ccpm8.4k—~1.1kAutomated safety check: PassMIT

Similar skills

  • Prd To UX

    ragnar-pwninskjold/tech-snacks

    A skill your agent uses when translating a PRD, feature spec, or raw product idea into screen-level prompts for web UX generators (Google Stitch, Figma AI, Pencil.dev, Claude Design, v0, or similar).

    137 GitHub stars~1.3k tokensUpdated 1 mo ago
    Product & Project ManagementAuto-check passed

  • Prd

    juanandresgs/claude-ctrl

    Write structured feature specifications with problem statements, user journeys, use cases, functional requirements, and success metrics.

    193 GitHub stars~2.9k tokensUpdated 2 mo ago
    Product & Project ManagementAuto-check passed

  • Idea Os

    sickn33/agentic-awesome-skills

    Five-phase pipeline (triage → clarify → research → PRD → plan) that turns a raw idea into four linked files: clarifying questions, deep research, a PRD with non-goals and metrics, and a phased…

    47k GitHub starsUsed in 1 repo~1.5k tokens
    Product & Project ManagementAuto-check passed

  • Aidd Product Manager

    paralleldrive/aidd

    Plan features, user stories, user journeys, and conduct product discovery.

    384 GitHub stars~845 tokensUpdated 3 mo ago
    Product & Project ManagementAuto-check passed

  • CCPM Project Management

    automazeio/ccpm

    Runs a spec-driven workflow from PRD to epic to GitHub issues to parallel agents, with status, standup and blocked-work reports from bundled scripts.

    8.4k GitHub stars~1.1k tokensUpdated 6 mo ago
    Product & Project ManagementAuto-check passed

  • Ralph Tui Create Beads

    subsy/ralph-tui

    Convert PRDs to beads for ralph-tui execution. An agent skill from subsy/ralph-tui.

    2.5k GitHub starsUsed in 1 repo~2.6k tokens
    Product & Project ManagementAuto-check passed

More from mattgierhart/PRD-driven-context-engineering

All 45 skills in this repo

  • Ghm Gate Check

    mattgierhart/PRD-driven-context-engineering

    Validates gate criteria before PRD lifecycle advancement by delegating to the readiness scoring pipeline (scripts/readiness.py).

    180 GitHub stars~1.3k tokensUpdated 1 mo ago
    Auto-check: notes

  • Ghm Harvest

    mattgierhart/PRD-driven-context-engineering

    Extracts durable insights from temp/ files to SoT during EPIC Phase E.

    180 GitHub stars~1.1k tokensUpdated 1 mo ago
    Auto-check passed

  • Ghm Id Register

    mattgierhart/PRD-driven-context-engineering

    Validates and registers new SoT IDs with cross-reference integrity.

    180 GitHub stars~1.5k tokensUpdated 1 mo ago
    Auto-check passed

  • Ghm Sot Builder

    mattgierhart/PRD-driven-context-engineering

    Creates new Source of Truth (SoT) files when existing templates don't fit your needs.

    180 GitHub stars~2k tokensUpdated 1 mo ago
    Auto-check passed

  • Prd V01 Problem Framing

    mattgierhart/PRD-driven-context-engineering

    Transform vague product ideas into evidence-anchored problem statements for PRD v0.1 Spark.

    180 GitHub stars~1.7k tokensUpdated 1 mo ago
    Auto-check passed

  • Prd V01 User Value Articulation

    mattgierhart/PRD-driven-context-engineering

    Transform validated pain points into articulated user value statements for PRD v0.1 Spark.

    180 GitHub stars~1.6k tokensUpdated 1 mo ago
    Auto-check passed

Works with

Categories

Questions about Prd V04 Visual Prototype Gate

What does Prd V04 Visual Prototype Gate do?

Generate visual prototype prompts from SCR- entries for Google Stitch (or equivalent UI generation tool). Prd V04 Visual Prototype Gate is an agent skill from mattgierhart/PRD-driven-context-engineering. Generate visual prototype prompts from SCR- entries for Google Stitch (or equivalent UI generation tool).

When should I use Prd V04 Visual Prototype Gate?

Prd V04 Visual Prototype Gate fits situations like: : make a prototype; visualize screens; generate Stitch prompt; I need a visual demo.

How do I install Prd V04 Visual Prototype Gate in Claude Code?

Run `npx skills add mattgierhart/PRD-driven-context-engineering --skill prd-v04-visual-prototype-gate -a claude-code`. Or copy the skill folder (.claude/skills/prd-v04-visual-prototype-gate in mattgierhart/PRD-driven-context-engineering) into .claude/skills/prd-v04-visual-prototype-gate in your project. Claude Code loads it when a task matches its description.

How do I install Prd V04 Visual Prototype Gate in Codex?

Run `npx skills add mattgierhart/PRD-driven-context-engineering --skill prd-v04-visual-prototype-gate -a codex`. Or copy the skill folder (.claude/skills/prd-v04-visual-prototype-gate in mattgierhart/PRD-driven-context-engineering) into .agents/skills/prd-v04-visual-prototype-gate in your project. Codex loads it when a task matches its description.

Can I use Prd V04 Visual Prototype Gate in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add mattgierhart/PRD-driven-context-engineering --skill prd-v04-visual-prototype-gate -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/prd-v04-visual-prototype-gate, .gemini/skills/prd-v04-visual-prototype-gate, .github/skills/prd-v04-visual-prototype-gate and .opencode/skills/prd-v04-visual-prototype-gate in your project.

What does Prd V04 Visual Prototype Gate need to run?

SKILL.md names no scripts, command-line tools or credentials: Prd V04 Visual Prototype Gate is instructions for the agent only. Its frontmatter pre-approves these tools: Read, Write, Edit, Glob, Grep.

Does Prd V04 Visual Prototype Gate access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Prd V04 Visual Prototype Gate safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Prd V04 Visual Prototype Gate use?

Prd V04 Visual Prototype Gate is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Prd V04 Visual Prototype Gate use?

About 1.6k tokens (SKILL.md is roughly 6.5k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 866 tokens, read only when the agent opens those files.

What are the alternatives to Prd V04 Visual Prototype Gate?

Skills that share tags, products or a category with Prd V04 Visual Prototype Gate: Prd To UX (ragnar-pwninskjold/tech-snacks, 137 stars), Prd (juanandresgs/claude-ctrl, 193 stars), Idea Os (sickn33/agentic-awesome-skills, 47k stars) and Aidd Product Manager (paralleldrive/aidd, 384 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Prd V04 Visual Prototype Gate?

mattgierhart (a GitHub user) maintains it in mattgierhart/PRD-driven-context-engineering, which has 180 GitHub stars. The repository holds 45 skills in this directory. The repository was last updated on August 31, 2026.

Source: mattgierhart/PRD-driven-context-engineering on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.