Imported from imbue-ai/bouncer (.claude/skills/create-html-mock/SKILL.md). Install upstream with npx skills add imbue-ai/bouncer --skill create-html-mock. Copyright stays with the author.

Create HTML Mock

You are helping the user explore and refine a feature idea through HTML mocks.

Initial Setup

1. Understand the feature: Read the user's description provided below. Review for inconsistencies, gaps, or potential enhancements. If anything is unclear or ambiguous, ask clarifying questions before proceeding.

2. Propose a feature name: Based on the description, propose a short 2-3 word feature name (lowercase, hyphenated). Confirm this name with the user before proceeding.

3. Create the feature folder automatically: Use mkdir -p docs/<feature-name> to create the directory (this is safe if it already exists). Then create:

   • docs/<feature-name>/mocks.context.md - for tracking context (only if it doesn't already exist)

4. Initialize the context file (only if newly created) with this structure:

   # <Feature Name> - Mock Context
   
   ## Original Description
   <paste the user's original description here>
   
   ## Clarifying Q&A
   <record any clarifying questions and answers here>
   
   ## UI Tweaks Log
   <record all UI feedback and tweaks requested during iteration>

Creating the Mocks

5. Generate HTML mocks that demonstrate the feature:

   • Make sure it matches the look and feel of the project's existing UI
   • In a single html file, create multiple mocks showing the various requested scenarios/states
   • Label each one, and also provide a short description of the scenario it is demonstrating
   • Always show the new UI elements within the context of a realistic application window. Don't guess at what the app looks like. Read the UI code and create a close approximation.
   • Include realistic sample data

6. Never delete previous mocks: Always create a new file for each iteration (e.g., mocks.html, mocks-v2.html, mocks-v3.html, or use descriptive names). Previous mock files must be preserved.

7. Always open the HTML file: After writing a mock file, always run open <path-to-file> to open it in the user's browser.

During Iteration

As the user provides feedback on the mocks:

8. Log every UI tweak: Whenever the user requests a change to the mocks, update the "UI Tweaks Log" section in mocks.context.md with:

   • What was requested
   • What was changed

   At the end of each response where you make changes, note: (Logged: [brief description of change])

9. Keep the context file current: This log will be used later to extract requirements, so be thorough.

User's Feature Description

$ARGUMENTS