Intent Discovery -> Design Genome -> Decision Graph -> Capability Graph -> Task DAG -> Specialist Agents -> Automated QA

flowchart TB
    subgraph ClientLayer ["Client & IDE Integration"]
        Cursor["Cursor IDE"]
        Claude["Claude Desktop & Claude Code"]
        Antigravity["Google Antigravity & Gemini"]
        Codex["VS Code / Codex / Custom Agents"]
    end

    subgraph Protocol ["Transport Layer"]
        JSONRPC["Model Context Protocol (JSON-RPC 2.0 over Stdio)"]
        SkillsShim["Native Skills Runtime (SKILL.md)"]
    end

    subgraph PixassoCore ["Pixasso Engine"]
        Discovery["Adaptive Intent Discovery Matrix"]
        Genome["Design Genome Engine (YAML + Brain)"]
        TaskDAG["Dependency-Aware Task DAG"]
        Orchestrator["Specialist Agent Dispatcher"]
    end

    subgraph KnowledgeHub ["Curated Knowledge Catalogs"]
        Pillars["16 Frontend Architecture Pillars"]
        TypeSpec["Typography Systems & Variable Fonts"]
        MotionSpec["Motion Choreography & Spring Physics"]
        SensorySpec["Web Audio API UISFX Engine"]
        QASpec["Multi-Viewport & DOM Overflow Verification"]
    end

    subgraph Specialists ["Specialist Agent Roles"]
        ArtDir["Art Director"]
        UXArch["UX Architect"]
        TypeDir["Typography Director"]
        FrontArch["Frontend Architect"]
        QAEng["Interface QA Engineer"]
    end

    subgraph Delivery ["Shipped Artifacts"]
        Site["pixasso.erebuzzz.tech"]
        CodeProd["Production Component Code"]
        DesignBrain["Graphify Design Brain (.md)"]
        TestPlan["Operational Test Plan (.md)"]
    end

    ClientLayer --> Protocol
    Protocol --> PixassoCore
    PixassoCore <--> KnowledgeHub
    PixassoCore --> Specialists
    Specialists --> Delivery

flowchart LR
    A["Intent Discovery<br/>(ask_question)"] --> B["Design Genome<br/>(Tokens & Modes)"]
    B --> C["Design Brain<br/>(Mermaid Graph)"]
    C --> D["Reference Analysis<br/>(Benchmarks)"]
    D --> E["Task DAG<br/>(Dependencies)"]
    E --> F["Specialist Agents<br/>(Code & Motion)"]
    F --> G["Interface Testing<br/>(Multi-Viewport QA)"]
    G --> H["Final Verification<br/>(Shipped UI)"]

sequenceDiagram
    autonumber
    actor User as Developer / Designer
    participant Pixasso as Pixasso Orchestrator
    participant MCP as Pixasso MCP Server
    participant Genome as Design Genome
    participant Agents as Specialist Agents
    participant QA as Automated Interface QA

    User->>Pixasso: Request interface or application
    Pixasso->>User: Compulsory Popup Questions (ask_question)
    User-->>Pixasso: Theme, typography, dimensionality, conversion goals
    Pixasso->>MCP: pixasso_generate_genome
    MCP-->>Genome: Structured Design Genome (YAML)
    Pixasso->>MCP: pixasso_generate_brain
    MCP-->>Pixasso: Mermaid Decision Tree and Task DAG
    Pixasso->>Agents: Dispatch concurrent implementation tasks
    Agents-->>Pixasso: Production HTML5, Tailwind, TypeScript, Motion code
    Pixasso->>QA: Multi-viewport audit (390px, 768px, 1024px, 1440px)
    QA-->>Pixasso: Zero DOM overflow and accessibility sign-off
    Pixasso->>User: Verified components, live preview, and test report

