senior-saad

╔══════════════════════════════════════════════════════════════╗
║              🧠  SAAD COUNCIL VERDICT                        ║
╠══════════════════════════════════════════════════════════════╣
║  PROJECT: [Name]                                             ║
║  SUBMITTED BY: SAAD Senior System                           ║
╠══════════════════════════════════════════════════════════════╣
║  ✅ WHERE THE COUNCIL AGREES:                                ║
║  [Points that multiple advisors converged on independently]  ║
╠══════════════════════════════════════════════════════════════╣
║  ⚔️  WHERE THE COUNCIL CLASHES:                              ║
║  [Genuine disagreements — present both sides honestly]       ║
╠══════════════════════════════════════════════════════════════╣
║  🕳️  BLIND SPOTS CAUGHT:                                     ║
║  [Things only the peer review round surfaced]                ║
╠══════════════════════════════════════════════════════════════╣
║  🎯 THE RECOMMENDATION:                                      ║
║  [Clear, direct recommendation — not "it depends"]          ║
╠══════════════════════════════════════════════════════════════╣
║  ⚡ THE ONE THING TO DO FIRST:                               ║
║  [Single concrete next step before anything else]            ║
╠══════════════════════════════════════════════════════════════╣
║  📊 OVERALL VERDICT:                                         ║
║  Viability:  [HIGH / MEDIUM / LOW]                           ║
║  Decision:   [PROCEED / PROCEED WITH CHANGES / RETHINK]      ║
║  Confidence: [%]                                             ║
╚══════════════════════════════════════════════════════════════╝

╔══════════════════════════════════════════════════╗
║  SYSTEM: [Name]                                  ║
║  PURPOSE: [1 sentence]                           ║
║  TYPE: [Web App / Mobile / API / Platform / SaaS]║
║  SCALE TARGET: [Small / Medium / Large]          ║
╚══════════════════════════════════════════════════╝

graph TB
    subgraph Client["🖥️ Client Layer"]
        UI["Frontend App\n(Framework)"]
    end

    subgraph API["⚡ API Layer"]
        GW["API Gateway"]
        Auth["🔐 Auth Service"]
        Core["🧠 Core Service"]
    end

    subgraph Data["🗄️ Data Layer"]
        DB[("Primary DB")]
        Cache[("Cache")]
        Storage["📁 File Storage"]
    end

    subgraph External["🌐 External"]
        Email["📧 Email Service"]
        Pay["💳 Payment"]
    end

    UI --> GW
    GW --> Auth
    GW --> Core
    Core --> DB
    Core --> Cache
    Core --> Storage
    Core --> Email
    Core --> Pay

flowchart TD
    A([🚀 User Arrives]) --> B{New User?}
    B -->|Yes| C[Registration Flow]
    B -->|No| D[Login]
    C --> E[Onboarding]
    D --> F[Dashboard]
    E --> F
    F --> G{User Goal}
    G -->|Action 1| H[Feature A]
    G -->|Action 2| I[Feature B]
    G -->|Action 3| J[Feature C]

TABLE: [entity_name]
├── id          UUID / INT   PRIMARY KEY
├── [field_1]   TYPE         CONSTRAINTS
├── [field_2]   TYPE         CONSTRAINTS
├── created_at  TIMESTAMP    DEFAULT NOW()
└── updated_at  TIMESTAMP    ON UPDATE

RELATIONSHIPS:
[entity_1] 1──N [entity_2]  (via [foreign_key])
[entity_1] N──N [entity_3]  (via [junction_table])

[METHOD]  /api/v1/[resource]          → [Description]            → Auth: [Y/N]

# Auth
POST      /api/v1/auth/register       → Create account           → No
POST      /api/v1/auth/login          → Get JWT token            → No
POST      /api/v1/auth/refresh        → Refresh token            → Yes
DELETE    /api/v1/auth/logout         → Invalidate session       → Yes

# [Resource 1]
GET       /api/v1/[resource]          → List all [resource]      → Yes
POST      /api/v1/[resource]          → Create [resource]        → Yes
GET       /api/v1/[resource]/:id      → Get single              → Yes
PUT       /api/v1/[resource]/:id      → Update                   → Yes
DELETE    /api/v1/[resource]/:id      → Delete                   → Yes

