関連職種SOC
SOC 職業分類に基づく
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/CleanExpo/NodeJS-Starter-V1 --skill blueprint-firstコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？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
SKILL.md を表示中
SOC 職業分類に基づく
| 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.