feat(skills): add architecture-diagram skill (Cocoon AI, MIT)

README.md

@@ -111,13 +111,15 @@ claude plugin install qute-essentials@qute-marketplace
 | python-patterns | model-invocable |
 | image-generator | `/image-generator` |
 | llm-external-review | `/llm-external-review` |
+| architecture-diagram | model-invocable |
 | code-quality | `/code-quality [path] [--quick\|--deep]` |
 
 ### Web Development (webdev bundle)
 
 | Skill | Invocation |
 |-------|------------|
 | ui-ux-pro-max | `/ui-ux-pro-max` |
+| architecture-diagram | model-invocable |
 | code-quality | `/code-quality [path] [--quick\|--deep]` |
 
 ### Output
@@ -126,6 +128,7 @@ claude plugin install qute-essentials@qute-marketplace
 |-------|------------|
 | gist-report | `/gist-report` (includes transcript upload) |
 | excalidraw | `/excalidraw` |
+| architecture-diagram | model-invocable (dark-themed HTML + SVG architecture diagrams; quant + webdev) |
 
 ### Meta / Toolkit
 
@@ -181,6 +184,7 @@ claude plugin install qute-essentials@qute-marketplace
 |------|----------|---------|
 | [workflow-qute](docs/playbooks/workflow-qute.md) | `docs/playbooks/` | Full dev session lifecycle with qute-essentials |
 | [workflow-gstack](docs/playbooks/workflow-gstack.md) | `docs/playbooks/` | Release workflow using gstack `/ship` |
+| [impeccable-workflow](docs/playbooks/impeccable-workflow.md) | `docs/playbooks/` | Design polish + anti-pattern detection via Impeccable v2.1 |
 | [Playbooks](docs/playbooks/) | `docs/playbooks/` | All step-by-step workflows |
 | [Cheatsheets](docs/cheatsheets/) | `docs/cheatsheets/` | Quick reference lookups |
 | [Prompts](docs/prompts/) | `docs/prompts/` | Copy-paste into Claude |
@@ -206,6 +210,28 @@ claude plugin install gstack@claude-plugins-official  # or clone to ~/.claude/sk
 
 See `docs/playbooks/workflow-gstack.md` for the ship workflow.
 
