@caddis/cli 0.1.0 → 0.2.0

package/bundles/antigravity-plugin-extras/skills/popular-web-designs/templates/stripe.md

@@ -0,0 +1,214 @@
+# Design System: Stripe
+
+> **Font substitution for self-contained HTML:**
+> - Primary: `Source Sans 3` | Mono: `Source Code Pro`
+> ```html
+> <link href="https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@300;400;500;600&family=Source+Code+Pro:wght@400;500;700&display=swap" rel="stylesheet">
+> ```
+> CSS stacks:
+> - `font-family: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;`
+> - `font-family: 'Source Code Pro', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Courier New', monospace;`
+
+## Visual Theme & Atmosphere
+
+The gold standard of fintech design — simultaneously technical and luxurious. White canvas (`#ffffff`) with deep navy headings (`#061b31`) and a signature purple (`#533afd`) that reads as confident and premium. Custom `sohne-var` variable font with OpenType `"ss01"` everywhere. Headlines use weight 300 — an extraordinarily light weight that creates ethereal authority. This is the opposite of "bold hero headline" convention.
+
+The defining technical signature: multi-layer blue-tinted shadows (`rgba(50,50,93,0.25)` + `rgba(0,0,0,0.1)`) that feel atmospheric — like elements floating in a twilight sky.
+
+## Color Palette
+
+### Primary
+| Name | Hex | Use |
+|------|-----|-----|
+| Stripe Purple | `#533afd` | Primary CTA, links, interactive |
+| Deep Navy | `#061b31` | All headings (never pure black) |
+| Pure White | `#ffffff` | Page background, cards |
+
+### Brand & Dark
+| Name | Hex | Use |
+|------|-----|-----|
+| Brand Dark | `#1c1e54` | Dark sections, footer |
+| Dark Navy | `#0d253d` | Near-black surfaces |
+
+### Accents (decorative only — not for buttons/links)
+| Name | Hex | Use |
+|------|-----|-----|
+| Ruby | `#ea2261` | Icons, gradient decoration |
+| Magenta | `#f96bee` | Gradients, highlights |
+| Magenta Light | `#ffd7ef` | Tinted surfaces |
+
+### Interactive
+| Name | Hex | Use |
+|------|-----|-----|
+| Purple Hover | `#4434d4` | Hover on primary elements |
+| Purple Light | `#b9b9f9` | Ghost button border |
+| Body Text | `#64748d` | Secondary, descriptions |
+| Label Text | `#273951` | Form labels, sub-headings |
+
+### Surfaces & Borders
+| Name | Hex | Use |
+|------|-----|-----|
+| Border | `#e5edf5` | Cards, dividers, inputs |
+| Success Green | `#15be53` | Status (bg at 0.2 alpha) |
+| Success Text | `#108c3d` | Success badge text |
+
+### Shadows
+- Primary (blue-tinted): `rgba(50,50,93,0.25)`
+- Secondary: `rgba(0,0,0,0.1)`
+- Ambient: `rgba(23,23,23,0.08)`
+- Soft: `rgba(23,23,23,0.06)`
+
+## Typography
+
+Font: sohne-var → Source Sans 3 with `font-feature-settings: "ss01"` on ALL text. `"tnum"` for financial/tabular numbers.
+
+| Role | Size | Weight | Line Height | Letter Spacing |
+|------|------|--------|-------------|----------------|
+| Display Hero | 56px | 300 | 1.03 | −1.4px |
+| Display Large | 48px | 300 | 1.15 | −0.96px |
+| Section Heading | 32px | 300 | 1.10 | −0.64px |
+| Sub-heading Large | 26px | 300 | 1.12 | −0.26px |
+| Sub-heading | 22px | 300 | 1.10 | −0.22px |
+| Body Large | 18px | 300 | 1.40 | normal |
+| Body | 16px | 300–400 | 1.40 | normal |
+| Button | 16px | 400 | 1.00 | normal |
+| Caption | 13px | 400 | normal | normal |
+| Caption Tabular | 12px | 300–400 | 1.33 | −0.36px + "tnum" |
+| Code Body | 12px SourceCodePro | 500 | 2.00 | normal |
+| Code Bold | 12px SourceCodePro | 700 | 2.00 | normal |
+
+**Key principle**: Weight 300 is the default for headings AND body. Weight 400 only for buttons/navigation. No 600–700 in sohne-var.
+
+## Component Styles
+
+### Buttons
+```css
+/* Primary Purple */
+.btn-primary {
+  background: #533afd;
+  color: #ffffff;
+  padding: 8px 16px;
+  border-radius: 4px;
+  font-size: 16px;
+  font-weight: 400;
+  font-feature-settings: "ss01";
+}
+.btn-primary:hover { background: #4434d4; }
+
+/* Ghost / Outlined */
+.btn-ghost {
+  background: transparent;
+  color: #533afd;
+  border: 1px solid #b9b9f9;
+  border-radius: 4px;
+  padding: 8px 16px;
+}
+.btn-ghost:hover { background: rgba(83,58,253,0.05); }
+```
+
+### Cards
+```css
+.card {
+  background: #ffffff;
+  border: 1px solid #e5edf5;
+  border-radius: 6px;
+  box-shadow: rgba(50,50,93,0.25) 0px 30px 45px -30px,
+              rgba(0,0,0,0.1) 0px 18px 36px -18px;
+}
+```
+
+### Success Badge
+```css
+.badge-success {
+  background: rgba(21,190,83,0.2);
+  color: #108c3d;
+  border: 1px solid rgba(21,190,83,0.4);
+  border-radius: 4px;
+  padding: 1px 6px;
+  font-size: 10px;
+  font-weight: 300;
+}
+```
+
+### Navigation
+```css
+.nav {
+  background: #ffffff;
+  backdrop-filter: blur(12px);
+  border-bottom: 1px solid #e5edf5;
+}
+.nav-link {
+  color: #061b31;
+  font-size: 14px;
+  font-weight: 400;
+  font-feature-settings: "ss01";
+}
+```
+
+### Dark Brand Section
+```css
+.section-dark {
+  background: #1c1e54;
+  color: #ffffff;
+}
+/* Heading inside dark section */
+.section-dark h2 {
+  color: #ffffff;
+  font-weight: 300;
+  letter-spacing: -0.64px;
+}
+/* Body inside dark section */
+.section-dark p {
+  color: rgba(255,255,255,0.7);
+  font-weight: 300;
+}
+```
+
+## Elevation System
+
+| Level | Shadow | Use |
+|-------|--------|-----|
+| Flat | None | Page, inline |
+| Ambient | `rgba(23,23,23,0.06) 0px 3px 6px` | Subtle card lift |
+| Standard | `rgba(23,23,23,0.08) 0px 15px 35px` | Cards |
+| Elevated | `rgba(50,50,93,0.25) 0px 30px 45px -30px, rgba(0,0,0,0.1) 0px 18px 36px -18px` | Featured, dropdowns |
+| Deep | `rgba(3,3,39,0.25) 0px 14px 21px -14px, rgba(0,0,0,0.1) 0px 8px 17px -8px` | Modals |
+
+## Border Radius Scale
+- Standard (4px): buttons, inputs, badges, cards — the workhorse
+- Comfortable (6px): nav, larger interactive elements
+- Large (8px): featured cards, hero elements
+
+## Layout
+- Max content width: ~1080px
+- Base spacing unit: 8px (dense at small end)
+- Section rhythm: white sections alternate with `#1c1e54` dark sections
+
+## Do's and Don'ts
+
+### Do
+- `font-feature-settings: "ss01"` on every sohne-var/Source Sans 3 text
+- Weight 300 for headings and body — lightness is the signature
+- Blue-tinted shadows (`rgba(50,50,93,0.25)`) on all elevated elements
+- `#061b31` deep navy for headings, never `#000000`
+- Border-radius 4–8px only — conservative
+- `"tnum"` for financial/tabular numbers
+
+### Don't
+- No weight 600–700 on headings
+- No large border-radius (12px+, pill shapes) on cards or buttons
+- No neutral gray shadows — always blue-tinted
+- No warm accent colors for interactive elements
+- No pure black headings — always `#061b31`
+- No magenta/ruby for buttons/links — decorative only
+
+## Agent Prompt Guide
+
+**Hero section**:
+"White background. Headline 48px Source Sans 3 weight 300, line-height 1.15, letter-spacing −0.96px, color `#061b31`, `font-feature-settings: 'ss01'`. Subtitle 18px weight 300, line-height 1.40, color `#64748d`. Purple CTA (`#533afd`, 4px radius, 8px 16px padding, white text) + ghost button (transparent, `1px solid #b9b9f9`, `#533afd` text, 4px radius)."
+
+**Card**:
+"White bg, `1px solid #e5edf5` border, 6px radius. Shadow: `rgba(50,50,93,0.25) 0px 30px 45px -30px, rgba(0,0,0,0.1) 0px 18px 36px -18px`. Title 22px Source Sans 3 weight 300, −0.22px tracking, `#061b31`, `'ss01'`. Body 16px weight 300, `#64748d`."
+
+**Dark brand section**:
+"`#1c1e54` background, white text. Headline 32px weight 300, −0.64px tracking, `'ss01'`. Body 16px weight 300, `rgba(255,255,255,0.7)`. Internal cards: `rgba(255,255,255,0.1)` border, 6px radius."

