@drunkcoding/agents-and-skills 0.0.45 → 0.0.46

package/plugins/tech-graph/skills/tech-graph/references/style-1-flat-icon.md

@@ -1,108 +0,0 @@
-# Style 1: Flat Icon (Default)
-
-Inspired by draw.io defaults and Apple documentation style.
-
-## Colors
-
-```
-Background:     #ffffff
-Box fill:       #ffffff
-Box stroke:     #d1d5db  (gray-300)
-Box radius:     8px
-Text primary:   #111827  (gray-900)
-Text secondary: #6b7280  (gray-500)
-
-Semantic arrow colors (pick by flow type):
-  Flow A (main):   #2563eb  (blue-600)
-  Flow B (alt):    #dc2626  (red-600)
-  Flow C (data):   #16a34a  (green-600)
-  Flow D (async):  #9333ea  (purple-600)
-
-Icon accent backgrounds:
-  Blue tint:   #eff6ff / #dbeafe
-  Red tint:    #fef2f2 / #fee2e2
-  Green tint:  #f0fdf4 / #dcfce7
-  Purple tint: #faf5ff / #ede9fe
-  Orange tint: #fff7ed / #fed7aa
-  Teal tint:   #f0fdfa / #ccfbf1
-```
-
-## Typography
-
-```
-font-family: 'Helvetica Neue', Helvetica, Arial, 'PingFang SC',
-             'Microsoft YaHei', 'Microsoft JhengHei', 'SimHei', sans-serif
-font-size:   14px labels, 12px sub-labels, 16px titles
-font-weight: 400 normal, 600 semi-bold for titles
-```
-
-## Box Shapes
-
-```xml
-<!-- Standard node box -->
-<rect rx="8" ry="8" fill="#ffffff" stroke="#d1d5db" stroke-width="1.5"/>
-
-<!-- Icon accent box (colored background) -->
-<rect rx="8" ry="8" fill="#eff6ff" stroke="#bfdbfe" stroke-width="1.5"/>
-
-<!-- Database cylinder (use SVG path) -->
-<!-- Terminal box: rx=4, fill=#111827, stroke=#374151 -->
-<!-- User/actor: circle or rounded rect with icon -->
-```
-
-## Arrows
-
-```xml
-<defs>
-  <marker id="arrow-blue" markerWidth="10" markerHeight="7"
-          refX="9" refY="3.5" orient="auto">
-    <polygon points="0 0, 10 3.5, 0 7" fill="#2563eb"/>
-  </marker>
-  <marker id="arrow-red" markerWidth="10" markerHeight="7"
-          refX="9" refY="3.5" orient="auto">
-    <polygon points="0 0, 10 3.5, 0 7" fill="#dc2626"/>
-  </marker>
-</defs>
-
-<!-- Line -->
-<line stroke="#2563eb" stroke-width="1.5" marker-end="url(#arrow-blue)"/>
-<!-- Or path for curved/orthogonal routing -->
-<path stroke="#2563eb" stroke-width="1.5" fill="none" marker-end="url(#arrow-blue)"/>
-```
-
-## Legend
-
-Always include a legend in the bottom-left if multiple arrow colors are used:
-
-```xml
-<g transform="translate(20, 560)">
-  <line x1="0" y1="8" x2="30" y2="8" stroke="#2563eb" stroke-width="1.5"
-        marker-end="url(#arrow-blue)"/>
-  <text x="36" y="12" fill="#6b7280" font-size="12">Agent flow</text>
-  <line x1="0" y1="24" x2="30" y2="24" stroke="#dc2626" stroke-width="1.5"
-        marker-end="url(#arrow-red)"/>
-  <text x="36" y="28" fill="#6b7280" font-size="12">RAG flow</text>
-</g>
-```
-
-## SVG Template
-
-```xml
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 600" 
-     width="960" height="600">
-  <style>
-    /* NO @import — cairosvg / rsvg-convert cannot fetch external URLs */
-    text { font-family: 'Helvetica Neue', Helvetica, Arial, 'PingFang SC', 'Microsoft YaHei', 'Microsoft JhengHei', 'SimHei', sans-serif; }
-  </style>
-  <defs>
-    <!-- arrow markers here -->
-    <!-- gradients/filters if needed -->
-  </defs>
-  <!-- white background -->
-  <rect width="960" height="600" fill="#ffffff"/>
-  <!-- diagram title (optional) -->
-  <!-- nodes -->
-  <!-- edges -->
-  <!-- legend -->
-</svg>
-```