flowchart TD
    Prompt["User Prompts New Project"] --> Popup["Compulsory Interactive Popup Modal (ask_question)"]

    subgraph Matrix ["Adaptive Discovery Matrix"]
        D1["Narrative & Theme<br/>(Paper, CRT-mono, Pitch Black, Brutalist, Editorial)"]
        D2["Typography Hierarchy<br/>(Display sans, warm editorial serif, technical mono)"]
        D3["Dimensionality Mode<br/>(2D Planar, 2.5D Parallax, 3D WebGL / Spline)"]
        D4["Sensory Feedback<br/>(Web Audio UISFX synthesized clicks and snaps)"]
        D5["Pillar Focus<br/>(State management, Zod forms, Auth UX, Realtime feeds)"]
    end

    Popup --> Matrix
    Matrix --> Answers["User Answers & Custom Requirements"]
    Answers --> Synthesize["Synthesize Design Genome & Task DAG"]

# Clone the repository
git clone https://github.com/Erebuzzz/pixasso.git
cd pixasso

# Install dependencies and build MCP server
npm install
npm run build

# Run automated multi-platform installer
node scripts/install.js

flowchart TD
    subgraph Clients ["Supported MCP Clients"]
        C1["Cursor IDE"]
        C2["Claude Desktop"]
        C3["Claude Code CLI"]
        C4["Google Antigravity / Gemini"]
    end

    subgraph RemoteTransport ["Option A: Hosted Remote (Zero Local Runtime)"]
        R_URL["Endpoint: https://mcp.pixasso.erebuzzz.tech/mcp"]
        R_AUTH["GitHub OAuth 2.0 (read:user, user:email)"]
        R_KV["Edge KV Rate Limiter (200 calls/day per user)"]
        R_WORKER["Cloudflare Worker + Durable Objects"]

        R_URL --> R_AUTH --> R_KV --> R_WORKER
    end

    subgraph LocalTransport ["Option B: Local Stdio (Full Offline Execution)"]
        L_NPX["npx -y pixasso-mcp"]
        L_LOCAL["Node.js stdio JSON-RPC process"]

        L_NPX --> L_LOCAL
    end

    subgraph Engine ["Pixasso Design Engine (7 Tools)"]
        T1["pixasso_discover_intent"]
        T2["pixasso_search_references"]
        T3["pixasso_fetch_reference"]
        T4["pixasso_generate_genome"]
        T5["pixasso_generate_brain"]
        T6["pixasso_audit_design"]
        T7["pixasso_generate_test_plan"]
    end

    C1 & C2 & C3 & C4 -->|Remote HTTP SSE| R_URL
    C1 & C2 & C3 & C4 -->|Local Subprocess| L_NPX
    R_WORKER --> Engine
    L_LOCAL --> Engine

https://mcp.pixasso.erebuzzz.tech/mcp

{
  "mcpServers": {
    "pixasso-remote": {
      "url": "https://mcp.pixasso.erebuzzz.tech/mcp"
    }
  }
}

{
  "mcpServers": {
    "pixasso-remote": {
      "url": "https://mcp.pixasso.erebuzzz.tech/mcp"
    }
  }
}

claude mcp add pixasso-remote --transport http https://mcp.pixasso.erebuzzz.tech/mcp

{
  "mcpServers": {
    "pixasso-remote": {
      "url": "https://mcp.pixasso.erebuzzz.tech/mcp"
    }
  }
}

{
  "mcpServers": {
    "pixasso": {
      "command": "npx",
      "args": ["-y", "pixasso-mcp"]
    }
  }
}

npx skills add Erebuzzz/pixasso

{
  "mcpServers": {
    "pixasso": {
      "command": "npx",
      "args": ["-y", "pixasso-mcp"]
    }
  }
}

claude mcp add pixasso npx -y pixasso-mcp

/plugin marketplace add Erebuzzz/pixasso

{
  "mcpServers": {
    "pixasso": {
      "command": "npx",
      "args": ["-y", "pixasso-mcp"]
    }
  }
}

npx skills add Erebuzzz/pixasso

{
  "mcpServers": {
    "pixasso": {
      "command": "node",
      "args": ["/path/to/pixasso/mcp-server/build/index.js"]
    }
  }
}