package/bundles/antigravity-plugin-extras/skills/popular-web-designs/templates/vercel.md

@@ -0,0 +1,218 @@
+# Design System: Vercel
+
+> **Font substitution for self-contained HTML:**
+> - Primary: `Geist` | Mono: `Geist Mono`
+> ```html
+> <link href="https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600&family=Geist+Mono:wght@400;500&display=swap" rel="stylesheet">
+> ```
+> CSS stacks:
+> - `font-family: 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;`
+> - `font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Courier New', monospace;`
+
+## Visual Theme & Atmosphere
+
+Developer infrastructure design taken to its extreme — restrained white (`#ffffff`) and near-black (`#171717`) with gallery-like emptiness. Minimalism as engineering principle: every unnecessary token removed until only structure remains.
+
+The defining technical signature: **shadow-as-border**. Instead of `border: 1px solid #ebebeb`, Vercel uses `box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.08)`. The entire elevation system is layered multi-value shadow stacks. Geist Sans with aggressive negative letter-spacing (−2.4px to −2.88px at display) creates headlines that feel "compressed, urgent, engineered — like code minified for production."
+
+## Color Palette
+
+### Primary
+| Name | Hex | Use |
+|------|-----|-----|
+| Vercel Black | `#171717` | Primary text, headings, dark surfaces |
+| Pure White | `#ffffff` | Page background, cards |
+| True Black | `#000000` | Console/code contexts |
+
+### Workflow Accents (use ONLY in workflow pipeline context)
+| Stage | Color | Use |
+|-------|-------|-----|
+| Develop | `#0a72ef` | Development step |
+| Preview | `#de1d8d` | Preview deployment step |
+| Ship | `#ff5b4f` | Production step |
+
+### Neutral Scale
+| Name | Hex | Use |
+|------|-----|-----|
+| Gray 900 | `#171717` | Primary text |
+| Gray 600 | `#4d4d4d` | Body, descriptions |
+| Gray 500 | `#666666` | Tertiary, muted |
+| Gray 400 | `#808080` | Placeholders |
+| Gray 100 | `#ebebeb` | Borders, dividers |
+| Gray 50 | `#fafafa` | Surface tint, inner highlight |
+
+### Interactive
+| Name | Value | Use |
+|------|-------|-----|
+| Link Blue | `#0072f5` | Link color + underline |
+| Focus Blue | `hsla(212,100%,48%,1)` | Focus ring on all interactive elements |
+| Badge Blue Bg | `#ebf5ff` | Pill badge background |
+| Badge Blue Text | `#0068d6` | Pill badge text |
+
+### Shadows
+- **Border shadow** (signature): `rgba(0,0,0,0.08) 0px 0px 0px 1px`
+- **Light ring**: `rgb(235,235,235) 0px 0px 0px 1px`
+- **Subtle lift**: `rgba(0,0,0,0.04) 0px 2px 2px`
+- **Depth**: `rgba(0,0,0,0.04) 0px 8px 8px -8px`
+- **Inner glow**: `#fafafa 0px 0px 0px 1px` (the glow that makes the system work)
+- **Full card stack**: border + subtle + depth + inner glow
+
+## Typography
+
+Font: Geist with `font-feature-settings: "liga"` on ALL text. `"tnum"` for tabular numbers.
+
+| Role | Size | Weight | Line Height | Letter Spacing |
+|------|------|--------|-------------|----------------|
+| Display Hero | 48px | 600 | 1.00–1.17 | −2.4px to −2.88px |
+| Section Heading | 40px | 600 | 1.20 | −2.4px |
+| Sub-heading Large | 32px | 600 | 1.25 | −1.28px |
+| Card Title | 24px | 600 | 1.33 | −0.96px |
+| Body Large | 20px | 400 | 1.80 | normal |
+| Body | 18px | 400 | 1.56 | normal |
+| Body Small | 16px | 400 | 1.50 | normal |
+| Body Medium | 16px | 500 | 1.50 | normal |
+| Button / Link | 14px | 500 | 1.43 | normal |
+| Caption | 12px | 400–500 | 1.33 | normal |
+| Mono Body | 16px Geist Mono | 400 | 1.50 | normal |
+| Mono Caption | 13px Geist Mono | 500 | 1.54 | normal |
+| Micro Badge | 7px | 700 | 1.00 | normal (uppercase) |
+
+**Three weights, strict roles**: 400 (body), 500 (UI/interactive), 600 (headings). No 700 except micro-badges. Hierarchy through size and tracking, not weight.
+
+## Component Styles
+
+### Buttons
+```css
+/* Primary (shadow-bordered white) */
+.btn-primary {
+  background: #ffffff;
+  color: #171717;
+  padding: 8px 16px;
+  border-radius: 6px;
+  box-shadow: rgb(235,235,235) 0px 0px 0px 1px;
+  font-size: 14px;
+  font-weight: 500;
+  font-feature-settings: "liga";
+}
+.btn-primary:hover { background: #171717; color: #ffffff; }
+
+/* Dark CTA */
+.btn-dark {
+  background: #171717;
+  color: #ffffff;
+  padding: 8px 16px;
+  border-radius: 6px;
+  font-weight: 500;
+}
+
+/* Pill badge */
+.badge-pill {
+  background: #ebf5ff;
+  color: #0068d6;
+  border-radius: 9999px;
+  padding: 0 10px;
+  font-size: 12px;
+  font-weight: 500;
+}
+```
+
+### Cards (shadow-as-border, NOT CSS border)
+```css
+.card {
+  background: #ffffff;
+  border-radius: 8px;
+  /* Full card shadow stack */
+  box-shadow:
+    rgba(0,0,0,0.08) 0px 0px 0px 1px,
+    rgba(0,0,0,0.04) 0px 2px 2px,
+    rgba(0,0,0,0.04) 0px 8px 8px -8px,
+    #fafafa 0px 0px 0px 1px;
+}
+/* Image cards — top-rounded */
+.card-image {
+  border-radius: 12px 12px 0px 0px;
+  border: 1px solid #ebebeb;
+}
+```
+
+### Navigation
+```css
+.nav {
+  background: #ffffff;
+  position: sticky;
+  top: 0;
+}
+.nav-link {
+  color: #171717;
+  font-size: 14px;
+  font-weight: 500;
+  font-feature-settings: "liga";
+}
+.nav-link:hover { font-weight: 600; }
+```
+
+### Focus Ring (all interactive elements)
+```css
+:focus-visible {
+  outline: 2px solid hsla(212,100%,48%,1);
+  outline-offset: 2px;
+}
+```
+
+## Elevation System
+
+| Level | Shadow | Use |
+|-------|--------|-----|
+| Flat | None | Page background |
+| Ring | `rgba(0,0,0,0.08) 0px 0px 0px 1px` | Shadow-as-border |
+| Light Ring | `rgb(235,235,235) 0px 0px 0px 1px` | Tabs, images |
+| Subtle Card | Ring + `rgba(0,0,0,0.04) 0px 2px 2px` | Standard cards |
+| Full Card | Ring + Subtle + Depth + Inner Glow | Featured panels |
+| Focus | `2px solid hsla(212,100%,48%,1)` | Keyboard focus |
+
+## Border Radius Scale
+- Standard (6px): buttons, links
+- Comfortable (8px): cards, list items
+- Image (12px): featured cards, top-rounded containers
+- Large (64px): tab nav pills
+- Full (9999px): badges, status pills
+
+## Layout
+- Max content width: ~1200px
+- Spacing scale jumps from 16px → 32px (no 20px/24px)
+- Section spacing: 80–120px+ (gallery emptiness is intentional)
+- Section separators: `border-bottom: 1px solid #171717` (full dark lines)
+- No background color variation — depth from shadow + border only
+
+## Do's and Don'ts
+
+### Do
+- Shadow-as-border everywhere — `0px 0px 0px 1px rgba(0,0,0,0.08)` not CSS `border`
+- `"liga"` on all Geist text — ligatures are structural
+- 3 weights: 400 (read), 500 (interact), 600 (announce)
+- Include the inner `#fafafa` ring in card shadows — it's the glow
+- `#171717` not `#000000` for primary text
+- Aggressive negative tracking at display sizes
+
+### Don't
+- No positive letter-spacing on Geist
+- No weight 700 except micro-badges
+- No CSS `border` on cards — use shadow technique
+- No warm colors (orange, yellow, green) in UI chrome
+- No workflow accent colors (Red/Pink/Blue) decoratively
+- No heavy shadows (>0.1 opacity)
+- No pill radius on primary buttons — pills are badges/tags only
+
+## Agent Prompt Guide
+
+**Hero section**:
+"White background. Headline 48px Geist weight 600, line-height 1.00, letter-spacing −2.4px, color `#171717`, `font-feature-settings: 'liga'`. Subtitle 20px weight 400, line-height 1.80, color `#4d4d4d`. Dark CTA (`#171717` bg, white text, 6px radius, 8px 16px) + ghost (white, `rgb(235,235,235) 0px 0px 0px 1px` shadow, 6px radius)."
+
+**Card** (no CSS border):
+"White bg, 8px radius. Shadow stack: `rgba(0,0,0,0.08) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 2px, #fafafa 0px 0px 0px 1px`. Title 24px Geist weight 600, −0.96px tracking, `#171717`. Body 16px weight 400, `#4d4d4d`."
+
+**Badge**:
+"`#ebf5ff` bg, `#0068d6` text, 9999px radius, 0 10px padding, 12px Geist weight 500."
+
+**Workflow section** (Develop→Preview→Ship):
+"Three steps. Develop: `#0a72ef`. Preview: `#de1d8d`. Ship: `#ff5b4f`. Labels 14px Geist Mono uppercase. Titles 24px Geist weight 600. Body 16px weight 400, `#4d4d4d`."