package/plugins/tech-graph/skills/tech-graph/references/style-2-dark-terminal.md

@@ -1,107 +0,0 @@
-# Style 2: Dark Terminal
-
-Neon-on-dark hacker aesthetic. Matches CLAUDE.md standard tech diagram style.
-
-## Colors
-
-```
-Background:     #0f0f1a  (near-black)
-Panel fill:     #0f172a  (slate-950)
-Panel stroke:   #334155  (slate-700)
-Box radius:     6px
-
-Text primary:   #e2e8f0  (slate-200)
-Text secondary: #94a3b8  (slate-400)
-Text muted:     #475569  (slate-600)
-
-Accent palette (use per theme/layer):
-  Purple:   #7c3aed / #a855f7
-  Orange:   #ea580c / #f97316
-  Blue:     #1d4ed8 / #3b82f6
-  Green:    #059669 / #10b981
-  Gold:     #eab308
-  Red:      #dc2626 / #ef4444
-
-Arrow colors: match accent of the source node's theme
-```
-
-## Background Gradient
-
-```xml
-<defs>
-  <linearGradient id="bg-grad" x1="0%" y1="0%" x2="100%" y2="100%">
-    <stop offset="0%" stop-color="#0f0f1a"/>
-    <stop offset="100%" stop-color="#1a1a2e"/>
-  </linearGradient>
-</defs>
-<rect width="960" height="600" fill="url(#bg-grad)"/>
-```
-
-## Typography
-
-```
-font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', 'Courier New', 'Microsoft YaHei', 'SimHei', monospace
-font-size:   13px labels, 11px sub-labels, 15px titles
-font-weight: 400 normal, 700 bold for section headers
-letter-spacing: 0.02em for labels
-```
-
-## Box Styles
-
-```xml
-<!-- Standard panel -->
-<rect rx="6" ry="6" fill="#0f172a" stroke="#334155" stroke-width="1"/>
-
-<!-- Colored accent box (themed by function) -->
-<rect rx="6" ry="6" fill="#1e1b4b" stroke="#7c3aed" stroke-width="1.5"/>
-<!-- Purple for AI/ML nodes -->
-<!-- #1c1917 / #ea580c for compute/API nodes -->
-<!-- #052e16 / #059669 for storage/DB nodes -->
-<!-- #1e3a5f / #3b82f6 for network/gateway nodes -->
-```
-
-## Glow Effect (optional, for key nodes)
-
-```xml
-<defs>
-  <filter id="glow-purple">
-    <feGaussianBlur stdDeviation="3" result="blur"/>
-    <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
-  </filter>
-</defs>
-<rect filter="url(#glow-purple)" stroke="#a855f7" .../>
-```
-
-## Arrows
-
-```xml
-<defs>
-  <marker id="arrow-purple" markerWidth="8" markerHeight="6"
-          refX="7" refY="3" orient="auto">
-    <polygon points="0 0, 8 3, 0 6" fill="#a855f7"/>
-  </marker>
-</defs>
-<path stroke="#a855f7" stroke-width="1.5" stroke-dasharray="none"
-      fill="none" marker-end="url(#arrow-purple)"/>
-```
-
-## SVG Template
-
-```xml
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 600"
-     width="960" height="600">
-  <style>
-    text { font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', 'Courier New', 'Microsoft YaHei', 'SimHei', monospace; fill: #e2e8f0; }
-  </style>
-  <defs>
-    <linearGradient id="bg-grad" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" stop-color="#0f0f1a"/>
-      <stop offset="100%" stop-color="#1a1a2e"/>
-    </linearGradient>
-    <!-- arrow markers -->
-    <!-- glow filters -->
-  </defs>
-  <rect width="960" height="600" fill="url(#bg-grad)"/>
-  <!-- nodes, edges, legend -->
-</svg>
-```

package/plugins/tech-graph/skills/tech-graph/references/style-3-blueprint.md

