관련 직업SOC
SOC 직업 분류 기준
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
직접 명령은 검토 Prompt를 거치지 않습니다. 실행하기 전에 소스를 확인하세요.
npx skills add https://github.com/CleanExpo/NodeJS-Starter-V1 --skill blueprint-first명령은 한 줄로 유지됩니다. 복사하기 전에 가로로 스크롤해 전체 내용을 확인하세요.
로컬 사본을 원하시나요? SkillsMP에서 현재 제공할 수 있는 파일을 다운로드하세요.
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.