package/bundles/antigravity-plugin-extras/skills/prd-to-code/SKILL.md

@@ -0,0 +1,127 @@
+---
+name: prd-to-code
+context: fork
+description: Transform PRD documents into working application code using a systematic 6-phase methodology. Use when starting projects from requirements or converting specs to implementation.
+---
+
+# PRD to Code Skill
+
+Transform a Product Requirements Document into a fully functional application.
+
+## When to Use
+- User provides a PRD document
+- User asks to "build from PRD" or "implement this PRD"
+- User has requirements to implement
+
+---
+
+## Phase 1: Discovery
+
+1. Read the PRD thoroughly
+2. Extract: data models, API endpoints, UI components, integrations, security requirements
+3. **Interrogate for gaps** — do not assume context. Ask about:
+   - **The Core Problem**: Why are we building this now?
+   - **Success Metrics**: How do we know it worked? (measurable KPIs)
+   - **Constraints**: Budget, tech stack, timeline, compliance?
+4. Ask clarifying questions if needed
+
+### PRD Quality Check
+
+Validate that the PRD uses concrete, measurable criteria:
+
+```diff
+# Vague (BAD) — reject or clarify
+- The search should be fast and return relevant results.
+- The UI must look modern and be easy to use.
+
+# Concrete (GOOD) — proceed with implementation
++ The search must return results within 200ms for a 10k record dataset.
++ The UI must follow the design system and achieve 100% Lighthouse Accessibility score.
+```
+
+**Output**: Structured PRD summary with features, models, APIs, components.
+
+## Phase 2: Architecture & Scoping
+
+1. Create architecture diagram (Mermaid)
+2. Define project structure
+3. Plan database schema
+4. Identify shared libraries to use
+5. **Define Non-Goals** — explicitly list what is NOT being built to protect the timeline
+6. **Map User Flows** — trace paths through the system for each persona
+
+```
+project/
+├── app/              # Frontend
+│   ├── pages/
+│   ├── components/
+│   └── services/
+├── backend/          # API layer
+│   ├── routers/
+│   ├── models/
+│   └── services/
+└── tests/
+```
+
+## Phase 3: Implementation Planning
+Break into ordered tasks: Foundation -> Backend -> Frontend -> Integration
+
+## Phase 4: Execution
+- Set up foundation (structure, config, DB connection)
+- Implement backend (models -> repositories -> services -> routers)
+- Implement frontend (components -> pages -> integration)
+- Apply standards: type hints, logging, parameterized queries, tests
+
+**Checkpoint after each component**: run tests, check errors, commit.
+
+## Phase 5: Validation
+- Requirement verification checklist
+- Run all tests (`pytest --cov`)
+- Manual testing (happy path, errors, edge cases)
+- Code quality: no secrets, SQL parameterized, proper error handling
+
+## Phase 6: Completion
+
+```markdown
+## Implementation Summary
+### What Was Built
+### Files Created
+### How to Run
+### Testing
+### Future Improvements
+```
+
+---
+
+## PRD Section Reference
+
+When analyzing a PRD, ensure these sections are present or extracted:
+
+1. **Executive Summary** — Problem statement, proposed solution, 3-5 measurable KPIs
+2. **User Experience** — Personas, user stories (`As a [user], I want to [action] so that [benefit]`), acceptance criteria, non-goals
+3. **Technical Specifications** — Architecture overview, integration points, security & privacy
+4. **AI System Requirements** (if applicable) — Tools, APIs, evaluation strategy
+5. **Risks & Roadmap** — Phased rollout (MVP → v1.1 → v2.0), technical risks
+
+## Implementation Guidelines
+
+### DO
+- **Define Testing**: Specify how to validate output quality before building
+- **Iterate**: Present a draft and ask for feedback on specific sections
+- **Label unknowns**: If the PRD doesn't specify tech stack or constraints, label as `TBD`
+
+### DON'T
+- **Skip Discovery**: Never start coding without asking at least 2 clarifying questions
+- **Hallucinate Constraints**: If the user didn't specify details, ask — don't guess
+
+---
+
+## Checklist
+- [ ] PRD fully analyzed and summarized
+- [ ] Vague requirements converted to measurable criteria
+- [ ] Non-goals explicitly defined
+- [ ] Architecture designed with diagrams
+- [ ] Tasks broken down and prioritized
+- [ ] Each feature implemented with tests
+- [ ] All requirements verified
+- [ ] Documentation complete