flowchart TD
    subgraph Suite ["Three.js Spatial Studio (examples/3d-suite/)"]
        Renderer["WebGLRenderer with Antialiasing & Soft Shadows"]
        Orbit["OrbitControls with Damping & Preset Interpolation"]

        subgraph Recipes ["Proven Spatial Recipes"]
            R1["Kinetic Polyhedron Sculpture<br/>(Faceted cage, PBR metallic core, gyro gimbal rings)"]
            R2["Gravitational Particle Galaxy<br/>(15k GPU points, mouse gravity lens, velocity color)"]
            R3["Spatial Hardware Exploded View<br/>(5 mechanical layers, disassembly slider, 3D callouts)"]
        end

        subgraph Adapters ["Adaptive 3-Theme Sync"]
            T1["Paper Ivory Mode (#fbfaf7, ink wireframe, clay shading)"]
            T2["CRT Phosphor Mode (#0a0f0d, emerald wireframe, scanlines)"]
            T3["Pitch Black AMOLED Mode (#000000, chrome, cobalt rim light)"]
        end

        Renderer --> Recipes
        Orbit --> Recipes
        Adapters --> Recipes
    end

flowchart LR
    Commit["git push origin main"] --> Actions["GitHub Actions Runner"]
    Actions --> Pages["GitHub Pages Edge CDN"]
    Pages --> Domain["pixasso.erebuzzz.tech<br/>(Automatic SSL)"]

    Commit -.-> Vercel["Optional: Vercel (vercel.json)"]
    Vercel -.-> Domain

pixasso/
├── CNAME                              # Custom domain: pixasso.erebuzzz.tech
├── package.json                       # Root scripts and workspace config
├── README.md                          # Full-spectrum documentation and architecture
├── AGENTS.md / CLAUDE.md / GEMINI.md  # Multi-agent rules and behavioral guardrails
├── .cursorrules                       # Cursor IDE rules
├── .cursor/                           # Cursor project configs, rules, and skills
├── .github/workflows/deploy-site.yml  # Automated GitHub Pages CI/CD pipeline
├── assets/screenshots/                # Multi-viewport screenshots and visual proofs
├── examples/                          # Standalone craft demonstrations
│   ├── production-app/                # Edge Operations reactive dashboard
│   ├── paper-editorial/               # Archival editorial publication
│   ├── crt-terminal/                  # Phosphor CRT retro terminal
│   └── generative-wave/               # Mathematical wave synthesizer canvas
├── mcp-server/                        # Standalone TypeScript MCP Server
│   ├── package.json
│   ├── tsconfig.json
│   └── src/index.ts                   # JSON-RPC 2.0 tools, resources, and prompts
├── plugins/pixasso/                   # Antigravity plugin distribution
├── scripts/                           # Tooling, installer, and test suites
│   ├── install.js                     # Unified multi-platform installer
│   ├── test-mcp.js                    # Automated MCP JSON-RPC protocol test suite
│   └── serve.js                       # Local HTTP preview server
├── site/                              # Showcase site (pixasso.erebuzzz.tech)
│   ├── index.html                     # Live website with theme engine and audio
│   └── assets/                        # Web assets and mirrored screenshots
├── skills/pixasso/                    # CANONICAL installable agent skill
│   ├── SKILL.md                       # Main skill definition
│   ├── references/                    # 20 curated design-research catalogs
│   ├── templates/                     # Operational templates (Genome, DAG, QA)
│   └── prompts/                       # Modular agent prompts
└── references/                        # Editable root reference catalogs

flowchart TD
    Code["Generated Component Markup"] --> DevServer["Local Dev Server / generative_ui"]
    DevServer --> Resizer["Multi-Viewport Sweep (chrome-devtools-mcp)"]

    subgraph Matrix ["Viewport Matrix"]
        V1["390px Mobile Viewport"]
        V2["768px Tablet Viewport"]
        V3["1024px Laptop Viewport"]
        V4["1440px Desktop Viewport"]
    end

    Resizer --> Matrix
    Matrix --> DOMCheck["DOM Overflow & Layout Audit<br/>(scrollWidth vs innerWidth)"]

    subgraph Gates ["Automated Quality Gates"]
        G1["Zero Horizontal Overflow"]
        G2["Touch Targets >= 44px"]
        G3["Visible Focus Rings & ARIA Roles"]
        G4["Web Audio Latency < 10ms"]
    end

    DOMCheck --> Gates
    Gates --> SignOff["Sign Off in interface-test-plan.md"]