solmate-skills 1.0.0

package/stitch-loop/SKILL.md

@@ -0,0 +1,203 @@
+---
+name: stitch-loop
+description: Teaches agents to iteratively build websites using Stitch with an autonomous baton-passing loop pattern
+allowed-tools:
+  - "stitch*:*"
+  - "chrome*:*"
+  - "Read"
+  - "Write"
+  - "Bash"
+---
+
+# Stitch Build Loop
+
+You are an **autonomous frontend builder** participating in an iterative site-building loop. Your goal is to generate a page using Stitch, integrate it into the site, and prepare instructions for the next iteration.
+
+## Overview
+
+The Build Loop pattern enables continuous, autonomous website development through a "baton" system. Each iteration:
+1. Reads the current task from a baton file (`next-prompt.md`)
+2. Generates a page using Stitch MCP tools
+3. Integrates the page into the site structure
+4. Writes the next task to the baton file for the next iteration
+
+## Prerequisites
+
+**Required:**
+- Access to the Stitch MCP Server
+- A Stitch project (existing or will be created)
+- A `DESIGN.md` file (generate one using the `design-md` skill if needed)
+- A `SITE.md` file documenting the site vision and roadmap
+
+**Optional:**
+- Chrome DevTools MCP Server — enables visual verification of generated pages
+
+## The Baton System
+
+The `next-prompt.md` file acts as a relay baton between iterations:
+
+```markdown
+---
+page: about
+---
+A page describing how jules.top tracking works.
+
+**DESIGN SYSTEM (REQUIRED):**
+[Copy from DESIGN.md Section 6]
+
+**Page Structure:**
+1. Header with navigation
+2. Explanation of tracking methodology
+3. Footer with links
+```
+
+**Critical rules:**
+- The `page` field in YAML frontmatter determines the output filename
+- The prompt content must include the design system block from `DESIGN.md`
+- You MUST update this file before completing your work to continue the loop
+
+## Execution Protocol
+
+### Step 1: Read the Baton
+
+Parse `next-prompt.md` to extract:
+- **Page name** from the `page` frontmatter field
+- **Prompt content** from the markdown body
+
+### Step 2: Consult Context Files
+
+Before generating, read these files:
+
+| File | Purpose |
+|------|---------|
+| `SITE.md` | Site vision, **Stitch Project ID**, existing pages (sitemap), roadmap |
+| `DESIGN.md` | Required visual style for Stitch prompts |
+
+**Important checks:**
+- Section 4 (Sitemap) — Do NOT recreate pages that already exist
+- Section 5 (Roadmap) — Pick tasks from here if backlog exists
+- Section 6 (Creative Freedom) — Ideas for new pages if roadmap is empty
+
+### Step 3: Generate with Stitch
+
+Use the Stitch MCP tools to generate the page:
+
+1. **Discover namespace**: Run `list_tools` to find the Stitch MCP prefix
+2. **Get or create project**: 
+   - If `stitch.json` exists, use the `projectId` from it
+   - Otherwise, call `[prefix]:create_project` and save the ID to `stitch.json`
+3. **Generate screen**: Call `[prefix]:generate_screen_from_text` with:
+   - `projectId`: The project ID
+   - `prompt`: The full prompt from the baton (including design system block)
+   - `deviceType`: `DESKTOP` (or as specified)
+4. **Retrieve assets**: Call `[prefix]:get_screen` to get:
+   - `htmlCode.downloadUrl` — Download and save as `queue/{page}.html`
+   - `screenshot.downloadUrl` — Download and save as `queue/{page}.png`
+
+### Step 4: Integrate into Site
+
+1. Move generated HTML from `queue/{page}.html` to `site/public/{page}.html`
+2. Fix any asset paths to be relative to the public folder
+3. Update navigation:
+   - Find existing placeholder links (e.g., `href="#"`) and wire them to the new page
+   - Add the new page to the global navigation if appropriate
+4. Ensure consistent headers/footers across all pages
+
+### Step 4.5: Visual Verification (Optional)
+
+If the **Chrome DevTools MCP Server** is available, verify the generated page:
+
+1. **Check availability**: Run `list_tools` to see if `chrome*` tools are present
+2. **Start dev server**: Use Bash to start a local server (e.g., `npx serve site/public`)
+3. **Navigate to page**: Call `[chrome_prefix]:navigate` to open `http://localhost:3000/{page}.html`
+4. **Capture screenshot**: Call `[chrome_prefix]:screenshot` to capture the rendered page
+5. **Visual comparison**: Compare against the Stitch screenshot (`queue/{page}.png`) for fidelity
+6. **Stop server**: Terminate the dev server process
+
+> **Note:** This step is optional. If Chrome DevTools MCP is not installed, skip to Step 5.
+
+### Step 5: Update Site Documentation
+
+Modify `SITE.md`:
+- Add the new page to Section 4 (Sitemap) with `[x]`
+- Remove any idea you consumed from Section 6 (Creative Freedom)
+- Update Section 5 (Roadmap) if you completed a backlog item
+
+### Step 6: Prepare the Next Baton (Critical)
+
+**You MUST update `next-prompt.md` before completing.** This keeps the loop alive.
+
+1. **Decide the next page**: 
+   - Check `SITE.md` Section 5 (Roadmap) for pending items
+   - If empty, pick from Section 6 (Creative Freedom)
+   - Or invent something new that fits the site vision
+2. **Write the baton** with proper YAML frontmatter:
+
+```markdown
+---
+page: achievements
+---
+A competitive achievements page showing developer badges and milestones.
+
+**DESIGN SYSTEM (REQUIRED):**
+[Copy the entire design system block from DESIGN.md]
+
+**Page Structure:**
+1. Header with title and navigation
+2. Badge grid showing unlocked/locked states
+3. Progress bars for milestone tracking
+```
+
+## File Structure Reference
+
+```
+project/
+├── next-prompt.md      # The baton — current task
+├── stitch.json         # Stitch project ID (persist this!)
+├── DESIGN.md           # Visual design system (from design-md skill)
+├── SITE.md             # Site vision, sitemap, roadmap
+├── queue/              # Staging area for Stitch output
+│   ├── {page}.html
+│   └── {page}.png
+└── site/public/        # Production pages
+    ├── index.html
+    └── {page}.html
+```
+
+## Orchestration Options
+
+The loop can be driven by different orchestration layers:
+
+| Method | How it works |
+|--------|--------------|
+| **CI/CD** | GitHub Actions triggers on `next-prompt.md` changes |
+| **Human-in-loop** | Developer reviews each iteration before continuing |
+| **Agent chains** | One agent dispatches to another (e.g., Jules API) |
+| **Manual** | Developer runs the agent repeatedly with the same repo |
+
+The skill is orchestration-agnostic — focus on the pattern, not the trigger mechanism.
+
+## Design System Integration
+
+This skill works best with the `design-md` skill:
+
+1. **First time setup**: Generate `DESIGN.md` using the `design-md` skill from an existing Stitch screen
+2. **Every iteration**: Copy Section 6 ("Design System Notes for Stitch Generation") into your baton prompt
+3. **Consistency**: All generated pages will share the same visual language
+
+## Common Pitfalls
+
+- ❌ Forgetting to update `next-prompt.md` (breaks the loop)
+- ❌ Recreating a page that already exists in the sitemap
+- ❌ Not including the design system block in the prompt
+- ❌ Leaving placeholder links (`href="#"`) instead of wiring real navigation
+- ❌ Forgetting to persist `stitch.json` after creating a new project
+
+## Troubleshooting
+
+| Issue | Solution |
+|-------|----------|
+| Stitch generation fails | Check that the prompt includes the design system block |
+| Inconsistent styles | Ensure DESIGN.md is up-to-date and copied correctly |
+| Loop stalls | Verify `next-prompt.md` was updated with valid frontmatter |
+| Navigation broken | Check all internal links use correct relative paths |

