@slycode/slycode 0.1.18 → 0.2.0

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

@@ -1,512 +0,0 @@
-# Visualization Libraries Reference
-
-Quick reference for choosing and implementing visualization libraries in single-file HTML explainers.
-
-## Library Selection Matrix
-
-| Library | Best For | CDN | Complexity |
-|---------|----------|-----|------------|
-| Mermaid | Flowcharts, sequence diagrams, ER diagrams | Yes | Low |
-| vis.js | Network graphs, timelines | Yes | Medium |
-| D3.js | Custom data viz, hierarchies, force layouts | Yes | High |
-| Chart.js | Standard charts (bar, line, pie, radar) | Yes | Low |
-| Three.js | 3D visualizations, spatial relationships | Yes | High |
-| Reveal.js | Step-through presentations | Yes | Low |
-| Cytoscape.js | Graph theory, network analysis | Yes | Medium |
-| GSAP | Animations, transitions | Yes | Medium |
-| Prism.js | Code syntax highlighting | Yes | Low |
-
----
-
-## Mermaid
-
-**Use for:** Flowcharts, sequence diagrams, class diagrams, ER diagrams, state diagrams, Gantt charts
-
-### CDN Setup
-```html
-<script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
-<script>mermaid.initialize({ startOnLoad: true, theme: 'dark' });</script>
-```
-
-### Flowchart Example
-```html
-<pre class="mermaid">
-flowchart TD
-    A[Start] --> B{Decision}
-    B -->|Yes| C[Process 1]
-    B -->|No| D[Process 2]
-    C --> E[End]
-    D --> E
-</pre>
-```
-
-### Sequence Diagram Example
-```html
-<pre class="mermaid">
-sequenceDiagram
-    participant Client
-    participant Server
-    participant Database
-    Client->>Server: HTTP Request
-    Server->>Database: Query
-    Database-->>Server: Results
-    Server-->>Client: Response
-</pre>
-```
-
-### Styling
-```html
-<pre class="mermaid">
-%%{init: {'theme': 'dark', 'themeVariables': { 'primaryColor': '#00d4ff'}}}%%
-flowchart LR
-    A --> B
-</pre>
-```
-
----
-
-## vis.js Network
-
-**Use for:** Network graphs, node relationships, architecture diagrams
-
-### CDN Setup
-```html
-<script src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script>
-```
-
-### Basic Network
-```javascript
-const nodes = new vis.DataSet([
-    { id: 1, label: 'Node 1', color: '#00d4ff' },
-    { id: 2, label: 'Node 2', color: '#ff6b6b' },
-    { id: 3, label: 'Node 3', color: '#4ecdc4' }
-]);
-
-const edges = new vis.DataSet([
-    { from: 1, to: 2, label: 'connects' },
-    { from: 2, to: 3, arrows: 'to' }
-]);
-
-const container = document.getElementById('network');
-const data = { nodes, edges };
-const options = {
-    nodes: {
-        shape: 'box',
-        font: { color: '#ffffff' }
-    },
-    edges: {
-        color: { color: '#888888' },
-        font: { color: '#ffffff', strokeWidth: 0 }
-    },
-    physics: {
-        enabled: true,
-        solver: 'forceAtlas2Based'
-    }
-};
-
-const network = new vis.Network(container, data, options);
-```
-
-### Node Shapes
-- `box`, `circle`, `ellipse`, `database`, `diamond`, `dot`, `square`, `star`, `triangle`, `triangleDown`, `hexagon`
-
-### Event Handling
-```javascript
-network.on('click', function(params) {
-    if (params.nodes.length > 0) {
-        const nodeId = params.nodes[0];
-        showNodeDetails(nodeId);
-    }
-});
-```
-
----
-
-## D3.js
-
-**Use for:** Custom visualizations, hierarchical data, force-directed graphs, geographic maps
-
-### CDN Setup
-```html
-<script src="https://d3js.org/d3.v7.min.js"></script>
-```
-
-### Tree Diagram
-```javascript
-const data = {
-    name: "Root",
-    children: [
-        { name: "Child 1", children: [{ name: "Grandchild" }] },
-        { name: "Child 2" }
-    ]
-};
-
-const width = 800, height = 600;
-const svg = d3.select("#tree").append("svg")
-    .attr("width", width).attr("height", height);
-
-const root = d3.hierarchy(data);
-const treeLayout = d3.tree().size([width - 100, height - 100]);
-treeLayout(root);
-
-// Draw links
-svg.selectAll('.link')
-    .data(root.links())
-    .enter().append('path')
-    .attr('class', 'link')
-    .attr('d', d3.linkVertical()
-        .x(d => d.x + 50)
-        .y(d => d.y + 50));
-
-// Draw nodes
-svg.selectAll('.node')
-    .data(root.descendants())
-    .enter().append('circle')
-    .attr('class', 'node')
-    .attr('cx', d => d.x + 50)
-    .attr('cy', d => d.y + 50)
-    .attr('r', 8);
-```
-
-### Force-Directed Graph
-```javascript
-const simulation = d3.forceSimulation(nodes)
-    .force("link", d3.forceLink(links).id(d => d.id).distance(100))
-    .force("charge", d3.forceManyBody().strength(-300))
-    .force("center", d3.forceCenter(width / 2, height / 2));
-
-simulation.on("tick", () => {
-    link.attr("x1", d => d.source.x).attr("y1", d => d.source.y)
-        .attr("x2", d => d.target.x).attr("y2", d => d.target.y);
-    node.attr("cx", d => d.x).attr("cy", d => d.y);
-});
-```
-
----
-
-## Chart.js
-
-**Use for:** Standard charts - bar, line, pie, doughnut, radar, polar
-
-### CDN Setup
-```html
-<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
-```
-
-### Bar Chart
-```javascript
-new Chart(document.getElementById('chart'), {
-    type: 'bar',
-    data: {
-        labels: ['A', 'B', 'C', 'D'],
-        datasets: [{
-            label: 'Values',
-            data: [12, 19, 3, 5],
-            backgroundColor: ['#00d4ff', '#ff6b6b', '#4ecdc4', '#f7dc6f']
-        }]
-    },
-    options: {
-        plugins: {
-            legend: { labels: { color: '#ffffff' } }
-        },
-        scales: {
-            y: { ticks: { color: '#ffffff' }, grid: { color: '#333' } },
-            x: { ticks: { color: '#ffffff' }, grid: { color: '#333' } }
-        }
-    }
-});
-```
-
-### Radar Chart (great for comparisons)
-```javascript
-new Chart(ctx, {
-    type: 'radar',
-    data: {
-        labels: ['Speed', 'Power', 'Memory', 'Disk', 'Network'],
-        datasets: [{
-            label: 'System A',
-            data: [65, 59, 90, 81, 56],
-            borderColor: '#00d4ff',
-            backgroundColor: 'rgba(0, 212, 255, 0.2)'
-        }]
-    }
-});
-```
-
----
-
-## Three.js
-
-**Use for:** 3D architecture visualizations, spatial relationships, immersive experiences
-
-### CDN Setup
-```html
-<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js"></script>
-```
-
-### Basic 3D Scene
-```javascript
-const scene = new THREE.Scene();
-scene.background = new THREE.Color(0x0a0a0f);
-
-const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
-camera.position.z = 5;
-
-const renderer = new THREE.WebGLRenderer({ antialias: true });
-renderer.setSize(container.clientWidth, container.clientHeight);
-container.appendChild(renderer.domElement);
-
-const controls = new THREE.OrbitControls(camera, renderer.domElement);
-
-// Add a box
-const geometry = new THREE.BoxGeometry(1, 1, 1);
-const material = new THREE.MeshBasicMaterial({ color: 0x00d4ff, wireframe: true });
-const cube = new THREE.Mesh(geometry, material);
-scene.add(cube);
-
-function animate() {
-    requestAnimationFrame(animate);
-    cube.rotation.x += 0.01;
-    cube.rotation.y += 0.01;
-    renderer.render(scene, camera);
-}
-animate();
-```
-
-### Creating Node Network in 3D
-```javascript
-function createNode(x, y, z, color = 0x00d4ff) {
-    const geometry = new THREE.SphereGeometry(0.2, 32, 32);
-    const material = new THREE.MeshBasicMaterial({ color });
-    const sphere = new THREE.Mesh(geometry, material);
-    sphere.position.set(x, y, z);
-    return sphere;
-}
-
-function createConnection(start, end) {
-    const points = [start.position, end.position];
-    const geometry = new THREE.BufferGeometry().setFromPoints(points);
-    const material = new THREE.LineBasicMaterial({ color: 0x444444 });
-    return new THREE.Line(geometry, material);
-}
-```
-
----
-
-## Reveal.js
-
-**Use for:** Step-through presentations, guided explanations
-
-### CDN Setup
-```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@4.5.0/dist/reveal.min.css">
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@4.5.0/dist/theme/black.min.css">
-<script src="https://cdn.jsdelivr.net/npm/reveal.js@4.5.0/dist/reveal.min.js"></script>
-```
-
-### Basic Structure
-```html
-<div class="reveal">
-    <div class="slides">
-        <section>Slide 1</section>
-        <section>
-            <section>Vertical Slide 1</section>
-            <section>Vertical Slide 2</section>
-        </section>
-        <section data-auto-animate>
-            <h2>Auto Animate</h2>
-        </section>
-    </div>
-</div>
-<script>Reveal.initialize({ hash: true });</script>
-```
-
-### Fragments (step-through within slides)
-```html
-<section>
-    <p class="fragment">Appears first</p>
-    <p class="fragment fade-up">Fades up second</p>
-    <p class="fragment highlight-red">Highlights third</p>
-</section>
-```
-
----
-
-## Cytoscape.js
-
-**Use for:** Graph theory visualizations, network analysis, biological networks
-
-### CDN Setup
-```html
-<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.23.0/cytoscape.min.js"></script>
-```
-
-### Basic Graph
-```javascript
-const cy = cytoscape({
-    container: document.getElementById('cy'),
-    elements: [
-        { data: { id: 'a', label: 'Node A' } },
-        { data: { id: 'b', label: 'Node B' } },
-        { data: { id: 'ab', source: 'a', target: 'b' } }
-    ],
-    style: [
-        {
-            selector: 'node',
-            style: {
-                'background-color': '#00d4ff',
-                'label': 'data(label)',
-                'color': '#fff'
-            }
-        },
-        {
-            selector: 'edge',
-            style: {
-                'width': 2,
-                'line-color': '#888',
-                'target-arrow-color': '#888',
-                'target-arrow-shape': 'triangle'
-            }
-        }
-    ],
-    layout: { name: 'cose' }
-});
-```
-
----
-
-## GSAP (GreenSock)
-
-**Use for:** Smooth animations, scroll-triggered effects, timeline sequences
-
-### CDN Setup
-```html
-<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
-```
-
-### Basic Animation
-```javascript
-gsap.to('.element', {
-    duration: 1,
-    x: 100,
-    opacity: 1,
-    ease: 'power2.out'
-});
-```
-
-### Timeline
-```javascript
-const tl = gsap.timeline();
-tl.to('.box1', { x: 100, duration: 1 })
-  .to('.box2', { y: 50, duration: 0.5 }, '-=0.5')
-  .to('.box3', { rotation: 360, duration: 1 });
-```
-
-### Scroll-Triggered
-```javascript
-gsap.registerPlugin(ScrollTrigger);
-
-gsap.to('.section', {
-    scrollTrigger: {
-        trigger: '.section',
-        start: 'top center',
-        end: 'bottom center',
-        scrub: true
-    },
-    x: 500
-});
-```
-
----
-
-## Prism.js
-
-**Use for:** Code syntax highlighting
-
-### CDN Setup
-```html
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css">
-<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-python.min.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-javascript.min.js"></script>
-```
-
-### Usage
-```html
-<pre><code class="language-python">
-def hello():
-    print("Hello, World!")
-</code></pre>
-```
-
----
-
-## Icon Libraries
-
-### Lucide Icons (recommended)
-```html
-<script src="https://unpkg.com/lucide@latest"></script>
-<script>lucide.createIcons();</script>
-
-<i data-lucide="server"></i>
-<i data-lucide="database"></i>
-<i data-lucide="globe"></i>
-```
-
-### Font Awesome
-```html
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-
-<i class="fas fa-server"></i>
-<i class="fas fa-database"></i>
-```
-
----
-
-## Color Palettes for Dark Themes
-
-### Cyberpunk/Tech
-```css
---primary: #00d4ff;      /* Cyan */
---secondary: #ff6b6b;    /* Coral */
---accent: #4ecdc4;       /* Teal */
---warning: #f7dc6f;      /* Gold */
---background: #0a0a0f;   /* Near black */
---surface: #1a1a2e;      /* Dark blue-gray */
---text: #e0e0e0;         /* Light gray */
-```
-
-### Professional
-```css
---primary: #3498db;      /* Blue */
---secondary: #2ecc71;    /* Green */
---accent: #9b59b6;       /* Purple */
---warning: #f39c12;      /* Orange */
---background: #1e1e1e;   /* Dark gray */
---surface: #2d2d2d;      /* Medium gray */
---text: #ffffff;         /* White */
-```
-
----
-
-## Responsive Considerations
-
-```css
-@media (max-width: 768px) {
-    .visualization-container {
-        height: 300px;
-    }
-    .sidebar { display: none; }
-    .nav-buttons { flex-direction: column; }
-}
-```
-
-## Performance Tips
-
-1. **Lazy load sections** - Only initialize visualizations when in view
-2. **Use requestAnimationFrame** - For smooth animations
-3. **Debounce resize handlers** - Prevent layout thrashing
-4. **Limit node counts** - Keep vis.js/D3 under 500 nodes for smooth interaction
-5. **Use CSS transforms** - GPU-accelerated animations

package/dist/store/skills/problem_summary/SKILL.md

@@ -1,11 +0,0 @@
----
-name: problem_summary
-version: 1.0.1
-updated: 2026-02-22
-description: Summarize the current issue
----
-
-summarize the problem in one paragraph and everything we tried in the list as well as my last statement about the problem remaining. Give me a summary. Text only.
-No code changes.
-
-$ARGUMENTS