القائمة
">"
يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.
اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.
استنادا إلى تصنيف SOC المهني
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
يتجاوز الأمر المباشر Prompt المخصّص للمراجعة. افحص المصدر قبل تشغيله.
npx skills add https://github.com/CleanExpo/NodeJS-Starter-V1 --skill blueprint-firstيبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.
تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى SkillsMP.
عرض SKILL.md
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
| 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.