Menu
">"
The review-first prompt is selected by default. You can switch to a direct command or download a local copy.
Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
A direct command skips the review prompt. Inspect the source before running it.
npx skills add https://github.com/CleanExpo/NodeJS-Starter-V1 --skill blueprint-firstThe command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
Route complex requests to the right specialist agent or chain of agents. This skill acts as the central brain of an agent swarm โ it analyses what the user needs, determines which specialist domain(s) are required, and coordinates parallel or sequential agent execution. Use this skill when a request spans multiple domains (e.g., "research competitors and create a pitch deck"), when you need to decide which specialist should handle an ambiguous request, or when a task requires a multi-step pipeline across different skills. Triggers on: multi-step requests, cross-domain tasks, "coordinate", "plan this out", "I need help with multiple things", or any complex request that touches more than one specialist area. Also triggers when the user seems unsure which tool or approach to use.
>-
Hybrid DAG execution primitive combining deterministic and agentic nodes with hard iteration caps
Showing SKILL.md
Based on SOC occupation classification
| id | blueprint-first |
| name | blueprint-first |
| type | rigid |
| version | 1.0.0 |
| created | 20/03/2026 |
| modified | 20/03/2026 |
| status | active |
| triggers | ["build a dashboard","create a landing page","design the UI","add a page","build the frontend","create the database schema","design the architecture","build a slide deck","create a layout","add a screen"] |
| description | > |
| context | fork |
Mandate: No code is written until an ASCII blueprint has been generated, reviewed, and accepted. Dead code and incorrect layouts are eliminated at the planning stage, not the review stage.
Locale: en-AU โ colour, behaviour, optimisation, organised, licence (noun).
This is a rigid skill. The workflow must be followed exactly.
Step 1: GENERATE
โ Produce ASCII blueprint for the requested component
โ No code written yet
Step 2: ITERATE
โ Present blueprint to user
โ Accept feedback and revise blueprint
โ Repeat until user confirms: "approved" / "looks good" / "build it"
โ No code written until explicit approval
Step 3: CONVERT
โ Translate accepted blueprint into an implementation spec
โ Spec includes: components, props, data flow, states, layout constraints
Step 4: BUILD
โ Write code from the spec
โ Code must match the blueprint exactly
โ Flag any deviation from blueprint as a decision point
Use box-drawing characters. Always annotate components.
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ HEADER โ
โ โโโโโโโโโโโโโโโโโโโโโโโโ โโโโโโโโโโโโโโโโโโโโโโโ โ
โ โ Logo + Nav โ โ Auth CTA โ โ
โ โโโโโโโโโโโโโโโโโโโโโโโโ โโโโโโโโโโโโโโโโโโโโโโโ โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโค
โ HERO โ
โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ โ H1: [Primary Headline] โโ
โ โ p: [Supporting copy โ 2 lines max] โโ
โ โ [CTA Button] [Secondary CTA] โโ
โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโค
โ FEATURES (3-column grid) โ
โ โโโโโโโโโโโโโโโ โโโโโโโโโโโโโโโ โโโโโโโโโโโโโโโ โ
โ โ Icon โ โ Icon โ โ Icon โ โ
โ โ Feature 1 โ โ Feature 2 โ โ Feature 3 โ โ
โ โ description โ โ description โ โ description โ โ
โ โโโโโโโโโโโโโโโ โโโโโโโโโโโโโโโ โโโโโโโโโโโโโโโ โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ SIDEBAR โ MAIN CONTENT AREA โ
โ โโโโโโโโโโโโโโโ โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
โ โ Nav Item 1 โ โ โ STATS ROW โ โ
โ โ Nav Item 2 โ โ โ โโโโโโโโโโโโโโโโโโโโโโโโ โ โ
โ โ Nav Item 3 โ โ โ โStat 1โโStat 2โโStat 3โ โ โ
โ โ Nav Item 4* โ โ โ โโโโโโโโโโโโโโโโโโโโโโโโ โ โ
โ โ โ โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโค โ
โ โ [Logout] โ โ โ DATA TABLE / CHART โ โ
โ โโโโโโโโโโโโโโโ โ โ [Content area] โ โ
โ โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
* = active state
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ CLIENT LAYER โ
โ โโโโโโโโโโโโโโโโโโโ โโโโโโโโโโโโโโโโโโโ โ
โ โ Next.js 15 โ โ Mobile (future) โ โ
โ โ apps/web/ โ โ โ โ
โ โโโโโโโโโโฌโโโโโโโโโ โโโโโโโโโโฌโโโโโโโโโ โ
โ โ โ โ
โโโโโโโโโโโโโผโโโโโโโโโโโโโโโโโโโโโโโผโโโโโโโโโโโโโโโโโโโโโโโโโค
โ API GATEWAY โ
โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ
โ โ FastAPI | /api/auth | /api/agents | /api/* โ โ
โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโฌโโโโโโโโโโโโโโโโโโโโโโโโ โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโผโโโโโโโโโโโโโโโโโโโโโโโโโโโค
โ SERVICE LAYER โ
โ โโโโโโโโโโโโโโโโ โโโโโโโโโโโโโโโโ โโโโโโโโโโโโโโโโ โ
โ โ Auth Serviceโ โ AI Agents โ โ Data Serviceโ โ
โ โ jwt.py โ โ LangGraph โ โ โ โ
โ โโโโโโโโโโโโโโโโ โโโโโโโโโโโโโโโโ โโโโโโโโฌโโโโโโโโ โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโผโโโโโโโโโโโโค
โ DATA LAYER โ
โ โโโโโโโโโโโโโโโโโโโโโโโโ โโโโโโโโโโโโโโโโโโโโโโโโ โ
โ โ PostgreSQL โ โ Redis (cache) โ โ
โ โโโโโโโโโโโโโโโโโโโโโโโโ โโโโโโโโโโโโโโโโโโโโโโโโ โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โโโโโโโโโโโโโโโโโโโโโโโ โโโโโโโโโโโโโโโโโโโโโโโ
โ users โ โ sessions โ
โโโโโโโโโโโโโโโโโโโโโโโค โโโโโโโโโโโโโโโโโโโโโโโค
โ id UUID PK โโโโโ โ id UUID PK โ
โ email TEXT โ โ โ user_id UUID FK โโโโบusers.id
โ password TEXT โ โ โ token TEXT โ
โ role TEXT โ โโโโโโ expires_at TIMESTAMPโ
โ created_at TIMESTAMPโ โ created_at TIMESTAMPโ
โโโโโโโโโโโโโโโโโโโโโโโ โโโโโโโโโโโโโโโโโโโโโโโ
Every blueprint must include:
*, [loading], [empty], [error]โ, โ, โผ, โฒ for data direction[CYAN accent], [OLED background])After blueprint approval, generate a spec in this format:
## Implementation Spec: [Component Name]
### Layout
- [Description of layout derived from blueprint]
- Breakpoints: [desktop / tablet / mobile behaviour]
### Components Required
- [ComponentA] โ [purpose]
- [ComponentB] โ [purpose]
### Props / Interface
```typescript
interface [ComponentName]Props {
[prop]: [type]; // [description]
}
```
---
## Approval Phrases
The skill waits for explicit approval before proceeding to Step 3 (Convert) and Step 4 (Build).
Accept these as approval:
- "approved"
- "looks good"
- "build it"
- "go ahead"
- "that's right"
- "yes"
- "correct"
- "perfect"
Do NOT proceed if the user says:
- "not quite"
- "change X"
- "move X to Y"
- "that's wrong"
- Any feedback suggesting revision is needed
---
## Scope Boundaries
**Blueprint First applies to**:
- Page layouts (landing pages, dashboards, settings pages, onboarding flows)
- UI components with complex layout (navigation, data tables, modals, forms)
- System architecture diagrams
- Database schemas
- Agent/workflow graphs
- Slide decks or report layouts
**Blueprint First does NOT apply to**:
- Small utility functions with no visual output
- API endpoint logic with no frontend impact
- Bug fixes to existing components (unless the fix requires layout changes)
- Config file changes
- Test files
---
## Integration Points
- **Outcome Translator**: If an outcome plan includes build steps, invoke Blueprint First before each build phase
- **Council of Logic**: Von Neumann architecture review happens during the Convert step (Step 3)
- **Design System**: All blueprints must use `rounded-sm`, OLED Black backgrounds, and spectral colours per `docs/DESIGN_SYSTEM.md`
- **Genesis Hive Mind**: Blueprint First is the `TITAN_DESIGN` activation pathway
---
## Example
**User says**: "Build the analytics dashboard"
**Skill invoked**: blueprint-first
**Step 1 output**:
BLUEPRINT: Analytics Dashboard โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
DESKTOP LAYOUT โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ HEADER [OLED BG] โ โ โโโโโโโโโโโโโโโโโโ โโโโโโโโโโโโโโโโโโโโโโโโ โ โ โ Logo โ โ User menu [Logout] โ โ โ โโโโโโโโโโโโโโโโโโ โโโโโโโโโโโโโโโโโโโโโโโโ โ โโโโโโโโโโโโฌโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโค โ SIDEBAR โ MAIN CONTENT โ โ โ โโโโโโโโ โโโโโโโโ โโโโโโโโ โโโโโโโโ โ โ Overview*โ โTotal โ โ MRR โ โ MAU โ โChurn โ โ โ Revenue โ โUsers โ โ$0.00 โ โ 0 โ โ 0% โ โ โ Users โ โ 0 โ โ[GRN] โ โ[CYN] โ โ[RED] โ โ โ Events โ โโโโโโโโ โโโโโโโโ โโโโโโโโ โโโโโโโโ โ โ Settings โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ โ โ โ REVENUE CHART (last 30 days) โ โ โ [v1.0.0] โ โ [Line chart โ Framer Motion anim] โ โ โ โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ โ โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ โ โ โ RECENT EVENTS TABLE โ โ โ โ โ Date | User | Event | Amount โ โ โ โ โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ โ โ โ โ [row] [row] [row] [row] โ โ โ โ โ [Pagination] โ โ โ โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ โโโโโโโโโโโโดโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
COLOUR NOTES
MOBILE LAYOUT (stacked) Header โ Stats (2-column grid) โ Chart โ Table (scrollable) Sidebar collapses to bottom nav bar
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ Does this layout match your vision? Reply "approved" to generate the implementation spec, or describe what you'd like changed.