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

Requirements From HTML Mocks

by imbue-ai in imbue-ai/bouncer

Turns an HTML mock iteration session into a requirements document that describes only user-facing behavior.

AGPL-3.0Auto-check passedProduct & Project Management

Install Requirements From HTML Mocks

skills CLI
$ npx skills add imbue-ai/bouncer --skill extract-requirements-from-mock -a claude-code

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

GitHub CLI
$ gh skill install imbue-ai/bouncer extract-requirements-from-mock --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/imbue-ai/bouncer.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/extract-requirements-from-mock .claude/skills/extract-requirements-from-mock && 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
extract-requirements-from-mock
GitHub stars
399
Token cost
~410 tokens
SKILL.md length
154 words
Files
1
Skills in repo
5
Repo updated
First seen
Licence
AGPL-3.0

At a glance

Turns an HTML mock iteration session into a requirements document that describes only user-facing behavior.

  • Works in 6 steps: Locate the feature folder: Look for… → Gather all context → Extract requirements: Create… → …
  • Writing down requirements after iterating on an HTML mock
  • SKILL.md covers Input and Steps
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

An HTML mock iteration session is distilled into a clean requirements document for a feature. Given a feature name, the agent finds the feature's docs folder, asks for the correct name if it is missing, then reads mocks.context.md for the original description, questions and answers and logged UI tweaks, reads mocks.html for the final UI state and reviews the conversation for extra context.

It writes requirements.md in that folder, restricted to user-facing behavior, meaning what the user sees and can do, with no implementation details and no acceptance criteria. The document opens with a short statement that it describes what the system must do from the user's perspective. After presenting it for review, the agent offers either to rename the old mocks and regenerate fresh ones from the new requirements or to keep the existing mocks as they are.

When your agent uses it

  • Writing down requirements after iterating on an HTML mock
  • Capturing user-facing behavior without implementation details
  • Regenerating mocks from a cleaned-up requirements document

Example prompts

  • “Extract the requirements for the feed-filter feature from its mock iteration.”
  • “Turn the mock and logged tweaks for the onboarding flow into a requirements.md.”

Requirements

  • A docs folder for the feature containing mocks.context.md and mocks.html

Workflow steps

6 steps, taken from the first numbered list in SKILL.md.

  1. Locate the feature folder: Look for docs/$ARGUMENTS/
  2. Gather all context
  3. Extract requirements: Create docs/$ARGUMENTS/requirements.md with
  4. Structure the requirements doc
  5. Present the requirements to the user for review.
  6. Optionally regenerate mocks: Ask the user if they would like to

What it can do on your machine

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

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md (its code samples are markdown).

    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

Requirements From HTML Mocks loads about 410 tokens when it runs. Until then it costs about 21 tokens; SKILL.md has 154 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~21
When it runs · the whole SKILL.md, loaded when a task matches
~410

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 imbue-ai/bouncer at commit 1ed480c, republished under its AGPL-3.0 licence (© imbue-ai). 154 words, ~410 tokens.