+**[Impeccable](https://impeccable.style/)** (v2.1, Apache 2.0) — design skill set for AI harnesses. 18 slash commands teach Claude a concrete design vocabulary; a 25-rule deterministic detection engine catches the usual AI-generated tells (gradient text, Inter everywhere, low-contrast, nested cards). Run `/impeccable teach` once per project to pin brand/fonts/palette in `.impeccable.md`.
+
+Key Impeccable commands:
+
+| Command | Purpose |
+|---------|---------|
+| `/polish` | Default "make this better" pass — typography, spacing, color, hierarchy |
+| `/audit` | Run the 25-rule detection engine and report findings with fixes |
+| `/typeset` | Pure typography pass — type scale, line-height, font pairings |
+| `/layout` | Restructure page or component layout |
+| `/harden` | Accessibility + robustness (contrast, focus states, keyboard) |
+| `/overdrive` | Aggressive redesign when `/polish` is too timid |
+
+```bash
+# Install (pick one)
+/plugin marketplace add pbakaus/impeccable        # in Claude Code
+npx skills add pbakaus/impeccable                 # auto-detects harness
+npm i -g impeccable                               # CI / pre-commit scanner only
+```
+
+See `docs/playbooks/impeccable-workflow.md` for install, setup, and flows.
+
 ## Kit Management
 
 ```bash

claude/bundles/quant.txt

@@ -26,6 +26,7 @@ llm-external-review
 analizy-pl-data
 gist-report
 image-generator
+architecture-diagram
 code-quality
 
 # MCP Servers

claude/bundles/webdev.txt

@@ -13,6 +13,7 @@ pyproject/webdev-uv.toml
 # Skills
 gist-report
 ui-ux-pro-max
+architecture-diagram
 code-quality
 
 # MCP Servers

claude/skills/architecture-diagram/SKILL.md

@@ -0,0 +1,163 @@
+---
+name: architecture-diagram
+description: Create professional, dark-themed architecture diagrams as standalone HTML files with SVG graphics. Use when the user asks for system architecture diagrams, infrastructure diagrams, cloud architecture visualizations, security diagrams, network topology diagrams, or any technical diagram showing system components and their relationships.
+license: MIT
+metadata:
+  version: "1.0"
+  author: Cocoon AI (hello@cocoon-ai.com)
+---
+
+# Architecture Diagram Skill
+
+Create professional technical architecture diagrams as self-contained HTML files with inline SVG graphics and CSS styling.
+
+## Design System
+
+### Color Palette
+
+Use these semantic colors for component types:
+
+| Component Type | Fill (rgba) | Stroke |
+|---------------|-------------|--------|
+| Frontend | `rgba(8, 51, 68, 0.4)` | `#22d3ee` (cyan-400) |
+| Backend | `rgba(6, 78, 59, 0.4)` | `#34d399` (emerald-400) |
+| Database | `rgba(76, 29, 149, 0.4)` | `#a78bfa` (violet-400) |
+| AWS/Cloud | `rgba(120, 53, 15, 0.3)` | `#fbbf24` (amber-400) |
+| Security | `rgba(136, 19, 55, 0.4)` | `#fb7185` (rose-400) |
+| Message Bus | `rgba(251, 146, 60, 0.3)` | `#fb923c` (orange-400) |
+| External/Generic | `rgba(30, 41, 59, 0.5)` | `#94a3b8` (slate-400) |
+
+### Typography
+
+Use JetBrains Mono for all text (monospace, technical aesthetic):
+```html
+<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
+```
+
+Font sizes: 12px for component names, 9px for sublabels, 8px for annotations, 7px for tiny labels.
+
+### Visual Elements
+
+**Background:** `#020617` (slate-950) with subtle grid pattern:
+```svg
+<pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
+  <path d="M 40 0 L 0 0 0 40" fill="none" stroke="#1e293b" stroke-width="0.5"/>
+</pattern>
+```
+
+**Component boxes:** Rounded rectangles (`rx="6"`) with 1.5px stroke, semi-transparent fills.
+
+**Security groups:** Dashed stroke (`stroke-dasharray="4,4"`), transparent fill, rose color.
+
+**Region boundaries:** Larger dashed stroke (`stroke-dasharray="8,4"`), amber color, `rx="12"`.
+
+**Arrows:** Use SVG marker for arrowheads:
+```svg
+<marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
+  <polygon points="0 0, 10 3.5, 0 7" fill="#64748b" />
+</marker>
+```
+
+**Arrow z-order:** Draw connection arrows early in the SVG (after the background grid) so they render behind component boxes. SVG elements are painted in document order, so arrows drawn first will appear behind shapes drawn later.
+
+**Masking arrows behind transparent fills:** Since component boxes use semi-transparent fills (`rgba(..., 0.4)`), arrows behind them will show through. To fully mask arrows, draw an opaque background rect (e.g., `fill="#0f172a"`) at the same position before drawing the semi-transparent styled rect on top:
+```svg
+<!-- Opaque background to mask arrows -->
+<rect x="X" y="Y" width="W" height="H" rx="6" fill="#0f172a"/>
+<!-- Styled component on top -->
+<rect x="X" y="Y" width="W" height="H" rx="6" fill="rgba(76, 29, 149, 0.4)" stroke="#a78bfa" stroke-width="1.5"/>
+```
+
+**Auth/security flows:** Dashed lines in rose color (`#fb7185`).
+
+**Message buses / Event buses:** Small connector elements between services. Use orange color (`#fb923c` stroke, `rgba(251, 146, 60, 0.3)` fill):
+```svg
+<rect x="X" y="Y" width="120" height="20" rx="4" fill="rgba(251, 146, 60, 0.3)" stroke="#fb923c" stroke-width="1"/>
+<text x="CENTER_X" y="Y+14" fill="#fb923c" font-size="7" text-anchor="middle">Kafka / RabbitMQ</text>
+```
+
+### Spacing Rules
+
+**CRITICAL:** When stacking components vertically, ensure proper spacing to avoid overlaps:
+
+- **Standard component height:** 60px for services, 80-120px for larger components
+- **Minimum vertical gap between components:** 40px
+- **Inline connectors (message buses):** Place IN the gap between components, not overlapping
+
+**Example vertical layout:**
+```
+Component A: y=70,  height=60  → ends at y=130
+Gap:         y=130 to y=170   → 40px gap, place bus at y=140 (20px tall)
+Component B: y=170, height=60  → ends at y=230
+```
+
+**Wrong:** Placing a message bus at y=160 when Component B starts at y=170 (causes overlap)
+**Right:** Placing a message bus at y=140, centered in the 40px gap (y=130 to y=170)
+
+### Legend Placement
+
+**CRITICAL:** Place legends OUTSIDE all boundary boxes (region boundaries, cluster boundaries, security groups).
+
+- Calculate where all boundaries end (y position + height)
+- Place legend at least 20px below the lowest boundary
+- Expand SVG viewBox height if needed to accommodate
+
+**Example:**
+```
+Kubernetes Cluster: y=30, height=460 → ends at y=490
+Legend should start at: y=510 or below
+SVG viewBox height: at least 560 to fit legend
+```
+
+**Wrong:** Legend at y=470 inside a cluster boundary that ends at y=490
+**Right:** Legend at y=510, below the cluster boundary, with viewBox height extended
+
+### Layout Structure
+
+1. **Header** - Title with pulsing dot indicator, subtitle
+2. **Main SVG diagram** - Contained in rounded border card
+3. **Summary cards** - Grid of 3 cards below diagram with key details
+4. **Footer** - Minimal metadata line
+
+### Component Box Pattern
+
+```svg
+<rect x="X" y="Y" width="W" height="H" rx="6" fill="FILL_COLOR" stroke="STROKE_COLOR" stroke-width="1.5"/>
+<text x="CENTER_X" y="Y+20" fill="white" font-size="11" font-weight="600" text-anchor="middle">LABEL</text>
+<text x="CENTER_X" y="Y+36" fill="#94a3b8" font-size="9" text-anchor="middle">sublabel</text>
+```
+
+### Info Card Pattern
+
+```html
+<div class="card">
+  <div class="card-header">
+    <div class="card-dot COLOR"></div>
+    <h3>Title</h3>
+  </div>
+  <ul>
+    <li>• Item one</li>
+    <li>• Item two</li>
+  </ul>
+</div>
+```
+
+## Template
+
+Copy and customize the template at `assets/template.html`. Key customization points:
+
+1. Update the `<title>` and header text
+2. Modify SVG viewBox dimensions if needed (default: `1000 x 680`)
+3. Add/remove/reposition component boxes
+4. Draw connection arrows between components
+5. Update the three summary cards
+6. Update footer metadata
+
+## Output
+
+Always produce a single self-contained `.html` file with:
+- Embedded CSS (no external stylesheets except Google Fonts)
+- Inline SVG (no external images)
+- No JavaScript required (pure CSS animations)
+
+The file should render correctly when opened directly in any modern browser.