App Root
├── 🔧 Providers (Auth, Theme, Query)
├── 🗺️ Router
│   ├── /              → Landing Page
│   ├── /auth          → Auth Pages
│   ├── /dashboard     → Main Dashboard
│   └── /[features]    → Feature Pages
├── 🧩 Shared Components
│   ├── UI/            → Buttons, Inputs, Cards, Badges
│   ├── Layout/        → Navbar, Sidebar, Footer
│   └── Features/      → Business logic components
└── 🔌 Services
    ├── api.ts         → API calls
    ├── auth.ts        → Auth logic
    └── utils.ts       → Helpers

╔════════════════════════════════════════════════════════════╗
║                📊 SAAD SYSTEM SUMMARY                      ║
╠════════════════════════════════════════════════════════════╣
║  PROJECT: [Name]                                           ║
║  COUNCIL VERDICT: [Decision + Confidence %]                ║
╠════════════════════════════════════════════════════════════╣
║  🏗️  ARCHITECTURE OVERVIEW:                                ║
║  • Tech Stack:    [Frontend + Backend + DB]                ║
║  • Core Modules:  [N] modules                              ║
║  • API Endpoints: [N] endpoints                            ║
║  • DB Tables:     [N] tables                               ║
║  • Integrations:  [List]                                   ║
╠════════════════════════════════════════════════════════════╣
║  📅 ESTIMATED TIMELINE:                                    ║
║  • Sprint 1 — Foundation:    [N] weeks                     ║
║  • Sprint 2 — Core Features: [N] weeks                     ║
║  • Sprint 3 — Polish/Deploy: [N] weeks                     ║
║  • TOTAL:                    [N] weeks                     ║
╠════════════════════════════════════════════════════════════╣
║  ⚠️   TOP 3 RISKS:                                         ║
║  1. [Risk + mitigation]                                    ║
║  2. [Risk + mitigation]                                    ║
║  3. [Risk + mitigation]                                    ║
╠════════════════════════════════════════════════════════════╣
║  💎 KEY RECOMMENDATIONS:                                   ║
║  1. [Recommendation]                                       ║
║  2. [Recommendation]                                       ║
║  3. [Recommendation]                                       ║
╚════════════════════════════════════════════════════════════╝

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
🎨  SAAD DESIGN CONFIGURATION — Your Input Needed
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Before I design the UI, please tell me:

  1️⃣  COLOR THEME
      (e.g., "dark navy and gold", "light green and white",
       "cyberpunk neon", "warm earth tones", "ocean blue")

  2️⃣  VISUAL STYLE
      Choose one: glassmorphism / neumorphism / brutalist /
      clean-SaaS / dark-terminal / gaming / minimal /
      enterprise / luxury / playful

  3️⃣  ANYTHING TO ADD?
      Any screens, features, or modules missing?

  4️⃣  ANYTHING TO REMOVE OR CHANGE?
      Any part of the architecture you disagree with?

Type your answers or say "proceed with defaults" to continue.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

/* ═══ SAAD COLOR SYSTEM — [Project Name] ═══ */
:root {
  /* ── Primary Palette (based on user's choice) ── */
  --color-primary-50:   [hex];   /* lightest tint */
  --color-primary-100:  [hex];
  --color-primary-200:  [hex];
  --color-primary-300:  [hex];
  --color-primary-400:  [hex];
  --color-primary-500:  [hex];   /* ← BASE (user's chosen color) */
  --color-primary-600:  [hex];
  --color-primary-700:  [hex];
  --color-primary-800:  [hex];
  --color-primary-900:  [hex];   /* darkest shade */

  /* ── Accent ── */
  --color-accent:        [hex];  /* high-impact secondary color */
  --color-accent-light:  [hex];

  /* ── Backgrounds ── */
  --color-bg:            [hex];  /* page background */
  --color-surface:       [hex];  /* cards, panels */
  --color-surface-raised:[hex];  /* elevated cards */
  --color-overlay:       [hex];  /* modals, drawers */

  /* ── Text ── */
  --color-text-primary:  [hex];  /* main text */
  --color-text-secondary:[hex];  /* muted text */
  --color-text-disabled:  [hex];

  /* ── Borders ── */
  --color-border:        [hex];
  --color-border-focus:  [hex];  /* focus ring */

  /* ── Status ── */
  --color-success:    #22c55e;
  --color-warning:    #f59e0b;
  --color-error:      #ef4444;
  --color-info:       #3b82f6;

  /* ── Gradients ── */
  --gradient-hero:  linear-gradient([angle], [color1], [color2]);
  --gradient-card:  linear-gradient([angle], [color1], [color2]);
  --gradient-glow:  radial-gradient([colors]);
}

