@caddis/cli 0.1.0 → 0.2.0

package/bundles/antigravity-plugin-extras/skills/plantuml/SKILL.md

@@ -0,0 +1,228 @@
+---
+name: plantuml
+context: fork
+description: "Brand-themed PlantUML diagrams for project documentation"
+---
+
+# PlantUML Diagram Generation
+
+Generate PlantUML diagrams for architecture, API flows, and process visualization using project branding.
+
+> **Project Context** — Read `project-config.md` in the repo root for brand tokens, color palette, and project metadata.
+
+## Brand Theme
+
+Use this block at the start of your `.puml` files for consistent brand styling:
+
+```plantuml
+@startuml
+skinparam backgroundColor #F8F9FA
+skinparam defaultFontSize 14
+skinparam defaultFontColor #1F2937
+skinparam rectangle {
+  BackgroundColor #FFF7ED
+  BorderColor #F97316
+  FontColor #1F2937
+}
+skinparam participant {
+  BackgroundColor #F0F9FF
+  BorderColor #0EA5E9
+}
+skinparam database {
+  BackgroundColor #ECFDF5
+  BorderColor #10B981
+}
+skinparam arrow {
+  Color #1F2937
+}
+skinparam arrowColor #E10A0A
+' Use arrowColor for key flows; Color for default
+@enduml
+```
+
+For **sequence diagrams**, you can add:
+
+```plantuml
+skinparam sequenceArrowColor #E10A0A
+skinparam sequenceLifeLineBorderColor #1F2937
+skinparam sequenceParticipantBackgroundColor #F8F9FA
+skinparam sequenceParticipantBorderColor #E10A0A
+```
+
+## Standard Participants
+
+When documenting systems, use consistent participant names where applicable:
+
+| Participant   | Use case                |
+|---------------|-------------------------|
+| Streamlit App | Streamlit dashboards      |
+| FastAPI       | API services              |
+| SQL Server    | Data layer               |
+| Redis / Cache | Caching layer           |
+| User          | End user / operator     |
+
+Example:
+
+```plantuml
+@startuml
+actor User
+participant "Streamlit App" as app
+participant "FastAPI" as api
+database "SQL Server" as db
+User -> app : Request
+app -> api : API call
+api -> db : Query
+db --> api : Result
+api --> app : Response
+app --> User : Display
+@enduml
+```
+
+## Diagram Types
+
+| Type       | Best For                           |
+|------------|-------------------------------------|
+| Sequence   | API calls, request/response flows  |
+| Class      | OOP design, data models            |
+| Component  | System architecture, microservices |
+| Activity   | Workflows, business logic          |
+| State      | State machines, lifecycles         |
+| Deployment | Infrastructure, network topology   |
+
+Use the brand theme above for all diagram types. Syntax reference follows.
+
+### Class diagram
+
+```plantuml
+@startuml
+class User {
+  +id: int
+  +email: str
+  +name: str
+  +authenticate(password): bool
+}
+class Order {
+  +id: int
+  +total: Decimal
+  +status: OrderStatus
+  +calculate_total(): Decimal
+}
+class OrderItem {
+  +quantity: int
+  +unit_price: Decimal
+}
+User "1" -- "*" Order : places >
+Order "1" *-- "*" OrderItem : contains
+@enduml
+```
+
+**Relationship arrows:**
+
+| Arrow    | Meaning        |
+|----------|----------------|
+| `-->`    | Dependency     |
+| `--`     | Association    |
+| `*--`    | Composition    |
+| `o--`    | Aggregation    |
+| `<\|--`  | Inheritance    |
+| `..\|>`  | Implementation |
+
+### Component diagram (packages and dependencies)
+
+```plantuml
+@startuml
+package "Frontend" {
+  [React App] as web
+}
+package "Backend" {
+  [API Gateway] as gw
+  [User Service] as users
+}
+package "Data" {
+  database "PostgreSQL" as pg
+  database "Redis" as redis
+}
+web --> gw : HTTPS
+gw --> users
+gw --> orders
+users --> pg
+orders --> pg
+gw --> redis : cache
+@enduml
+```
+
+### Activity diagram (flow and branches)
+
+```plantuml
+@startuml
+start
+:Receive request;
+if (Authenticated?) then (yes)
+  :Validate input;
+  if (Valid?) then (yes)
+    :Process request;
+    :Return 200 OK;
+  else (no)
+    :Return 400;
+  endif
+else (no)
+  :Return 401;
+endif
+stop
+@enduml
+```
+
+### State diagram
+
+```plantuml
+@startuml
+[*] --> Draft
+Draft --> PendingReview : submit()
+PendingReview --> Approved : approve()
+PendingReview --> Rejected : reject()
+Rejected --> Draft : revise()
+Approved --> Published : publish()
+Published --> [*]
+@enduml
+```
+
+### Deployment diagram
+
+```plantuml
+@startuml
+actor User
+node "CDN" as cdn
+node "Load Balancer" as lb
+node "App Server 1" as app1
+node "App Server 2" as app2
+database "Primary DB" as db1
+database "Replica" as db2
+User --> cdn
+cdn --> lb
+lb --> app1
+lb --> app2
+app1 --> db1
+app2 --> db1
+db1 --> db2 : replication
+@enduml
+```
+
+## Generating Output
+
+```bash
+plantuml diagram.puml          # PNG (default)
+plantuml -tsvg diagram.puml    # SVG
+plantuml -txt diagram.puml     # ASCII art
+plantuml -utxt diagram.puml    # Unicode ASCII
+plantuml -tsvg diagrams/       # Batch process folder
+plantuml -syntax diagram.puml  # Syntax check only
+```
+
+## Tips
+
+1. Apply the brand theme block once per file.
+2. Use Primary Red (#E10A0A) for primary flows or key components.
+3. Keep participant labels short; use "Streamlit App", "FastAPI", "SQL Server" for project context.
+4. Keep diagrams simple — 5–12 elements per diagram.
+5. Use `left to right direction` for horizontal layouts.
+6. Version control `.puml` files; they diff well.

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

@@ -0,0 +1,142 @@
+---
+name: popular-web-designs
+description: 54 real-world design systems (Stripe, Linear, Vercel, Supabase, Apple, Notion, Cursor, etc.) as ready-to-use HTML/CSS reference. Exact color palettes, typography hierarchies, component specs, spacing, shadow systems, and font substitutions. Use when building UI that should match a specific company's aesthetic.
+source: NousResearch/hermes-agent
+---
+
+# Popular Web Designs
+
+54 real-world design systems captured as HTML/CSS references. Each entry maps to a company's complete visual language — colors, typography, components, spacing, shadows, and responsive rules.
+
+## How to Use
+
+1. **Identify the target brand** from the catalog below or from the user's description
+2. **Load the detailed template** by reading `templates/<brand>.md` in this skill directory
+3. **Extract design tokens** and apply to your HTML
+4. **Use the Agent Prompt Guide** in each template for exact CSS values
+
+## Font Substitution (Proprietary → Google Fonts CDN)
+
+| Proprietary Font | CDN Substitute |
+|------------------|----------------|
+| sohne-var (Stripe) | Source Sans 3 |
+| Geist Sans (Vercel) | Geist (on Google Fonts) |
+| Inter Variable (Linear) | Inter |
+| Berkeley Mono (Linear code) | JetBrains Mono |
+| SF Pro Display (Apple) | Inter |
+| Circular (Spotify, Airbnb) | DM Sans |
+| Söhne (Notion) | Inter |
+
+## Design Selection Guide
+
+**Dark UI / dashboards**: Linear, Cursor, ElevenLabs, Warp, xAI, Ollama  
+**Marketing / landing pages**: Stripe, Framer, Apple, SpaceX  
+**Developer tools**: Vercel, Supabase, Raycast, Sentry, PostHog  
+**Content-first / docs**: Mintlify, Notion, Sanity, MongoDB  
+**Terminal / minimal**: Ollama, xAI, VoltAgent, Resend  
+**Fintech / trust**: Stripe, Revolut, Wise, Coinbase  
+**Enterprise / corporate**: IBM, Intercom, Zapier, Airtable  
+
+## Brand Catalog
+
+> Full detailed templates (color systems, typography tables, component specs, agent prompts) are in `templates/`. Quick reference below.
+
+### AI & Machine Learning
+
+| Brand | Aesthetic | Primary Color | Font |
+|-------|-----------|---------------|------|
+| Claude | Warm cream, editorial | `#D97706` amber | Georgia + Inter |
+| Cohere | Navy + coral | `#FF6B6B` | Inter |
+| ElevenLabs | Near-black + purple | `#7C3AED` | Inter |
+| Minimax | Dark + blue | `#3B82F6` | Inter |
+| Mistral AI | Dark navy + gradient | `#FF7849` orange | Inter |
+| Ollama | Terminal black | `#22C55E` green | JetBrains Mono |
+| OpenCode AI | Terminal dark | `#4ADE80` | JetBrains Mono |
+| Replicate | Pure black minimal | `#FFFFFF` | Geist |
+| RunwayML | Black + green accent | `#00E599` | Inter |
+| Together AI | Dark + blue | `#3B82F6` | Inter |
+| VoltAgent | Dark + teal | `#14B8A6` | JetBrains Mono |
+| xAI (Grok) | Pure black + white | `#FFFFFF` | JetBrains Mono |
+
+### Developer Tools & Platforms
+
+| Brand | Aesthetic | Primary Color | Font |
+|-------|-----------|---------------|------|
+| Cursor | VSCode dark + blue | `#3B82F6` | Inter |
+| Expo | Black + blue | `#4630EB` | Inter |
+| Linear | Near-black + indigo | `#5E6AD2` | Inter Variable |
+| Lovable | White + purple gradient | `#7C3AED` | Inter |
+| Mintlify | White + purple | `#7C3AED` | Inter |
+| PostHog | Dark + yellow-orange | `#F97316` | Inter |
+| Raycast | Dark + orange | `#FF6363` | Inter |
+| Resend | Pure black minimal | `#FFFFFF` | Geist |
+| Sentry | Dark + green | `#362D59` + `#F55459` | Rubik |
+| Supabase | Dark + emerald | `#3ECF8E` | Inter |
+| Superhuman | White + dark navy | `#1D1D1D` | -apple-system |
+| Vercel | White+black, no-color | `#171717` | Geist |
+| Warp | Dark + gradient | `#5B53FF` | Inter |
+| Zapier | White + orange | `#FF4A00` | Inter |
+
+### Infrastructure & Cloud
+
+| Brand | Aesthetic | Primary Color | Font |
+|-------|-----------|---------------|------|
+| ClickHouse | Dark + yellow | `#FAFF69` | Inter |
+| Composio | Dark + purple | `#7C3AED` | Inter |
+| HashiCorp | Dark + purple | `#844FBA` | Inter |
+| MongoDB | White + green | `#00ED64` | Euclid |
+| Sanity | White + red | `#F03E2F` | Inter |
+| Stripe | White + purple | `#533AFD` | sohne-var→Source Sans 3 |
+
+### Design & Productivity
+
+| Brand | Aesthetic | Primary Color | Font |
+|-------|-----------|---------------|------|
+| Airtable | White + blue | `#2D7FF9` | Inter |
+| Cal.com | White + black minimal | `#111827` | Cal Sans |
+| Clay | Dark + gradient | `#6366F1` | Inter |
+| Figma | White + purple gradient | `#7C3AED` | Inter |
+| Framer | Dark + gradient | `#0A0A0A` | Inter |
+| Intercom | Navy + white | `#1F8EFA` | Inter |
+| Miro | Yellow + white | `#FFD02F` | Inter |
+| Notion | White + minimal | `#37352F` | ui-sans-serif |
+| Pinterest | White + red | `#E60023` | Helvetica Neue |
+| Webflow | Dark + blue | `#4353FF` | Inter |
+
+### Fintech & Crypto
+
+| Brand | Aesthetic | Primary Color | Font |
+|-------|-----------|---------------|------|
+| Coinbase | White + blue | `#0052FF` | Coinbase Display |
+| Kraken | Dark + purple | `#5741D9` | Inter |
+| Revolut | White + dark navy | `#191C1F` | Inter |
+| Wise | White + teal-green | `#163300` + `#9FE870` | Inter |
+
+### Enterprise & Consumer
+
+| Brand | Aesthetic | Primary Color | Font |
+|-------|-----------|---------------|------|
+| Airbnb | White + red-coral | `#FF5A5F` | Cereal→DM Sans |
+| Apple | White + black minimal | `#0071E3` | SF Pro→Inter |
+| BMW | Dark + blue-silver | `#1C69D4` | BMWTypeNext |
+| IBM | White + blue | `#0F62FE` | IBM Plex |
+| NVIDIA | Black + green | `#76B900` | NVIDIA Sans |
+| SpaceX | Black + minimal | `#FFFFFF` | Inter |
+| Spotify | Black + green | `#1DB954` | Circular→DM Sans |
+| Uber | Black minimal | `#000000` | Uber Move→Inter |
+
+## Detailed Templates Available
+
+Full design specifications (color system, typography table, component specs, responsive rules, agent prompt guide) available for:
+- `templates/linear.app.md` — Linear (complete)
+- `templates/stripe.md` — Stripe (complete)
+- `templates/vercel.md` — Vercel (complete)
+
+Additional templates can be added to `templates/` as needed. When a template doesn't exist, use the quick reference row above combined with knowledge of the brand's established design language.
+
+## Recommended Pairings
+
+- Pair with **`sketch`** for exploring which brand reference fits the brief
+- Pair with **`design-md`** when deliverable is a formal spec file
+- Pair with **`warm-editorial-ui`** for your organization's internal app family (already has a complete custom system)
+- Pair with **`claude-design`** principles (anti-slop quality standards) when building any HTML artifact

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

@@ -0,0 +1,196 @@
+# Design System: Linear
+
+> **Font substitution for self-contained HTML:**
+> - Primary: `Inter` | Mono: `JetBrains Mono`
+> ```html
+> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+> ```
+> CSS stacks:
+> - `font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;`
+> - `font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Courier New', monospace;`
+
+## Visual Theme & Atmosphere
+
+Dark-mode-native product design on a near-black canvas (`#08090a`). Content emerges through calibrated luminance hierarchies — darkness is the native medium, not a theme applied over light. Information density is managed through white opacity gradations rather than color variation.
+
+Inter Variable with OpenType `"cv01" "ss03"` globally transforms Inter into Linear's distinctive typeface. The 510 weight (between regular 400 and medium 500) is the signature emphasis weight. Display sizes use aggressive negative letter-spacing (−1.584px at 72px to −1.056px at 48px). The color system is almost entirely achromatic — dark backgrounds, white/gray text — with a single brand accent: indigo-violet (`#5e6ad2` bg / `#7170ff` interactive).
+
+## Color Palette
+
+### Backgrounds
+| Name | Hex | Use |
+|------|-----|-----|
+| Marketing Black | `#08090a` | Page canvas |
+| Panel Dark | `#0f1011` | Sidebar, panels |
+| Level 3 Surface | `#191a1b` | Cards, dropdowns |
+| Secondary Surface | `#28282c` | Hover states |
+
+### Text
+| Name | Hex | Use |
+|------|-----|-----|
+| Primary Text | `#f7f8f8` | Headings, primary |
+| Secondary Text | `#d0d6e0` | Body, descriptions |
+| Tertiary Text | `#8a8f98` | Placeholders, meta |
+| Quaternary Text | `#62666d` | Timestamps, disabled |
+
+### Brand & Accent
+| Name | Hex | Use |
+|------|-----|-----|
+| Brand Indigo | `#5e6ad2` | CTA backgrounds |
+| Accent Violet | `#7170ff` | Links, active states |
+| Accent Hover | `#828fff` | Hover on accent |
+
+### Borders
+| Name | Value | Use |
+|------|-------|-----|
+| Border Subtle | `rgba(255,255,255,0.05)` | Default |
+| Border Standard | `rgba(255,255,255,0.08)` | Cards, inputs |
+| Border Solid | `#23252a` | Prominent separations |
+
+### Status
+- Success: `#27a644` / `#10b981`
+
+## Typography
+
+Font: Inter Variable with `font-feature-settings: "cv01" "ss03"` on ALL text.
+
+| Role | Size | Weight | Line Height | Letter Spacing |
+|------|------|--------|-------------|----------------|
+| Display XL | 72px | 510 | 1.00 | −1.584px |
+| Display Large | 64px | 510 | 1.00 | −1.408px |
+| Display | 48px | 510 | 1.00 | −1.056px |
+| Heading 1 | 32px | 400 | 1.13 | −0.704px |
+| Heading 2 | 24px | 400 | 1.33 | −0.288px |
+| Heading 3 | 20px | 590 | 1.33 | −0.24px |
+| Body Large | 18px | 400 | 1.60 | −0.165px |
+| Body | 16px | 400 | 1.50 | normal |
+| Body Medium | 16px | 510 | 1.50 | normal |
+| Small | 15px | 400 | 1.60 | −0.165px |
+| Caption | 13px | 400–510 | 1.50 | −0.13px |
+| Label | 12px | 400–590 | 1.40 | normal |
+| Mono Body | 14px JetBrains | 400 | 1.50 | normal |
+
+**Weight system**: 400 (reading), 510 (emphasis/UI), 590 (announce). No 700.
+
+## Component Styles
+
+### Buttons
+```css
+/* Ghost (default) */
+.btn-ghost {
+  background: rgba(255,255,255,0.02);
+  color: #e2e4e7;
+  border: 1px solid rgb(36,40,44);
+  border-radius: 6px;
+  padding: 6px 12px;
+}
+/* Primary (CTA) */
+.btn-primary {
+  background: #5e6ad2;
+  color: #ffffff;
+  border-radius: 6px;
+  padding: 8px 16px;
+}
+.btn-primary:hover { background: #828fff; }
+/* Pill chip */
+.btn-pill {
+  border-radius: 9999px;
+  border: 1px solid #23252a;
+  padding: 0 10px 0 5px;
+  color: #d0d6e0;
+  font-size: 12px;
+  font-weight: 510;
+}
+```
+
+### Cards
+```css
+.card {
+  background: rgba(255,255,255,0.02);
+  border: 1px solid rgba(255,255,255,0.08);
+  border-radius: 8px;
+}
+.card:hover { background: rgba(255,255,255,0.04); }
+```
+
+### Inputs
+```css
+.input {
+  background: rgba(255,255,255,0.02);
+  color: #d0d6e0;
+  border: 1px solid rgba(255,255,255,0.08);
+  border-radius: 6px;
+  padding: 12px 14px;
+}
+```
+
+### Navigation
+```css
+.nav {
+  background: #0f1011;
+  border-bottom: 1px solid rgba(255,255,255,0.05);
+  padding: 0 24px;
+}
+.nav-link {
+  color: #d0d6e0;
+  font-size: 13px;
+  font-weight: 510;
+}
+.nav-link:hover { color: #f7f8f8; }
+```
+
+## Elevation System
+
+| Level | Treatment |
+|-------|-----------|
+| Page | `#010102` / `#08090a` |
+| Panel | `rgba(255,255,255,0.02)` bg |
+| Card | `rgba(255,255,255,0.04)` bg |
+| Elevated | `rgba(255,255,255,0.05)` bg |
+| Focus | Multi-layer shadow stack |
+
+Elevation uses background opacity stepping, not box-shadows. Borders are always semi-transparent white, never solid on dark backgrounds.
+
+## Border Radius Scale
+- Micro (2px): inline badges, toolbar buttons
+- Standard (6px): buttons, inputs
+- Card (8px): cards, dropdowns
+- Panel (12px): featured cards, panels
+- Full Pill (9999px): filter chips, status tags
+- Circle (50%): icon buttons, avatars
+
+## Layout
+- Base unit: 8px
+- Max content width: ~1200px
+- Section spacing: 80px+ (48px mobile)
+
+## Do's and Don'ts
+
+### Do
+- `font-feature-settings: "cv01" "ss03"` on ALL Inter text
+- Use weight 510 as default emphasis
+- Near-black backgrounds: `#08090a` marketing, `#0f1011` panels, `#191a1b` cards
+- Semi-transparent white borders only
+- Button backgrounds nearly transparent (`rgba(255,255,255,0.02–0.05)`)
+- `#f7f8f8` for primary text — not `#ffffff`
+- Brand indigo only for CTA and interactive accents
+
+### Don't
+- No pure white `#ffffff` as primary text
+- No solid colored button backgrounds
+- No positive letter-spacing at display sizes
+- No visible/opaque borders on dark backgrounds
+- No weight 700 — max is 590
+- No warm colors in UI chrome — cool gray + blue-violet only
+- No drop shadows for elevation — use background luminance stepping
+
+## Agent Prompt Guide
+
+**Hero section**:
+"Hero on `#08090a`. Headline 48px Inter Variable weight 510, line-height 1.00, letter-spacing −1.056px, color `#f7f8f8`, `font-feature-settings: 'cv01' 'ss03'`. Subtitle 18px weight 400, line-height 1.60, `#8a8f98`. CTA button: `#5e6ad2` bg, white text, 6px radius, 8px 16px padding. Ghost: `rgba(255,255,255,0.02)` bg, `1px solid rgba(255,255,255,0.08)` border."
+
+**Card**:
+"Card: `rgba(255,255,255,0.02)` bg, `1px solid rgba(255,255,255,0.08)` border, 8px radius. Title 20px Inter 590, `#f7f8f8`, −0.24px tracking, `'cv01' 'ss03'`. Body 15px 400, `#8a8f98`, −0.165px."
+
+**Navigation**:
+"Sticky nav on `#0f1011`. Links 13px Inter 510 `#d0d6e0`. Brand indigo CTA. Bottom border `1px solid rgba(255,255,255,0.05)`."