@tekmidian/pai 0.5.7 → 0.6.0

package/templates/skills/CORE/Aesthetic.md

@@ -1,333 +0,0 @@
-# PAI Visual Aesthetic System
-
-**A modern digital aesthetic combining Tron-inspired neon elements, Anthropic's warm color palette, and Excalidraw's hand-drawn charm.**
-
----
-
-## Core Concept: Digital Warmth
-
-Every visualization balances **futuristic precision** with **human imperfection** — clean digital aesthetics rendered with hand-drawn, sketchy energy that feels approachable and alive.
-
-**The Philosophy:** *"Technology with humanity."*
-- Digital precision meets hand-drawn warmth
-- Neon accents provide energy without overwhelming
-- Sketchy lines convey approachability and thought-in-progress
-- Simplicity = Clarity (remove everything that doesn't serve the message)
-
----
-
-## The PAI Look
-
-### What We Want
-- **Excalidraw-style hand-drawn lines** — Sketchy, rough, whiteboard aesthetic
-- **Tron-inspired neon accents** — Strategic glows on key elements
-- **Anthropic warm palette** — Orange/coral warmth balanced with cool grays
-- **Dark backgrounds** — Deep slate or black for contrast and modern feel
-- **Grid undertones** — Subtle digital grid patterns (optional, tasteful)
-- **Minimal compositions** — 2-4 elements maximum, plenty of breathing room
-
-### Reference Styles
-- **Excalidraw** — Hand-drawn whiteboard diagrams with rough edges
-- **Tron Legacy** — Neon circuit aesthetics, digital grids, glowing elements
-- **Anthropic brand** — Warm orange/coral tones, approachable technology
-- **Cyberpunk wireframes** — Digital blueprint aesthetic
-- **Sketch noting** — Casual, hand-drawn information graphics
-
-### What to AVOID
-- Over-polished corporate vectors
-- Excessive neon (should be accents, not primary)
-- Perfect geometric shapes (keep it sketchy)
-- Cluttered compositions
-- Gradients everywhere (use sparingly for glows only)
-- Photorealistic elements
-
----
-
-## Color System
-
-### Backgrounds
-```
-Deep Slate      #1A202C   (primary - sophisticated dark)
-Pure Black      #000000   (alternative - maximum contrast)
-Dark Grid       #2D3748   (optional subtle grid overlay)
-```
-
-### Primary: Hand-Drawn Lines
-```
-Bright White    #FFFFFF   (dominant sketch lines)
-Light Gray      #E2E8F0   (secondary sketch lines)
-```
-
-### Accent Colors (Tron + Anthropic Fusion)
-```
-Neon Orange     #FF6B35   (Anthropic warmth - primary accent)
-Neon Coral      #FF8C61   (softer warmth variant)
-Cyan Glow       #00D9FF   (Tron digital accent - use sparingly)
-Electric Blue   #0099FF   (secondary digital accent)
-Slate Gray      #4A5568   (neutral technical elements)
-```
-
-**Color Usage Guidelines:**
-- **White/Light Gray** lines dominate (70-80% of composition)
-- **Neon Orange** as primary accent (10-15%) - warmth and energy
-- **Cyan/Blue** as secondary accent (5-10%) - digital sophistication
-- **Glows** only on accent colors, subtle and strategic
-- Balance warm (orange) and cool (cyan) for visual interest
-
-### Color Hierarchy
-1. **WHITE SKETCH LINES are PRIMARY** — hand-drawn, rough, energetic
-2. **Neon Orange as MAIN ACCENT** — warmth, approachability, Anthropic identity
-3. **Cyan/Blue as DIGITAL ACCENT** — technology, precision, Tron influence
-4. **Dark backgrounds** — provide contrast and modern sophistication
-5. **Glows** — subtle, only on neon accents, not overpowering
-
----
-
-## Linework Characteristics
-
-The sketchy hand-drawn quality is critical:
-
-1. **Rough, imperfect strokes** — Like drawing on a whiteboard quickly
-2. **Variable line weight** — Thicker at connections, thinner at ends
-3. **Wobbly curves** — No perfect circles or smooth Béziers
-4. **Multiple overlapping strokes** — Looks hand-drawn, not vector
-5. **Gaps and breaks** — Lines don't always connect perfectly
-6. **Sketchy hatching** — For shading or emphasis areas
-7. **Casual confidence** — Quick strokes, not labored perfection
-
-### This is NOT
-- Clean vector illustration
-- Perfectly smooth curves
-- Uniform stroke weight
-- Polished corporate graphics
-
----
-
-## Neon Glow Effects (Tron Influence)
-
-Strategic use of glowing elements for impact:
-
-1. **Glow placement** — Only on key focal points, not everything
-2. **Subtle intensity** — Soft glow, not overwhelming bloom
-3. **Color-coded** — Orange glows for warm elements, cyan for technical
-4. **Circuit aesthetics** — Glowing lines can suggest digital pathways
-5. **Grid intersections** — Glows at connection points create depth
-6. **Accent, not primary** — Glow enhances, doesn't dominate
-
-**Glow Parameters:**
-- Blur radius: 8-12px for subtle effect
-- Opacity: 40-60% for soft presence
-- Color: Match the accent color (#FF6B35 or #00D9FF)
-- Multiple layers: Inner glow + outer glow for depth
-
----
-
-## Composition Rules
-
-1. **Minimal elements** — 2-4 key components maximum
-2. **Generous negative space** — 40-50% breathing room
-3. **Asymmetric balance** — Dynamic placement, not centered
-4. **Grid alignment** — Elements loosely follow invisible grid
-5. **Hierarchy** — Clear focal point, supporting elements
-6. **Depth through glow** — Layered glows create visual depth
-7. **Hand-drawn feel** — Even geometric shapes look sketched
-
-### Layout Strategies
-- **Circuit board composition** — Elements connected by glowing pathways
-- **Whiteboard sketch** — Casual hand-drawn explanation aesthetic
-- **Digital blueprint** — Technical diagram with neon highlights
-- **Floating elements** — Components suspended in dark space with glows
-- **Grid-anchored** — Subtle grid provides structure, elements break free
-
----
-
-## Visual Metaphors
-
-**How to translate concepts into PAI aesthetic:**
-
-| Concept Type | Visual Strategy | Style Notes |
-|--------------|-----------------|-------------|
-| System Architecture | Connected boxes with glowing pathways | Excalidraw sketch + cyan circuit lines |
-| Data Flow | Hand-drawn arrows with neon trails | Orange flow direction, white sketch |
-| Process Steps | Numbered circles with connecting lines | Sketchy circles, glowing connections |
-| Hierarchies | Tree diagrams with gradient glows | White branches, orange highlights |
-| Relationships | Network graphs with glowing nodes | Cyan nodes, white sketch edges |
-| Transformations | Before/after with glow transition | Orange glow shows transformation |
-
-**The Formula:**
-```
-1. Identify core concept (single clear idea)
-2. Choose appropriate metaphor (diagram type)
-3. Sketch with rough white lines (Excalidraw feel)
-4. Add strategic neon accents (orange warmth, cyan tech)
-5. Apply subtle glows to focal points (Tron influence)
-6. Place on dark background (modern contrast)
-7. Leave generous negative space (clarity and calm)
-```
-
----
-
-## Diagram Types
-
-### Flowcharts
-- Hand-drawn boxes (rough, wobbly edges)
-- Sketchy arrows with slight curves
-- Orange glow on decision points
-- Cyan glow on start/end nodes
-- White primary sketch lines
-
-### Network Diagrams
-- Rough circles for nodes
-- Connecting lines with slight wobble
-- Glowing intersections
-- Color-code by type (orange = warm/human, cyan = technical)
-
-### Architecture Diagrams
-- Sketched rectangles for components
-- Glowing connection lines (circuit aesthetic)
-- Grid undertone for structure
-- Hand-drawn labels in casual script
-
-### Mind Maps
-- Central node with orange glow
-- Radiating branches (white sketch)
-- Secondary nodes with subtle cyan accents
-- Organic, flowing structure
-
----
-
-## Typography (When Needed)
-
-**Hand-drawn casual script:**
-- Looks written by hand, not typed
-- Slightly irregular baseline
-- Variable character spacing
-- Uppercase for emphasis, lowercase for body
-- Orange or white, depending on emphasis
-
-**Avoid:**
-- Perfect geometric fonts
-- All-caps technical fonts
-- Serif fonts
-- Overly decorative fonts
-
----
-
-## Background Variations
-
-### Solid Dark (Default)
-- Deep slate (#1A202C) or pure black
-- Clean, modern, maximum contrast
-- Professional and focused
-
-### Subtle Grid
-- Dark background with faint grid lines
-- Grid opacity: 10-20%
-- Grid color: Lighter slate (#2D3748)
-- Tron/digital blueprint aesthetic
-- Don't overdo - very subtle
-
-### Gradient Dark (Optional)
-- Radial gradient from center to edges
-- Center: Slightly lighter (#2D3748)
-- Edges: Darker (#1A202C or black)
-- Subtle depth without distraction
-
----
-
-## Absolute Rules
-
-1. **HAND-DRAWN SKETCH STYLE** — Rough, imperfect, Excalidraw aesthetic
-2. **DARK BACKGROUNDS** — Deep slate or black for contrast
-3. **WHITE PRIMARY LINES** — Dominant sketch linework
-4. **ORANGE MAIN ACCENT** — Anthropic warmth, approachability
-5. **CYAN SECONDARY ACCENT** — Digital/technical elements (Tron)
-6. **SUBTLE GLOWS** — Strategic, not overwhelming
-7. **MINIMAL ELEMENTS** — 2-4 components maximum
-8. **GENEROUS SPACE** — 40-50% negative space for breathing room
-9. **NO PERFECTION** — Embrace the sketchy, hand-drawn quality
-
----
-
-## AI Generation Prompting
-
-**Positive signals for AI generators:**
-```
-"hand-drawn sketch style"
-"Excalidraw whiteboard aesthetic"
-"rough wobbly lines"
-"imperfect hand-drawn strokes"
-"dark background slate or black"
-"neon orange accents"
-"subtle cyan glow"
-"Tron-inspired neon highlights"
-"digital circuit aesthetic"
-"sketchy casual diagram"
-"whiteboard marker style"
-"multiple overlapping strokes"
-"generous negative space"
-"minimal composition"
-```
-
-**Negative signals:**
-```
---no perfect vectors
---no smooth curves
---no polished corporate
---no cluttered
---no excessive neon
---no photorealistic
---no gradients everywhere
---no bright backgrounds
---no complex compositions
-```
-
----
-
-## Example Prompt Template
-
-```
-Hand-drawn sketch diagram in Excalidraw style on dark slate background (#1A202C).
-
-STYLE: Rough, wobbly white sketch lines. Imperfect hand-drawn strokes.
-Multiple overlapping strokes like whiteboard markers. Variable line weight.
-
-COMPOSITION:
-[Describe 2-4 key elements with rough sketchy boxes/circles/arrows]
-
-ACCENTS:
-- Primary: Neon orange (#FF6B35) glow on [focal element]
-- Secondary: Subtle cyan (#00D9FF) glow on [technical element]
-- Glows: Soft, 40-60% opacity, 8-12px blur
-
-LAYOUT:
-- 40-50% negative space
-- Asymmetric balance
-- Elements loosely grid-aligned
-- Dark background for contrast
-
-CRITICAL:
-- Hand-drawn imperfect quality (NOT smooth vectors)
-- Subtle glows only (NOT overwhelming neon)
-- Minimal elements (2-4 max)
-- Generous breathing room
-- Sketch aesthetic like Excalidraw/whiteboard
-```
-
----
-
-## 🚨 Dynamic Interpretation Required
-
-**Every visualization should:**
-- Match the content's specific needs
-- Use appropriate diagram type (flowchart, network, architecture, etc.)
-- Balance digital precision (Tron) with human warmth (hand-drawn)
-- Combine Anthropic orange warmth with Tron cyan technical accents
-- Maintain sketchy Excalidraw aesthetic throughout
-- Stay minimal and focused
-
-DO NOT create overly complex visuals. The power is in simplicity, clarity, and the unique fusion of hand-drawn warmth with digital neon energy.
-
----
-
-**This is the PAI aesthetic: Where Tron meets Excalidraw, powered by Anthropic's warm orange soul.**