/* ═══ SAAD TYPOGRAPHY SYSTEM ═══ */

/* Import (Google Fonts or similar) */
@import url('[font-url]');

:root {
  /* Fonts */
  --font-display: '[Display Font]';   /* headings — characterful, bold */
  --font-body:    '[Body Font]';      /* body — readable, refined */
  --font-mono:    '[Mono Font]';      /* code, data */

  /* Scale — Fluid Typography */
  --text-xs:    0.75rem;     /* 12px — labels, captions */
  --text-sm:    0.875rem;    /* 14px — secondary info */
  --text-base:  1rem;        /* 16px — body default */
  --text-lg:    1.125rem;    /* 18px — lead text */
  --text-xl:    1.25rem;     /* 20px — subheadings */
  --text-2xl:   1.5rem;      /* 24px — section headings */
  --text-3xl:   1.875rem;    /* 30px — page headings */
  --text-4xl:   2.25rem;     /* 36px — hero supporting */
  --text-hero:  clamp(3rem, 8vw, 5.5rem);   /* hero headline */

  /* Weights */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    900;

  /* Line Heights */
  --leading-tight:   1.1;   /* display text */
  --leading-normal:  1.5;   /* body text */
  --leading-loose:   1.8;   /* readable paragraphs */

  /* Letter Spacing */
  --tracking-tight:  -0.025em;  /* large headings */
  --tracking-wide:   0.05em;    /* labels, caps */
  --tracking-wider:  0.1em;     /* eyebrows */
}

:root {
  /* Spacing Scale */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;

  /* Border Radius */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.1);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.12);
  --shadow-lg:   0 8px 32px rgba(0,0,0,0.16);
  --shadow-glow: 0 0 40px [primary-color]33;
}

// ── PAGE LOAD SEQUENCE ──
// Staggered entry for all cards/sections
anime.timeline()
  .add({
    targets: '.saad-hero',
    translateY: [60, 0],
    opacity: [0, 1],
    easing: 'spring(1, 80, 10, 0)',
    duration: 1000
  })
  .add({
    targets: '.saad-card',
    translateY: [40, 0],
    opacity: [0, 1],
    delay: anime.stagger(100, {start: 200}),
    easing: 'spring(1, 80, 10, 0)',
    duration: 800
  }, '-=600');

// ── BUTTON HOVER ──
document.querySelectorAll('.saad-btn').forEach(btn => {
  btn.addEventListener('mouseenter', () => {
    anime({ targets: btn, scale: 1.04, easing: 'spring(2,80,10,0)', duration: 300 });
  });
  btn.addEventListener('mouseleave', () => {
    anime({ targets: btn, scale: 1, easing: 'spring(2,80,10,0)', duration: 300 });
  });
});

// ── COUNTER ANIMATION ──
anime({
  targets: '.saad-stat-number',
  innerHTML: [0, targetValue],
  round: 1,
  easing: 'easeOutExpo',
  duration: 2000,
  delay: anime.stagger(200)
});

// ── SCROLL REVEAL ──
const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      anime({
        targets: entry.target,
        translateY: [30, 0],
        opacity: [0, 1],
        easing: 'spring(1, 80, 10, 0)',
        duration: 600
      });
    }
  });
});
document.querySelectorAll('.saad-reveal').forEach(el => observer.observe(el));

// ── RESPECT REDUCED MOTION ──
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
if (prefersReducedMotion) {
  // Skip all animations — accessibility compliance
}

SCREEN: [Screen Name]
PURPOSE: [What the user accomplishes here]
LAYOUT: [Grid structure — e.g., "12-col, sidebar 3 + main 9"]
KEY COMPONENTS:
  - [Component from KokonutUI/21st.dev/custom]
  - [Component 2]
ANIMATIONS:
  - [Entry animation]
  - [Interaction animation]
RESPONSIVE:
  - Mobile: [How layout shifts]
  - Tablet: [How layout shifts]
  - Desktop: [Full layout]