@@ -1,113 +0,0 @@
-# Style 3: Blueprint
-
-Engineering blueprint aesthetic with grid background and technical annotation style.
-
-## Colors
-
-```
-Background:     #0a1628
-Grid color:     #112240  (subtle grid lines)
-Panel fill:     #0d1f3c
-Panel stroke:   #00b4d8  (cyan/teal)
-Box radius:     2px  (sharp corners for technical feel)
-
-Text primary:   #caf0f8  (light cyan)
-Text secondary: #90e0ef
-Text label:     #00b4d8
-Text muted:     #48cae4 at 60% opacity
-
-Accent colors:
-  Cyan:    #00b4d8 / #48cae4
-  White:   #ffffff (key labels)
-  Orange:  #f77f00 (warnings/alerts)
-  Green:   #06d6a0 (success/active)
-```
-
-## Background with Grid
-
-```xml
-<defs>
-  <pattern id="grid" width="30" height="30" patternUnits="userSpaceOnUse">
-    <path d="M 30 0 L 0 0 0 30" fill="none" 
-          stroke="#112240" stroke-width="0.5"/>
-  </pattern>
-</defs>
-<rect width="960" height="600" fill="#0a1628"/>
-<rect width="960" height="600" fill="url(#grid)" opacity="0.6"/>
-```
-
-## Typography
-
-```
-font-family: 'Courier New', 'Lucida Console', 'Microsoft YaHei', 'SimHei', monospace
-font-size:   13px labels, 10px annotations, 16px title
-font-weight: 400; titles use 700
-text-transform: uppercase for section headers
-letter-spacing: 0.05em
-```
-
-## Box Styles
-
-```xml
-<!-- Technical node box -->
-<rect rx="2" ry="2" fill="#0d1f3c" stroke="#00b4d8" stroke-width="1"/>
-
-<!-- Corner brackets instead of full border (engineering style) -->
-<!-- Draw 4 L-shapes at corners instead of full rect -->
-
-<!-- Dashed box (external/optional component) -->
-<rect rx="2" fill="none" stroke="#00b4d8" stroke-width="1" 
-      stroke-dasharray="6,3"/>
-```
-
-## Arrows & Annotations
-
-```xml
-<defs>
-  <marker id="arrow-cyan" markerWidth="8" markerHeight="6"
-          refX="7" refY="3" orient="auto">
-    <polygon points="0 0, 8 3, 0 6" fill="#00b4d8"/>
-  </marker>
-</defs>
-<!-- Lines are sharp, orthogonal routing preferred -->
-<polyline points="x1,y1 x2,y1 x2,y2" 
-          stroke="#00b4d8" stroke-width="1" fill="none"
-          marker-end="url(#arrow-cyan)"/>
-
-<!-- Annotation label on line -->
-<text fill="#48cae4" font-size="10" text-anchor="middle">HTTP/REST</text>
-```
-
-## Title Block (bottom-right)
-
-```xml
-<!-- Blueprint title block -->
-<rect x="700" y="530" width="240" height="60" 
-      fill="#0d1f3c" stroke="#00b4d8" stroke-width="1"/>
-<line x1="700" y1="545" x2="940" y2="545" 
-      stroke="#00b4d8" stroke-width="0.5"/>
-<text x="820" y="542" text-anchor="middle" 
-      fill="#caf0f8" font-size="10">SYSTEM ARCHITECTURE</text>
-<text x="820" y="578" text-anchor="middle" 
-      fill="#00b4d8" font-size="13" font-weight="700">DIAGRAM TITLE</text>
-```
-
-## SVG Template
-
-```xml
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 600"
-     width="960" height="600">
-  <style>
-    text { font-family: 'Courier New', 'Lucida Console', 'Microsoft YaHei', 'SimHei', monospace; fill: #caf0f8; }
-  </style>
-  <defs>
-    <pattern id="grid" width="30" height="30" patternUnits="userSpaceOnUse">
-      <path d="M 30 0 L 0 0 0 30" fill="none" stroke="#112240" stroke-width="0.5"/>
-    </pattern>
-    <!-- arrow markers -->
-  </defs>
-  <rect width="960" height="600" fill="#0a1628"/>
-  <rect width="960" height="600" fill="url(#grid)" opacity="0.6"/>
-  <!-- nodes, edges, title block -->
-</svg>
-```

package/plugins/tech-graph/skills/tech-graph/references/style-4-notion-clean.md

