@slycode/slycode 0.1.19 → 0.2.0

package/dist/store/skills/interactive-explainer/references/design_patterns.md

@@ -1,486 +0,0 @@
-# Design Patterns for Interactive Explainers
-
-Patterns for structuring and visualizing different types of content.
-
----
-
-## Content Type Detection
-
-Analyze the request to determine the primary content type:
-
-| Content Type | Indicators | Primary Pattern |
-|--------------|------------|-----------------|
-| **Code Architecture** | "explain the codebase", "how does X work", file paths, class names | Component Network |
-| **Data Flow** | "data pipeline", "message flow", "request handling" | Animated Flow |
-| **API Documentation** | "endpoints", "REST", "WebSocket", parameters | Interactive Reference |
-| **User Workflow** | "how to use", "user guide", "tutorial" | Step-Through Guide |
-| **System Design** | "infrastructure", "deployment", "services" | 3D Architecture |
-| **Concept/Theory** | "explain concept", "how does X work" (abstract) | Progressive Reveal |
-| **Comparison** | "vs", "compare", "differences" | Side-by-Side Matrix |
-| **Process/Pipeline** | "pipeline", "stages", "workflow" | Animated Pipeline |
-
----
-
-## Pattern 1: Component Network
-
-**Best for:** Code architecture, module relationships, class hierarchies
-
-### Structure
-```
-[Header with project name]
-[Interactive network graph - main focus]
-[Sidebar with component details on click]
-[Filter controls by component type]
-```
-
-### Implementation Approach
-1. Extract components/modules from codebase
-2. Map dependencies and relationships
-3. Create vis.js or Cytoscape network
-4. Add click handlers to show details
-5. Color-code by component type
-
-### Visual Elements
-- **Nodes**: Boxes/circles for components
-- **Edges**: Lines showing dependencies (directed arrows)
-- **Colors**: Group by layer (UI, API, Data, etc.)
-- **Size**: Proportional to complexity or importance
-
-### Example Node Structure
-```javascript
-{
-    id: 'MessageStore',
-    label: 'MessageStore',
-    group: 'state',
-    title: 'Manages message state and WebSocket sync',
-    shape: 'box',
-    color: { background: '#4ecdc4', border: '#3aa89a' }
-}
-```
-
----
-
-## Pattern 2: Animated Flow
-
-**Best for:** Data pipelines, request/response cycles, event flows
-
-### Structure
-```
-[Title bar]
-[Main flow diagram with animated particles]
-[Stage details panel - updates on hover]
-[Play/Pause controls]
-```
-
-### Implementation Approach
-1. Identify flow stages
-2. Create linear or branching path
-3. Animate "data packets" along paths
-4. Show transformations at each stage
-5. Allow click to pause and inspect
-
-### Visual Elements
-- **Nodes**: Processing stages
-- **Paths**: Curved lines between stages
-- **Particles**: Animated dots representing data
-- **Annotations**: Labels showing transformations
-
-### Animation Technique (CSS)
-```css
-@keyframes flowParticle {
-    0% { offset-distance: 0%; }
-    100% { offset-distance: 100%; }
-}
-
-.particle {
-    offset-path: path('M0,50 C100,0 200,100 300,50');
-    animation: flowParticle 3s linear infinite;
-}
-```
-
----
-
-## Pattern 3: Interactive Reference
-
-**Best for:** API documentation, configuration options, schema reference
-
-### Structure
-```
-[Search/filter bar]
-[Category sidebar]
-[Main content area with expandable sections]
-[Code examples with copy buttons]
-```
-
-### Implementation Approach
-1. Organize content by category
-2. Create collapsible sections
-3. Add search functionality
-4. Include copy-to-clipboard for code
-5. Link related items
-
-### Visual Elements
-- **Cards**: For each endpoint/option
-- **Tags**: For method types (GET, POST, etc.)
-- **Code blocks**: Syntax highlighted
-- **Tables**: For parameters
-
-### Interactive Features
-```javascript
-// Expandable sections
-document.querySelectorAll('.section-header').forEach(header => {
-    header.addEventListener('click', () => {
-        header.nextElementSibling.classList.toggle('expanded');
-    });
-});
-
-// Search filtering
-searchInput.addEventListener('input', (e) => {
-    const query = e.target.value.toLowerCase();
-    items.forEach(item => {
-        item.style.display = item.textContent.toLowerCase().includes(query)
-            ? 'block' : 'none';
-    });
-});
-```
-
----
-
-## Pattern 4: Step-Through Guide
-
-**Best for:** Tutorials, user workflows, onboarding
-
-### Structure
-```
-[Progress bar showing steps]
-[Main content area - one step at a time]
-[Prev/Next navigation]
-[Optional: mini-map of all steps]
-```
-
-### Implementation Approach
-1. Break content into logical steps
-2. Create slide-like sections
-3. Add progress indicator
-4. Include visual aids per step
-5. Allow keyboard navigation
-
-### Navigation Pattern
-```javascript
-let currentStep = 0;
-const steps = document.querySelectorAll('.step');
-
-function showStep(index) {
-    steps.forEach((step, i) => {
-        step.classList.toggle('active', i === index);
-    });
-    updateProgressBar(index);
-}
-
-document.addEventListener('keydown', (e) => {
-    if (e.key === 'ArrowRight') showStep(Math.min(currentStep + 1, steps.length - 1));
-    if (e.key === 'ArrowLeft') showStep(Math.max(currentStep - 1, 0));
-});
-```
-
-### Progress Bar
-```html
-<div class="progress-bar">
-    <div class="progress-fill" style="width: 33%"></div>
-    <div class="step-indicators">
-        <span class="indicator active">1</span>
-        <span class="indicator">2</span>
-        <span class="indicator">3</span>
-    </div>
-</div>
-```
-
----
-
-## Pattern 5: 3D Architecture
-
-**Best for:** System infrastructure, cloud architecture, spatial relationships
-
-### Structure
-```
-[3D canvas - full width]
-[Control panel: zoom, rotate, reset]
-[Layer toggle buttons]
-[Info panel for selected node]
-```
-
-### Implementation Approach
-1. Identify architectural layers
-2. Position nodes in 3D space (x, y, z)
-3. Create connections between components
-4. Add orbit controls for exploration
-5. Implement click-to-inspect
-
-### Three.js Layout Pattern
-```javascript
-// Layer-based positioning
-const layers = {
-    frontend: { y: 2, color: 0x00d4ff },
-    api: { y: 0, color: 0x4ecdc4 },
-    database: { y: -2, color: 0xff6b6b }
-};
-
-function createNode(name, layer, x, z) {
-    const { y, color } = layers[layer];
-    const mesh = createBoxMesh(color);
-    mesh.position.set(x, y, z);
-    mesh.userData = { name, layer };
-    return mesh;
-}
-```
-
----
-
-## Pattern 6: Progressive Reveal
-
-**Best for:** Concepts, theory, complex explanations
-
-### Structure
-```
-[Central concept/diagram]
-[Surrounding detail cards - initially hidden]
-[Click central element to reveal details]
-[Animation connecting concept to details]
-```
-
-### Implementation Approach
-1. Identify core concept
-2. List supporting details/sub-concepts
-3. Create radial or hierarchical layout
-4. Animate reveal on interaction
-5. Allow drill-down into sub-topics
-
-### Reveal Animation
-```javascript
-function revealDetails(category) {
-    const details = document.querySelectorAll(`[data-category="${category}"]`);
-    details.forEach((detail, i) => {
-        setTimeout(() => {
-            detail.classList.add('visible');
-            gsap.from(detail, {
-                scale: 0,
-                opacity: 0,
-                duration: 0.5,
-                ease: 'back.out'
-            });
-        }, i * 100);
-    });
-}
-```
-
----
-
-## Pattern 7: Side-by-Side Comparison
-
-**Best for:** Technology comparisons, before/after, option evaluation
-
-### Structure
-```
-[Comparison header with options]
-[Split view or tabbed view]
-[Feature matrix table]
-[Visual comparison charts]
-```
-
-### Implementation Approach
-1. Identify comparison criteria
-2. Create structured data for each option
-3. Build responsive comparison layout
-4. Add charts for quantitative comparisons
-5. Highlight differences
-
-### Comparison Table Pattern
-```html
-<table class="comparison-matrix">
-    <thead>
-        <tr>
-            <th>Feature</th>
-            <th>Option A</th>
-            <th>Option B</th>
-        </tr>
-    </thead>
-    <tbody>
-        <tr>
-            <td>Speed</td>
-            <td class="positive">Fast</td>
-            <td class="neutral">Medium</td>
-        </tr>
-    </tbody>
-</table>
-```
-
----
-
-## Pattern 8: Animated Pipeline
-
-**Best for:** CI/CD, data processing, ETL workflows
-
-### Structure
-```
-[Linear pipeline visualization]
-[Stage cards with expand/collapse]
-[Animated data flow indicators]
-[Status indicators per stage]
-```
-
-### Implementation Approach
-1. Map pipeline stages
-2. Create horizontal flow layout
-3. Add animated connectors
-4. Show input/output for each stage
-5. Include failure/success states
-
-### Pipeline Stage Component
-```html
-<div class="pipeline">
-    <div class="stage" data-status="complete">
-        <div class="stage-icon"><i data-lucide="git-branch"></i></div>
-        <div class="stage-label">Build</div>
-        <div class="stage-detail">Compiles TypeScript, bundles assets</div>
-    </div>
-    <div class="connector"><div class="flow-particle"></div></div>
-    <div class="stage" data-status="active">
-        <div class="stage-icon"><i data-lucide="test-tube"></i></div>
-        <div class="stage-label">Test</div>
-    </div>
-</div>
-```
-
----
-
-## Section Structuring Guidelines
-
-### Optimal Section Count
-- **Minimum**: 3 sections (introduction, core content, summary)
-- **Maximum**: 8-10 sections (avoid overwhelming)
-- **Sweet spot**: 5-7 sections for most topics
-
-### Section Types to Include
-
-1. **Overview/Introduction**
-   - What is this about?
-   - Why does it matter?
-   - Key terms defined
-
-2. **Architecture/Structure**
-   - How is it organized?
-   - What are the main components?
-
-3. **Flow/Process**
-   - How does data/control flow?
-   - What are the steps?
-
-4. **Deep Dive Sections**
-   - One per major component
-   - Include code examples
-   - Show real usage
-
-5. **Connections/Integration**
-   - How do parts connect?
-   - External dependencies
-
-6. **Summary/Reference**
-   - Quick reference
-   - Key takeaways
-   - Links to more info
-
----
-
-## UI Component Patterns
-
-### Navigation Bar
-```html
-<nav class="explainer-nav">
-    <div class="nav-title">Topic Name</div>
-    <div class="nav-sections">
-        <button class="nav-btn active" data-section="0">Overview</button>
-        <button class="nav-btn" data-section="1">Architecture</button>
-        <button class="nav-btn" data-section="2">Deep Dive</button>
-    </div>
-    <div class="nav-controls">
-        <button class="btn-prev">Previous</button>
-        <span class="section-counter">1 / 5</span>
-        <button class="btn-next">Next</button>
-    </div>
-</nav>
-```
-
-### Detail Panel
-```html
-<aside class="detail-panel" id="detailPanel">
-    <div class="panel-header">
-        <h3 class="panel-title"></h3>
-        <button class="panel-close">&times;</button>
-    </div>
-    <div class="panel-content">
-        <div class="panel-description"></div>
-        <div class="panel-code">
-            <pre><code></code></pre>
-        </div>
-        <div class="panel-links"></div>
-    </div>
-</aside>
-```
-
-### Info Card
-```html
-<div class="info-card" data-type="component">
-    <div class="card-icon"><i data-lucide="box"></i></div>
-    <div class="card-content">
-        <h4 class="card-title">Component Name</h4>
-        <p class="card-description">Brief description</p>
-        <div class="card-meta">
-            <span class="meta-item"><i data-lucide="file"></i> 5 files</span>
-            <span class="meta-item"><i data-lucide="git-branch"></i> 12 deps</span>
-        </div>
-    </div>
-</div>
-```
-
----
-
-## Responsive Design Considerations
-
-### Breakpoint Strategy
-```css
-/* Mobile first */
-.section { padding: 1rem; }
-.visualization { height: 300px; }
-
-/* Tablet */
-@media (min-width: 768px) {
-    .section { padding: 2rem; }
-    .visualization { height: 400px; }
-    .sidebar { display: block; }
-}
-
-/* Desktop */
-@media (min-width: 1024px) {
-    .section { padding: 3rem; }
-    .visualization { height: 500px; }
-    .layout { display: grid; grid-template-columns: 250px 1fr; }
-}
-```
-
-### Touch-Friendly Interactions
-- Minimum tap target: 44x44px
-- Swipe navigation for sections
-- Pinch-to-zoom for diagrams
-- Long-press for details (mobile)
-
----
-
-## Accessibility Checklist
-
-- [ ] Keyboard navigation works for all interactive elements
-- [ ] Color is not the only indicator (use icons/patterns too)
-- [ ] Alt text for images and icons
-- [ ] ARIA labels for interactive diagrams
-- [ ] Focus indicators visible
-- [ ] Text contrast meets WCAG AA (4.5:1)
-- [ ] Screen reader announcements for dynamic content