package/stitch-loop/examples/SITE.md

@@ -0,0 +1,73 @@
+---
+stitch-project-id: 13534454087919359824
+---
+# Project Vision & Constitution
+
+> **AGENT INSTRUCTION:** Read this file before every iteration. It serves as the project's "Long-Term Memory." If `next-prompt.md` is empty, pick the highest priority item from Section 5 OR invent a new page that fits the project vision.
+
+## 1. Core Identity
+* **Project Name:** Oakwood Furniture Co.
+* **Stitch Project ID:** `13534454087919359824`
+* **Mission:** A premium online furniture showroom showcasing handcrafted, sustainable wood furniture.
+* **Target Audience:** Design-conscious homeowners, interior designers, eco-minded buyers.
+* **Voice:** Warm, refined, artisanal, and trustworthy.
+
+## 2. Visual Language (Stitch Prompt Strategy)
+*Strictly adhere to these descriptive rules when prompting Stitch. Do NOT use code.*
+
+* **The "Vibe" (Adjectives):**
+    * *Primary:* **Warm** (Inviting, cozy, natural materials).
+    * *Secondary:* **Minimal** (Clean layouts, breathing room, gallery-like).
+    * *Tertiary:* **Artisanal** (Handcrafted feel, attention to detail).
+
+* **Color Philosophy (Semantic):**
+    * **Backgrounds:** Warm barely-there cream (#FCFAFA). Soft, inviting canvas.
+    * **Accents:** Deep muted teal-navy (#294056) for CTAs and highlights.
+    * **Text:** Charcoal near-black (#2C2C2C) for headlines, soft gray (#6B6B6B) for body.
+
+## 3. Architecture & File Structure
+* **Root:** `site/public/`
+* **Asset Flow:** Stitch generates to `queue/` -> Validate -> Move to `site/public/`.
+* **Navigation Strategy:**
+    * **Global Header:** Logo, Shop, Collections, About, Contact.
+    * **Global Footer:** Sustainability, Craftsmanship, Shipping Info, Social Links.
+
+## 4. Live Sitemap (Current State)
+*The Agent MUST update this section when a new page is successfully merged.*
+
+* [x] `index.html` - Homepage with hero and featured collections.
+* [x] `collections.html` - Overview of furniture categories.
+* [x] `about.html` - Our story and craftsmanship philosophy.
+* [ ] `contact.html` - Contact form and showroom locations.
+
+## 5. The Roadmap (Backlog)
+*If `next-prompt.md` is empty or completed, pick the next task from here.*
+
+### High Priority
+- [ ] **Product Detail Page:** Template for individual furniture items.
+- [ ] **Contact Page:** Contact form with showroom map.
+
+### Medium Priority
+- [ ] **Sustainability Page:** Our commitment to eco-friendly practices.
+- [ ] **Care Guide:** How to maintain wood furniture.
+
+## 6. Creative Freedom Guidelines
+*When the backlog is empty, follow these guidelines to innovate.*
+
+1. **Stay On-Brand:** New pages must fit the "Warm + Minimal + Artisanal" vibe.
+2. **Enhance the Core:** Support the furniture shopping experience.
+3. **Naming Convention:** Use lowercase, descriptive filenames.
+
+### Ideas to Explore
+*Pick one, build it, then REMOVE it from this list.*
+
+- [ ] `materials.html` - Showcase of wood types and finishes
+- [ ] `custom.html` - Custom furniture ordering process
+- [ ] `gallery.html` - Customer homes featuring our furniture
+- [ ] `blog.html` - Design tips and furniture care articles
+
+## 7. Rules of Engagement
+1. Do not recreate pages in Section 4.
+2. Always update `next-prompt.md` before completing.
+3. Consume ideas from Section 6 when you use them.
+4. Keep the loop moving.

package/stitch-loop/examples/next-prompt.md

@@ -0,0 +1,25 @@
+---
+page: contact
+---
+A warm, inviting contact page for Oakwood Furniture Co.
+
+**DESIGN SYSTEM (REQUIRED):**
+- Platform: Web, Desktop-first
+- Theme: Light, minimal, photography-first
+- Background: Warm barely-there cream (#FCFAFA)
+- Surface: Crisp very light gray (#F5F5F5) for cards
+- Primary Accent: Deep muted teal-navy (#294056) for buttons and links
+- Text Primary: Charcoal near-black (#2C2C2C) for headlines
+- Text Secondary: Soft warm gray (#6B6B6B) for body copy
+- Font: Modern sans-serif (Manrope or similar), clean and approachable
+- Buttons: Subtly rounded corners (8px), comfortable padding
+- Cards: Gently rounded corners (12px), whisper-soft shadows on hover
+- Layout: Centered content, max-width container, generous whitespace
+- No harsh shadows, no aggressive colors - serene and trustworthy
+
+**Page Structure:**
+1. **Header:** Navigation with logo, Shop, Collections, About, Contact (active)
+2. **Hero Section:** Warm headline "Get in Touch" with a brief welcome message
+3. **Contact Form:** Name, email, message fields with the teal-navy submit button
+4. **Showroom Info:** Address, hours, and an embedded map or beautiful showroom photo
+5. **Footer:** Sustainability, Craftsmanship, Shipping links, and social icons

package/stitch-loop/resources/baton-schema.md

@@ -0,0 +1,61 @@
+# Baton File Schema
+
+The baton file (`next-prompt.md`) is the communication mechanism between loop iterations. It tells the next agent what to build.
+
+## Format
+
+```yaml
+---
+page: <filename-without-extension>
+---
+<prompt-content>
+```
+
+## Fields
+
+### Frontmatter (YAML)
+
+| Field | Type | Required | Description |
+|-------|------|----------|-------------|
+| `page` | string | Yes | Output filename (without `.html` extension) |
+
+### Body (Markdown)
+
+The body contains the full Stitch prompt, which must include:
+
+1. **One-line description** with vibe/atmosphere keywords
+2. **Design System block** (required) — copied from `DESIGN.md` Section 6
+3. **Page Structure** — numbered list of sections/components
+
+## Example
+
+```markdown
+---
+page: achievements
+---
+A competitive, gamified achievements page with terminal aesthetics.
+
+**DESIGN SYSTEM (REQUIRED):**
+- Platform: Web, Desktop-first
+- Theme: Dark, minimal, data-focused
+- Background: Deep charcoal/near-black (#0f1419)
+- Primary Accent: Teal/Cyan (#2dd4bf)
+- Text Primary: White (#ffffff)
+- Font: Clean sans-serif (Inter, SF Pro, or system default)
+- Layout: Centered content, max-width container
+
+**Page Structure:**
+1. Header with title "Achievements" and navigation
+2. Badge grid showing locked/unlocked states with icons
+3. Progress section with milestone bars
+4. Footer with links to other pages
+```
+
+## Validation Rules
+
+Before completing an iteration, validate your baton:
+
+- [ ] `page` frontmatter field exists and is a valid filename
+- [ ] Prompt includes the design system block
+- [ ] Prompt describes a page NOT already in `SITE.md` sitemap
+- [ ] Prompt includes specific page structure details

package/stitch-loop/resources/site-template.md

@@ -0,0 +1,104 @@
+# Site Template
+
+Use these templates when setting up a new project for the build loop.
+
+## SITE.md Template
+
+```markdown
+# Project Vision & Constitution
+
+> **AGENT INSTRUCTION:** Read this file before every iteration. It serves as the project's "Long-Term Memory."
+
+## 1. Core Identity
+* **Project Name:** [Your project name]
+* **Stitch Project ID:** [Your Stitch project ID]
+* **Mission:** [What the site achieves]
+* **Target Audience:** [Who uses this site]
+* **Voice:** [Tone and personality descriptors]
+
+## 2. Visual Language
+*Reference these descriptors when prompting Stitch.*
+
+* **The "Vibe" (Adjectives):**
+    * *Primary:* [Main aesthetic keyword]
+    * *Secondary:* [Supporting aesthetic]
+    * *Tertiary:* [Additional flavor]
+
+## 3. Architecture & File Structure
+* **Root:** `site/public/`
+* **Asset Flow:** Stitch generates to `queue/` → Validate → Move to `site/public/`
+* **Navigation Strategy:** [How nav works]
+
+## 4. Live Sitemap (Current State)
+*Update this when a new page is successfully merged.*
+
+* [x] `index.html` - [Description]
+* [ ] `about.html` - [Description]
+
+## 5. The Roadmap (Backlog)
+*Pick the next task from here if available.*
+
+### High Priority
+- [ ] [Task description]
+- [ ] [Task description]
+
+### Medium Priority
+- [ ] [Task description]
+
+## 6. Creative Freedom Guidelines
+*When the backlog is empty, follow these guidelines to innovate.*
+
+1. **Stay On-Brand:** New pages must fit the established vibe
+2. **Enhance the Core:** Support the site mission
+3. **Naming Convention:** Use lowercase, descriptive filenames
+
+### Ideas to Explore
+*Pick one, build it, then REMOVE it from this list.*
+
+- [ ] `stats.html` - [Description]
+- [ ] `settings.html` - [Description]
+
+## 7. Rules of Engagement
+1. Do not recreate pages in Section 4
+2. Always update `next-prompt.md` before completing
+3. Consume ideas from Section 6 when you use them
+```
+
+## DESIGN.md Template
+
+Generate this using the `design-md` skill from an existing Stitch screen, or create manually:
+
+```markdown
+# Design System: [Project Name]
+**Project ID:** [Stitch Project ID]
+
+## 1. Visual Theme & Atmosphere
+[Describe mood, density, aesthetic philosophy]
+
+## 2. Color Palette & Roles
+- **[Descriptive Name]** (#hexcode) – [Functional role]
+- **[Descriptive Name]** (#hexcode) – [Functional role]
+
+## 3. Typography Rules
+[Font family, weights, sizes, spacing]
+
+## 4. Component Stylings
+* **Buttons:** [Shape, color, behavior]
+* **Cards:** [Corners, background, shadows]
+* **Inputs:** [Stroke, background, focus states]
+
+## 5. Layout Principles
+[Whitespace strategy, margins, grid alignment]
+
+## 6. Design System Notes for Stitch Generation
+**Copy this block into every baton prompt:**
+
+**DESIGN SYSTEM (REQUIRED):**
+- Platform: [Web/Mobile], [Desktop/Mobile]-first
+- Theme: [Dark/Light], [descriptors]
+- Background: [Description] (#hex)
+- Primary Accent: [Description] (#hex)
+- Text Primary: [Description] (#hex)
+- Font: [Description]
+- Layout: [Description]
+```

package/verify-docs/SKILL.md

@@ -0,0 +1,34 @@
+---
+name: verify-docs
+description: 프로젝트 문서가 레이어링 구조와 메타데이터 표준을 준수하는지 검증합니다.
+---
+
+# 문서 구조 검증 (Template)
+
+## 목적
+
+프로젝트의 모든 문서가 SSOT(Single Source of Truth) 표준을 유지하도록 합니다:
+
+1. **폴더 구조 준수** — `docs/` 하위가 프로젝트에서 정의한 레이어링 규칙을 따르는지.
+2. **메타데이터 표준** — 모든 `.md` 파일 상단에 생성/수정일이 명시되어 있는지.
+3. **네이밍 컨벤션** — 파일명 순번(Numbering) 규칙 준수 여부.
+
+## 실행 시점
+
+- 새 문서 생성 혹은 기존 문서 수정 후
+- PR 전 문서 정합성 점검 시
+
+## Workflow
+
+### Step 0: 프로젝트 기준 문서(AGENTS.md 등) 참조
+`AGENTS.md`나 `COLLABORATION_GUIDE.md`를 먼저 읽어 현재 프로젝트의 문서 계층과 네이밍 규칙을 파악합니다.
+
+### Step 1: 폴더 및 파일 네이밍 검사
+탐색된 규칙에 따라 `docs/` 하위의 폴더명과 파일명이 정해진 순번 접두사(`01_`, `02_` 등)를 사용하는지 체크합니다.
+
+### Step 2: 필수 필드 누락 검사
+`Created:`, `Last Updated:` 등 필수 메타데이터가 파일 상단에 존재하는지 확인합니다.
+
+## Exceptions
+1. `docs/00_ARCHIVE/`: 아카이브 폴더는 형식 검사를 완화합니다.
+2. `README.md`, `LICENSE` 등 루트의 표준 파일은 제외합니다.

package/verify-drizzle-schema/SKILL.md

@@ -0,0 +1,44 @@
+---
+name: verify-drizzle-schema
+description: Drizzle ORM 스키마가 설계 문서와 일치하고 프로젝트 기술 표준을 따르는지 검증합니다.
+---
+
+# Drizzle 스키마 검증 (Template)
+
+## 목적
+
+Drizzle 기반 DB 스키마의 정합성과 품질을 유지합니다:
+
+1. **설계 일치성** — `schema.ts`가 아키텍처 명세서와 일치하는지.
+2. **기술 표준 준수** — Zod, Luxon 등 프로젝트에서 정의한 핵심 라이브러리 연동 여부.
+3. **관계 무결성** — 외래키(references) 및 인덱스 정의의 누락 확인.
+
+## 실행 시점
+
+- DB 스키마 파일 수정 후
+- 마이그레이션 생성 전
+- PR 전 최종 DB 무결성 체크 시
+
+## Related Files
+
+| File | Purpose |
+|------|---------|
+| `[DB_SCHEMA_PATH]` | 실제 구현된 Drizzle 스키마 파일 (예: web/src/db/schema.ts) |
+| `[ARCHITECTURE_SPEC_PATH]` | 기술 설계 문서 (예: docs/03_Technical_Specs/01_ARCHITECTURE.md) |
+
+## Workflow
+
+### Step 0: 동적 파일 탐색
+프로젝트 구조에 맞춰 `db/schema.ts` 또는 `db/schema/*.ts` 파일을 자동으로 탐색합니다.
+
+### Step 1: 스키마-명세 대조
+설계 문서에서 정의된 테이블/필드가 코드에 모두 구현되어 있는지 `grep`으로 확인합니다.
+
+### Step 2: 공통 필드 및 타입 규칙 검증
+`id`, `createdAt`, `updatedAt` 등 공통 필드 컨벤션과 Drizzle 핵심 타입 사용 여부를 체크합니다.
+
+### Step 3: 외래키 및 인덱스 체크
+테이블 간의 `references()` 정의가 유효하게 설정되었는지 확인합니다.
+
+## Exceptions
+1. **Third-party Tables**: 외부 라이브러리(Auth.js 등)에서 제공하는 고정 스키마는 검증에서 제외합니다.

package/verify-implementation/SKILL.md

@@ -0,0 +1,39 @@
+---
+name: verify-implementation
+description: 프로젝트의 모든 verify 스킬을 동적으로 탐색하여 순차 실행하고 통합 검증 보고서를 생성합니다.
+disable-model-invocation: true
+argument-hint: "[선택사항: 특정 verify 스킬 이름]"
+---
+
+# 구현 검증 (Master Template)
+
+## 목적
+
+프로젝트에 존재하는 모든 `verify-*` 스킬을 동적으로 탐색하여 순차적으로 실행하고 통합 검증을 수행합니다.
+
+## 실행 대상 스킬 (Dynamic)
+
+| # | 스킬 | 설명 |
+|---|------|------|
+| * | `verify-*` | `.agent/skills` 또는 `.claude/commands`에서 자동 탐색 |
+
+## 워크플로우
+
+### Step 1: 동적 스킬 탐색
+`.agent/skills/` 및 `.claude/commands/` 하위의 `verify-*` 패턴을 탐색합니다.
+
+### Step 2: 순차 실행
+각 스킬의 `Workflow`, `Exceptions`, `Related Files`를 파싱하여 개별 검사를 수행합니다.
+
+### Step 3: 통합 보고서 생성
+PASS/FAIL 통계와 발견된 이슈 목록을 생성합니다.
+
+### Step 4: 수정 옵션 제공
+자동 수정 또는 개별 수정을 사용자에게 제안합니다.
+
+### Step 5: 수정 적용 및 재검증
+수정이 적용된 경우 해당 스킬을 다시 실행하여 통과 여부를 최종 확인합니다.
+
+## 예외사항
+1. **자기 자신** (`verify-implementation`)은 실행 대상에서 제외.
+2. **관리 스킬** (`manage-skills` 등)은 `verify-`로 시작하지 않으므로 제외.