Download SKILL.mdSave it as .claude/skills/extract-requirements-from-mock/SKILL.md (or your agent's skills folder).
name
extract-requirements-from-mock
description
Extract requirements document from HTML mock iteration
disable-model-invocation
true
argument-hint
[feature-name]

Extract Requirements from Mock

You are extracting a clean requirements document from an HTML mock iteration session.

Input

Feature name: $ARGUMENTS

Steps

  1. Locate the feature folder: Look for docs/$ARGUMENTS/

    • If it doesn't exist, ask the user to provide the correct feature name

  2. Gather all context:

    • Read mocks.context.md for the original description, Q&A, and all logged UI tweaks
    • Read mocks.html to understand the final UI state
    • Review the conversation history for any additional context

  3. Extract requirements: Create docs/$ARGUMENTS/requirements.md with:

    • Focus only on user-facing behavior - what the user sees and can do
    • No implementation details - don't specify how things should be built
    • No acceptance criteria - just describe the behavior

  4. Structure the requirements doc:

    markdown
    # <Feature Name> - Requirements

This document specifies the user-facing requirements for <feature>. It describes *what* the system must do from the user's perspective.

---

## 1. <First Major Area>

- **REQ-XXX-1:** <requirement>
- **REQ-XXX-2:** <requirement>

## 2. <Second Major Area>
...

  5. Present the requirements to the user for review.

  6. Optionally regenerate mocks: Ask the user if they would like to:

    • Rename the old mocks and regenerate fresh ones based on the new requirements
    • Keep the existing mocks as-is

© imbue-ai, AGPL-3.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in .claude/skills/extract-requirements-from-mock of imbue-ai/bouncer.

Open the folder on GitHubat commit 1ed480c

Compare with similar skills

Requirements From HTML Mocks 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.

Requirements From HTML Mocks compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Requirements From HTML Mocks this skillimbue-ai/bouncer399—~410Automated safety check: PassAGPL-3.0
Ouroboros PM InterviewQ00/ouroboros6.2k—~5.7kAutomated safety check: PassMIT
Qiaomu AI PRDjoeseesun/qiaomu-ai-prd211—~1.6kAutomated safety check: PassMIT
MVP Product Requirements WriterKhazP/vibe-coding-prompt-template3.1k—~455Automated safety check: PassMIT
User Alignment and Agent-Ready PRDstryproduck/produck-skills511—~5.3kAutomated safety check: PassApache-2.0
Code to PRDalirezarezvani/claude-skills28k1 repos~4.9kAutomated safety check: PassMIT

Similar skills

  • Ouroboros PM Interview

    Q00/ouroboros

    Runs a guided product-manager interview that classifies each question automatically and produces a Product Requirements Document.

    6.2k GitHub stars~5.7k tokensUpdated 4 days ago
    Product & Project ManagementAuto-check passed

  • Qiaomu AI PRD

    joeseesun/qiaomu-ai-prd

    Turns a one-line product idea into an AI-implementable PRD with 11 chapters, a speed-read card, constraint layers and acceptance criteria, written Chinese-first.

    211 GitHub stars~1.6k tokensUpdated 4 mo ago
    Product & Project ManagementAuto-check passed

  • MVP Product Requirements Writer

    KhazP/vibe-coding-prompt-template

    Writes or revises an MVP product requirements document, sized to the product, with observable acceptance criteria and no repeated questions.

    3.1k GitHub stars~455 tokensUpdated 6 days ago
    Product & Project ManagementAuto-check passed

  • User Alignment and Agent-Ready PRDs

    tryproduck/produck-skills

    Turns a vague feature request into a written spec with scope, phases, acceptance criteria and do-not-do limits that a coding agent can follow without guessing.

    511 GitHub stars~5.3k tokensUpdated 1 mo ago
    Product & Project ManagementAuto-check passed

  • Code to PRD

    alirezarezvani/claude-skills

    Reverse-engineers a frontend, backend or fullstack codebase into a product requirements document with per-page docs, an enum dictionary and an API inventory.

    28k GitHub starsUsed in 1 repo~4.9k tokens
    Product & Project ManagementAuto-check passed

  • Creating Issues

    opsmill/infrahub

    Turns a single feature idea, improvement, or bug into ONE well-structured GitHub issue.

    534 GitHub stars~1.2k tokensUpdated yesterday
    Product & Project ManagementAuto-check passed

More from imbue-ai/bouncer

  • HTML Feature Mocks

    imbue-ai/bouncer

    Explores a feature idea through HTML mocks that match the project's existing UI, keeping every earlier version and logging each requested tweak in a context file.

    399 GitHub stars~677 tokensUpdated 3 days ago
    Auto-check passed

  • Implementation Plan Writer

    imbue-ai/bouncer

    Turns a feature's goals, requirements and architecture documents into a set of self-contained task files that a developer with no project context can follow.

    399 GitHub stars~2.1k tokensUpdated 3 days ago
    Auto-check passed

  • Execute Implementation Plan

    imbue-ai/bouncer

    Works through the task files of a feature's implementation plan one at a time, with a TODO list and a verification step and commit for each task.

    399 GitHub stars~425 tokensUpdated 3 days ago
    Auto-check: warnings

  • Architecture Document Writer

    imbue-ai/bouncer

    Writes an architecture document for a feature from its goals and requirements, after asking questions and studying the existing codebase.

    399 GitHub stars~335 tokensUpdated 3 days ago
    Auto-check passed

Categories

Questions about Requirements From HTML Mocks

What does Requirements From HTML Mocks do?

Turns an HTML mock iteration session into a requirements document that describes only user-facing behavior. An HTML mock iteration session is distilled into a clean requirements document for a feature.html for the final UI state and reviews the conversation for extra context.

When should I use Requirements From HTML Mocks?

Requirements From HTML Mocks fits situations like: writing down requirements after iterating on an HTML mock; capturing user-facing behavior without implementation details; regenerating mocks from a cleaned-up requirements document.

How do I install Requirements From HTML Mocks in Claude Code?

Run `npx skills add imbue-ai/bouncer --skill extract-requirements-from-mock -a claude-code`. Or copy the skill folder (.claude/skills/extract-requirements-from-mock in imbue-ai/bouncer) into .claude/skills/extract-requirements-from-mock in your project. Claude Code loads it when a task matches its description.

How do I install Requirements From HTML Mocks in Codex?

Run `npx skills add imbue-ai/bouncer --skill extract-requirements-from-mock -a codex`. Or copy the skill folder (.claude/skills/extract-requirements-from-mock in imbue-ai/bouncer) into .agents/skills/extract-requirements-from-mock in your project. Codex loads it when a task matches its description.

Can I use Requirements From HTML Mocks 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 imbue-ai/bouncer --skill extract-requirements-from-mock -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/extract-requirements-from-mock, .gemini/skills/extract-requirements-from-mock, .github/skills/extract-requirements-from-mock and .opencode/skills/extract-requirements-from-mock in your project.

What does Requirements From HTML Mocks need to run?

SKILL.md names no scripts, command-line tools or credentials: Requirements From HTML Mocks is instructions for the agent only. Our summary lists: A docs folder for the feature containing mocks.context.md and mocks.html.

Does Requirements From HTML Mocks 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 Requirements From HTML Mocks 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 Requirements From HTML Mocks use?

Requirements From HTML Mocks is published under the AGPL-3.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Requirements From HTML Mocks use?

About 410 tokens (SKILL.md is roughly 1.6k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Requirements From HTML Mocks?

Skills that share tags, products or a category with Requirements From HTML Mocks: Ouroboros PM Interview (Q00/ouroboros, 6.2k stars), Qiaomu AI PRD (joeseesun/qiaomu-ai-prd, 211 stars), MVP Product Requirements Writer (KhazP/vibe-coding-prompt-template, 3.1k stars) and User Alignment and Agent-Ready PRDs (tryproduck/produck-skills, 511 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Requirements From HTML Mocks?

imbue-ai (a GitHub organization) maintains it in imbue-ai/bouncer, which has 399 GitHub stars. The repository holds 5 skills in this directory. The repository was last updated on October 8, 2026.

Source: imbue-ai/bouncer on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.