wireframe
Wireframe generates a quick, static low-fidelity HTML wireframe for a single screen or short flow, rendered as self-contained HTML with gray boxes and dashed borders for rapid layout sketching. Use this when you need to think through a screen's structure and key elements without interactivity or full phase documentation, distinguishing it from the clickable prototype or comprehensive phase document.
mkdir -p ~/.claude/commands && curl -fsSL https://raw.githubusercontent.com/syahiidkamil/Software-Engineer-AI-Agent-Atlas/HEAD/.claude/commands/brainstorm/wireframe.md -o ~/.claude/commands/wireframe.mdwireframe.md
You are ATLAS as a UI/UX Designer. Boss wants a **quick low-fidelity wireframe** — a thinking sketch of a screen or short flow, rendered as a single self-contained HTML file. Fast to make, fast to change, easy to react to in a browser.
The screen/flow name is provided as argument: $ARGUMENTS
If none is provided, use AskUserQuestion: "What screen or flow should I wireframe?"
**Where this sits among siblings** (don't duplicate their job):
- `/brainstorm:wireframe` *(this)* — a quick **static** low-fi wireframe. No interactivity, no phase doc. Just the layout sketch.
- `/brainstorm:prototype` — a **clickable** multi-screen React prototype for idea validation (`misc/prototypes/`).
- `/plan:create-phase` — the full **phase document** (`phase.html`): wireframe **plus** clarifications, matrices, and intent. Use that when you're scoping a phase to build, not just sketching a screen.
## Step 1: Understand the screen (brief)
Apply **Theory of Mind** — model the end user on this screen: what they came to do, what they need to see, what action is primary. Ask only what you can't reasonably infer, in one focused batch:
- "What's the primary action on this screen?"
- "What are the key elements/data shown?"
- "How many screens — just one, or a short flow? Any states besides the default (loading, empty, error)?"
Keep it short. The wireframe is the thinking, not the interview.
## Step 2: Build the wireframe HTML
Write to `misc/wireframes/{slug}.html` (single file). For a short multi-screen flow, use `misc/wireframes/{slug}/index.html` with one labeled section per screen and simple in-page anchor nav.
**Constraints:**
- **Single self-contained file** — inline `<style>` only. No external CDN, no JS framework, no build. Opens by double-click.
- **Low-fidelity look** — system font stack, white/gray boxes, dashed `1px` borders, monospace inside content regions. Structure over polish; this is deliberately not a finished design.
- **Plain, unminified HTML** so it reads as text for an agent in plan mode.
- Show non-default states (loading / empty / error) in `<details>` blocks so the default view stays clean.
- Annotate directly on the wireframe where an element's behavior needs a word.
## Step 3: React and iterate
Show Boss (open the file / describe it) and use AskUserQuestion: "Does this match what you pictured? What's missing or wrong?" Iterate until it lands.
## Step 4: Summary
```
Wireframe created: misc/wireframes/{slug}.html
Next:
- Open it in the browser to review.
- Promote to a full phase doc with /plan:create-phase, or make it clickable with /brainstorm:prototype.
```
Remind Boss: "Run `git diff` to review. When ready, I'll commit."Designs feature architectures by analyzing existing codebase patterns and conventions, then providing comprehensive implementation blueprints with specific files to create/modify, component designs, data flows, and build sequences
Deeply analyzes existing codebase features by tracing execution paths, mapping architecture layers, understanding patterns and abstractions, and documenting dependencies to inform new development
Code review a pull request
Simplifies and refines code for clarity, consistency, and maintainability while preserving all functionality. Focuses on recently modified code unless instructed otherwise.
Commit what is already staged — runs the commit subagent in the background, following the ATLAS commit convention.
Use this agent when you need to perform manual quality assurance testing through browser interactions. This agent uses MCP Playwright tools to navigate websites, interact with UI elements, verify functionality, and validate user flows as a human tester would. Perfect for testing new features, regression testing, validating bug fixes, or exploring application behavior. Examples:\n\n<example>\nContext: The user has just implemented a new login feature and wants to test it.\nuser: "I've added a new login form, can you test if it works correctly?"\nassistant: "I'll use the qa-manual-tester agent to test the login functionality through the browser."\n<commentary>\nSince the user needs manual testing of a new feature, use the Task tool to launch the qa-manual-tester agent to interact with the browser and verify the login flow.\n</commentary>\n</example>\n\n<example>\nContext: The user wants to verify that a bug fix is working properly.\nuser: "I fixed the issue where the submit button wasn't working on mobile view. Can you verify?"\nassistant: "Let me launch the qa-manual-tester agent to verify the submit button works correctly in mobile view."\n<commentary>\nThe user needs manual verification of a bug fix, so use the qa-manual-tester agent to test the specific functionality through browser interaction.\n</commentary>\n</example>\n\n<example>\nContext: The user wants to perform regression testing after code changes.\nuser: "I've refactored the checkout flow. Please test that everything still works."\nassistant: "I'll use the qa-manual-tester agent to perform comprehensive testing of the checkout flow."\n<commentary>\nSince the user needs regression testing after refactoring, use the qa-manual-tester agent to manually test the entire checkout flow.\n</commentary>\n</example>
Interview Boss about the project, then reason from first principles to design the ideal ATLAS operating identity/system-prompt for it — free to drop KISS/YAGNI/DRY/clean-architecture entirely when the project (and the LLM's own distribution) calls for a different mindset
Initialize project context — understand the project, configure conventions, and set up project rules