Skip to content

SKILL.md

Latest commit

 

History

History
218 lines (162 loc) · 7.28 KB

SKILL.md

File metadata and controls

218 lines (162 loc) · 7.28 KB
Raw
name stitch-delivery
description Complete 5-stage website delivery system using Stitch AI → Astro → WordPress. Orchestrates Setup, Discovery, Design, Development, and Deployment phases.

Stitch Delivery System

The complete AI-powered website factory.

Best Design. Great Code. Fast Delivery.

Architecture Overview

┌─────────────────────────────────────────────────────────────────┐
│                     STITCH DELIVERY SYSTEM                       │
├─────────────────────────────────────────────────────────────────┤
│                                                                  │
│  STAGE 0          STAGE 1          STAGE 2                      │
│  ┌──────────┐    ┌──────────┐    ┌──────────┐                  │
│  │  SETUP   │───▶│ DISCOVERY│───▶│  DESIGN  │                  │
│  │          │    │          │    │          │                  │
│  │ Install  │    │ Interview│    │ Stitch   │                  │
│  │ prereqs  │    │ Sitemap  │    │ Generate │                  │
│  │          │    │ Content  │    │ Extract  │                  │
│  └──────────┘    └──────────┘    └──────────┘                  │
│                                       │                         │
│                                       ▼                         │
│                  STAGE 4         STAGE 3                        │
│                 ┌──────────┐    ┌──────────┐                   │
│                 │  DEPLOY  │◀───│   DEV    │                   │
│                 │          │    │          │                   │
│                 │ Cloudflare│    │ Astro    │                   │
│                 │ WordPress│    │ WordPress│                   │
│                 │ Handoff  │    │ Integrate│                   │
│                 └──────────┘    └──────────┘                   │
│                                                                  │
└─────────────────────────────────────────────────────────────────┘

The 5 Stages

Stage Skill Purpose Time
0 stage-0-setup Install prerequisites, verify environment 15-30 min
1 stage-1-discovery Client interview, sitemap, content plan 1-2 hrs
2 stage-2-design Stitch layouts, design system, HTML export 2-4 hrs
3 stage-3-development Astro components, WordPress integration 4-8 hrs
4 stage-4-deploy Cloudflare, WordPress production, handoff 1-2 hrs

Total Project Time: 9-16 hours

Stage 0: Setup

Skill: stage-0-setup

Purpose: Prepare the development environment before starting any project work.

Checklist:

  • Node.js 18+ installed
  • Git installed
  • GitHub CLI authenticated
  • Cloudflare Wrangler accessible
  • Stitch MCP configured

Output: Ready development environment

Stage 1: Discovery & Planning

Skill: stage-1-discovery

Purpose: Understand what website to build, plan structure and content.

Activities:

  1. Interview - Business name, niche, location, audience
  2. Scope - Single page, compact, standard, or enterprise
  3. Sitemap - All pages and sections defined
  4. Content - Client provides or AI generates

Output: PROJECT.md with approved sitemap and content plan

Stage 2: Design Generation

Skill: stage-2-design

Purpose: Create all visual layouts using Stitch AI.

Activities:

  1. Create Stitch project
  2. Generate homepage with full design system
  3. Extract DESIGN.md from homepage
  4. Generate all pages using consistent design
  5. Export HTML to stitch-exports/

Output:

  • stitch.json (project tracking)
  • DESIGN.md (design system)
  • stitch-exports/*.html (all layouts)

Stage 3: Development

Skill: stage-3-development

Purpose: Transform Stitch HTML into production Astro site.

Activities:

  1. Initialize Astro with Tailwind
  2. Create layout from design system
  3. Extract components from Stitch HTML
  4. Build pages using components
  5. Integrate WordPress for blog/dynamic content
  6. Test locally

Output: Working Astro project in site/

Stage 4: Deployment

Skill: stage-4-deploy

Purpose: Deploy to production and hand off to client.

Activities:

  1. Production build
  2. Deploy to Cloudflare Pages
  3. Configure custom domain
  4. Set up WordPress production
  5. SEO configuration
  6. Client handoff with documentation

Output: Live website + client documentation

File Structure

project/
├── PROJECT.md              # Stage 1: Project overview, sitemap
├── DESIGN.md               # Stage 2: Design system
├── HANDOFF.md              # Stage 4: Client documentation
├── stitch.json             # Stage 2: Stitch project tracking
├── stitch-exports/         # Stage 2: Raw HTML from Stitch
│   ├── homepage.html
│   ├── about.html
│   └── ...
└── site/                   # Stage 3: Astro project
    ├── src/
    │   ├── components/
    │   ├── layouts/
    │   ├── lib/
    │   └── pages/
    ├── public/
    ├── dist/               # Stage 4: Production build
    └── package.json

Quick Reference

Start New Project

1. Run Stage 0 setup verification
2. Create project folder
3. Begin Stage 1 discovery interview

Stage Transitions

From To Gate
Stage 0 Stage 1 All prereqs verified
Stage 1 Stage 2 PROJECT.md approved
Stage 2 Stage 3 All HTML exported
Stage 3 Stage 4 Local testing passed
Stage 4 Complete Client handoff done

Tips for Success

  1. Complete each stage fully before moving to next
  2. Get approval at stage gates (especially Stage 1 sitemap)
  3. Use consistent design tokens from DESIGN.md throughout
  4. Test extensively in Stage 3 before deploying
  5. Document everything for client handoff

Sub-Skills

This skill contains 5 sub-skills:

.agent/skills/stitch-delivery/
├── SKILL.md                    # This file (orchestrator)
├── stage-0-setup/SKILL.md      # Prerequisites
├── stage-1-discovery/SKILL.md  # Planning
├── stage-2-design/SKILL.md     # Stitch generation
├── stage-3-development/SKILL.md # Astro development
└── stage-4-deploy/SKILL.md     # Deployment

Use individual stage skills for focused work, or this master skill for full project orchestration.