@@ -1,95 +0,0 @@
-# Style 4: Notion Clean
-
-Minimal, documentation-friendly. Designed to embed in Notion, Confluence, or GitHub wikis.
-
-## Colors
-
-```
-Background:     #ffffff
-Box fill:       #f9fafb  (gray-50) or #ffffff
-Box stroke:     #e5e7eb  (gray-200)
-Box radius:     4px
-
-Text primary:   #111827  (gray-900)
-Text secondary: #374151  (gray-700)
-Text muted:     #9ca3af  (gray-400)
-Text label:     #6b7280  (gray-500), uppercase, 11px
-
-Accent (subtle, used sparingly):
-  Blue:   #3b82f6 (arrows only)
-  Gray:   #d1d5db (dividers)
-```
-
-## Design Principles
-
-- **No decorative icons** — use geometric shapes only (rect, circle, diamond)
-- **Generous whitespace** — 24px+ padding between elements  
-- **Single arrow color** — blue (#3b82f6) for all connections
-- **Labels in ALL CAPS** — section headers and node type labels
-- **No drop shadows** — flat only
-
-## Typography
-
-```
-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
-             'Helvetica Neue', Arial, 'PingFang SC', 'Microsoft YaHei',
-             'Microsoft JhengHei', 'SimHei', sans-serif
-font-size:   14px labels, 11px uppercase type labels, 18px title
-font-weight: 400 normal, 500 medium for node labels
-```
-
-## Box Styles
-
-```xml
-<!-- Standard node -->
-<rect rx="4" fill="#f9fafb" stroke="#e5e7eb" stroke-width="1"/>
-<text fill="#111827" font-size="14" font-weight="500"/>
-
-<!-- Type label (inside or above box) -->
-<text fill="#9ca3af" font-size="11" 
-      font-weight="500" letter-spacing="0.08em">DATABASE</text>
-
-<!-- Section grouping (dashed container) -->
-<rect rx="4" fill="none" stroke="#e5e7eb" stroke-width="1" 
-      stroke-dasharray="4,3"/>
-```
-
-## Arrows
-
-```xml
-<defs>
-  <marker id="arrow-blue" markerWidth="8" markerHeight="6"
-          refX="7" refY="3" orient="auto">
-    <polygon points="0 0, 8 3, 0 6" fill="#3b82f6"/>
-  </marker>
-</defs>
-<line stroke="#3b82f6" stroke-width="1.5" 
-      marker-end="url(#arrow-blue)"/>
-<!-- Optional: gray arrow for secondary flows -->
-<line stroke="#d1d5db" stroke-width="1" 
-      stroke-dasharray="4,3" marker-end="url(#arrow-gray)"/>
-```
-
-## SVG Template
-
-```xml
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 560"
-     width="960" height="560">
-  <style>
-    text { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, 'PingFang SC', 'Microsoft YaHei', 'Microsoft JhengHei', 'SimHei', sans-serif; }
-  </style>
-  <defs>
-    <!-- arrow markers (blue only) -->
-  </defs>
-  <rect width="960" height="560" fill="#ffffff"/>
-  <!-- nodes (no icons, geometry only) -->
-  <!-- edges (single color) -->
-  <!-- legend (minimal, only if 2+ flows) -->
-</svg>
-```
-
-## Sizing Guide
-
-- Node box: min 120×40px, prefer 160×48px for readability
-- Title: top-left, 18px, gray-900, margin 32px from edges
-- Spacing: 80px minimum between nodes horizontally, 60px vertically

package/plugins/tech-graph/skills/tech-graph/references/style-5-glassmorphism.md

@@ -1,125 +0,0 @@
-# Style 5: Glassmorphism
-
-Frosted glass cards on dark gradient. Designed for product sites, keynotes, and hero sections.
-
-## Colors
-
-```
-Background gradient: #0d1117 → #161b22 → #0d1117 (diagonal)
-
-Glass card:
-  fill:           rgba(255,255,255,0.05)
-  stroke:         rgba(255,255,255,0.15)
-  backdrop-filter: blur(12px)  [SVG: use feGaussianBlur]
-  box-radius:     12px
-
-Text primary:   #f0f6fc  (near-white)
-Text secondary: #8b949e  (muted)
-Text gradient:  use linearGradient on text fill for hero labels
-
-Accent glows (one per layer):
-  Blue glow:    #58a6ff  / rgba(88,166,255,0.3)
-  Purple glow:  #bc8cff  / rgba(188,140,255,0.3)
-  Green glow:   #3fb950  / rgba(63,185,80,0.3)
-  Orange glow:  #f78166  / rgba(247,129,102,0.3)
-```
-
-## Background
-
-```xml
-<defs>
-  <linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
-    <stop offset="0%"   stop-color="#0d1117"/>
-    <stop offset="50%"  stop-color="#161b22"/>
-    <stop offset="100%" stop-color="#0d1117"/>
-  </linearGradient>
-  <!-- Ambient glow spots -->
-  <radialGradient id="glow-blue" cx="30%" cy="40%" r="40%">
-    <stop offset="0%" stop-color="rgba(88,166,255,0.15)"/>
-    <stop offset="100%" stop-color="rgba(88,166,255,0)"/>
-  </radialGradient>
-  <radialGradient id="glow-purple" cx="70%" cy="60%" r="35%">
-    <stop offset="0%" stop-color="rgba(188,140,255,0.12)"/>
-    <stop offset="100%" stop-color="rgba(188,140,255,0)"/>
-  </radialGradient>
-</defs>
-<rect width="960" height="600" fill="url(#bg)"/>
-<rect width="960" height="600" fill="url(#glow-blue)"/>
-<rect width="960" height="600" fill="url(#glow-purple)"/>
-```
-
-## Glass Card Effect
-
-SVG cannot do real backdrop-filter, so simulate with:
-
-```xml
-<defs>
-  <filter id="glass-blur">
-    <feGaussianBlur in="SourceGraphic" stdDeviation="0.5"/>
-  </filter>
-</defs>
-
-<!-- Glass card: layered rects -->
-<!-- 1. Subtle inner shadow -->
-<rect rx="12" fill="rgba(255,255,255,0.03)" stroke="none"/>
-<!-- 2. Glass body -->
-<rect rx="12" fill="rgba(255,255,255,0.06)" 
-      stroke="rgba(255,255,255,0.15)" stroke-width="1"/>
-<!-- 3. Top highlight line -->
-<line stroke="rgba(255,255,255,0.25)" stroke-width="1"/>
-```
-
-## Typography
-
-```
-font-family: 'Inter', -apple-system, 'SF Pro Display', 'PingFang SC', 'Microsoft YaHei', 'Microsoft JhengHei', 'SimHei', sans-serif
-font-size:   14px labels, 12px sublabels, 20px hero title
-font-weight: 400 normal, 600 semi-bold, 700 bold titles
-```
-
-## Gradient Text (for hero labels)
-
-```xml
-<defs>
-  <linearGradient id="text-grad-blue" x1="0%" y1="0%" x2="100%" y2="0%">
-    <stop offset="0%"   stop-color="#58a6ff"/>
-    <stop offset="100%" stop-color="#bc8cff"/>
-  </linearGradient>
-</defs>
-<text fill="url(#text-grad-blue)" font-weight="700" font-size="20">
-  AI Pipeline
-</text>
-```
-
-## Arrows
-
-```xml
-<defs>
-  <marker id="arrow-blue" markerWidth="8" markerHeight="6"
-          refX="7" refY="3" orient="auto">
-    <polygon points="0 0, 8 3, 0 6" fill="#58a6ff"/>
-  </marker>
-</defs>
-<!-- Slightly glowing line -->
-<path stroke="#58a6ff" stroke-width="1.5" fill="none"
-      opacity="0.8" marker-end="url(#arrow-blue)"/>
-```
-
-## SVG Template
-
-```xml
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 600"
-     width="960" height="600">
-  <style>
-    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
-    text { font-family: 'Inter', -apple-system, 'SF Pro Display', 'PingFang SC', 'Microsoft YaHei', 'Microsoft JhengHei', 'SimHei', sans-serif; fill: #f0f6fc; }
-  </style>
-  <defs>
-    <!-- bg gradients, glow gradients, glass filter, arrow markers -->
-  </defs>
-  <!-- background layers -->
-  <!-- glass cards (nodes) -->
-  <!-- glowing edges -->
-  <!-- labels with gradient text for heroes -->
-</svg>
-```