DARK MODE: [Any special dark mode adjustments]

╔═══════════════════════════════════════════════════╗
║           🎨 SAAD DESIGN SYSTEM                   ║
╠═══════════════════════════════════════════════════╣
║  STYLE: [Selected style]                          ║
║  PRIMARY: [hex] ● ACCENT: [hex] ● BG: [hex]       ║
║  DISPLAY FONT: [Name]  BODY FONT: [Name]          ║
╠═══════════════════════════════════════════════════╣
║  COMPONENTS FROM KOKONUTUI:                       ║
║  • [component 1]                                  ║
║  • [component 2]                                  ║
╠═══════════════════════════════════════════════════╣
║  COMPONENTS FROM 21ST.DEV:                        ║
║  • [component 1]                                  ║
║  • [component 2]                                  ║
╠═══════════════════════════════════════════════════╣
║  ANIMATIONS (ANIME.JS):                           ║
║  • [animation 1]                                  ║
║  • [animation 2]                                  ║
╠═══════════════════════════════════════════════════╣
║  SCREENS: [N] screens designed                    ║
╚═══════════════════════════════════════════════════╝

# 🏗️ [PROJECT NAME] — SAAD Implementation Package
## Generated by: Senior SAAD System v2.0
## Date: [Date] | Confidence: [%] | Verdict: [PROCEED/etc.]

---

## 🎯 EXECUTIVE SUMMARY
[2-3 sentences: what this system is, what it does, who it's for]

---

## 🧠 COUNCIL FINDINGS SUMMARY
[Key insights from Phase 1 — top risks, top opportunities, final verdict]

---

## 🏗️ TECHNICAL SPECIFICATION

### Tech Stack (Final)
| Layer | Technology | Version |
|-------|-----------|---------|
| Frontend | [Framework] | [version] |
| Backend | [Framework] | [version] |
| Database | [DB] | [version] |
| Auth | [Method] | — |
| Hosting | [Platform] | — |
| Package Manager | pnpm | latest |

### Project Setup
\`\`\`bash
npx create-next-app@latest [project-name] --typescript --tailwind --app --src-dir
cd [project-name]
pnpm add animejs
pnpm add [component-deps]
pnpm add [other-deps]
\`\`\`

### System Architecture (Mermaid)
[Paste complete mermaid diagram from Phase 2]

### User Journey (Mermaid)
[Paste complete mermaid diagram from Phase 2]

### Database Schema (Complete)
[Paste complete schema from Phase 2]

### API Endpoints (Complete)
[Paste complete API map from Phase 2]

---

## 🎨 DESIGN SYSTEM (Complete)

### Color Tokens (Copy-Paste Ready)
\`\`\`css
[Complete CSS variables from Phase 4]
\`\`\`

### Typography (Copy-Paste Ready)
\`\`\`css
[Complete typography CSS from Phase 4]
\`\`\`

### Component Checklist

**Install from KokonutUI (https://kokonutui.com/):**
- [ ] [Component 1] — [where used]
- [ ] [Component 2] — [where used]

**Install from 21st.dev (https://21st.dev/community/components):**
- [ ] [Component 1] — [where used]
- [ ] [Component 2] — [where used]

**Anime.js Animations to Implement:**
\`\`\`javascript
[Complete animation code from Phase 4]
\`\`\`

### Screens to Build (In Priority Order)
1. [Screen name] — [description] — [key components]
2. [Screen name] — [description] — [key components]
...

---

## ⚙️ IMPLEMENTATION INSTRUCTIONS

### Active Skills (Applied to This Prompt)
This package was engineered with these Claude Code skills:
- `frontend-design` → Distinctive visual aesthetics, anti-AI-slop
- `web-design-guidelines` → 100+ UI/UX compliance rules
- `react-best-practices` → 57 performance optimization rules
- `composition-patterns` → Compound components, no boolean prop hell
- `ui-ux-pro-max` → 50 styles, 97 palettes, UX guidelines
- `bencium-innovative-ux-designer` → Full UX design system
- `contrast-checker` → WCAG AA/AAA compliance
- `web-design-guidelines` → Accessibility audit

### Implementation Roadmap

**Sprint 1 — Foundation (Week 1-2)**
- [ ] Project setup + configuration
- [ ] Design tokens → CSS variables
- [ ] Font setup + typography scale
- [ ] Base layout: Navbar, Sidebar, Footer
- [ ] Authentication system (register + login)
- [ ] Database schema + migrations

**Sprint 2 — Core Features (Week 3-4)**
- [ ] [Feature 1] — [components needed]
- [ ] [Feature 2] — [components needed]
- [ ] [Feature 3] — [components needed]
- [ ] API endpoints implementation
- [ ] State management setup

**Sprint 3 — Polish (Week 5-6)**
- [ ] Anime.js animations integration
- [ ] Dark / light mode toggle
- [ ] Responsive design (mobile-first)
- [ ] Performance optimization (bundle, images, lazy loading)
- [ ] Accessibility audit + fixes
- [ ] Error handling + loading states
- [ ] Final testing + deployment

### Quality Checklist (Run Before Shipping)
**Design:**
- [ ] All text/bg combinations ≥ 4.5:1 contrast (WCAG AA)
- [ ] No generic fonts used (no Inter/Roboto/Arial)
- [ ] Animations ≤ 300ms for micro-interactions
- [ ] prefers-reduced-motion respected in all Anime.js code
- [ ] Mobile-first: all screens usable at 375px

**Code:**
- [ ] No boolean prop proliferation in components
- [ ] Compound component patterns for complex UI
- [ ] Direct imports only (no barrel files)
- [ ] Suspense boundaries for all async content
- [ ] TypeScript strict mode enabled
- [ ] No inline style objects in lists (kills perf)

**Accessibility:**
- [ ] All inputs have visible <label> elements
- [ ] All images have meaningful alt text
- [ ] Keyboard navigation works on all interactive elements
- [ ] Focus visible on all focusable elements
- [ ] No color-only information conveyed
- [ ] Proper heading hierarchy (h1 → h2 → h3)
- [ ] Touch targets ≥ 44px on mobile

**Performance:**
- [ ] No data fetching waterfalls
- [ ] Images optimized (Next/Image or similar)
- [ ] Largest Contentful Paint < 2.5s
- [ ] Code splitting applied to heavy components
- [ ] Redis/cache layer for expensive queries

---

## 🎨 VISUAL REFERENCES

### Color Palette
[ASCII representation of the color palette]
■ Primary #[hex]   ■ Accent #[hex]   ■ BG #[hex]
■ Surface #[hex]   ■ Text #[hex]     ■ Border #[hex]

### Screen Wireframes (ASCII)
[ASCII wireframes for key screens]

---

## 🚀 FINAL CLAUDE CODE PROMPT

Copy this EXACTLY into Claude Code to start:

\`\`\`
You are building [PROJECT NAME].

SYSTEM: [One sentence description]
STACK: [Frontend] + [Backend] + [Database]
DESIGN: [Color theme] + [Style] + [Font pair]

COMPONENT SOURCES:
- KokonutUI: https://kokonutui.com/
- 21st.dev: https://21st.dev/community/components
- Animations: Anime.js v4 (https://animejs.com/)

ACTIVE SKILLS: frontend-design, web-design-guidelines, react-best-practices,
composition-patterns, ui-ux-pro-max, bencium-innovative-ux-designer, contrast-checker

IMPLEMENTATION RULES:
1. Follow the SAAD package specification in SAAD-[Name]-PACKAGE.md
2. Use the color tokens from the design system (no hardcoded colors)
3. Apply compound component patterns — no boolean prop hell
4. All animations via Anime.js — respect prefers-reduced-motion
5. Mobile-first responsive design
6. TypeScript strict mode
7. Direct imports only (no barrel files)

START WITH: Project setup → Design tokens → Base layout → Auth

Begin now.
\`\`\`

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✅ SAAD Package complete.

Would you like to:
  [1] Refine any specific phase
  [2] Change the tech stack
  [3] Add/remove features
  [4] Adjust the design system
  [5] Export as a different format
  [6] I'm ready — take this to Claude Code

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

"SAAD — I want to build an AI-powered task manager"
"Design a complete system for a hospital appointment booking app"
"Senior design: marketplace for freelancers in the Arab world"
"Architect a real-time collaboration tool like Notion"
"SAAD — SaaS platform for restaurant inventory management"
"I have an idea for a robotics competition tracking system"