PyPI - localcoder - Versions diffs - 0.2.1__tar.gz → 0.4.0__tar.gz - Mend

localcoder 0.2.1tar.gz → 0.4.0tar.gz

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (66) hide show

localcoder-0.4.0/.agents/skills/flashcards/SKILL.md ADDED Viewed

@@ -0,0 +1,42 @@
+---
+name: flashcards
+description: Build a flashcard study app. Use when asked to create flashcards, vocabulary cards, study app, memorization tool, language learning cards, or any flip-card learning experience.
+---
+# Flashcards Template
+Build flip-card study apps from this template. Works for vocabulary, language learning, history facts, science terms — any topic with front/back pairs.
+## How to use
+1. Read the template: `assets/index.html`
+2. Copy it to the user's project directory with `write_file`
+3. Customize these parts:
+   - Replace `{{TITLE}}` with the app name (e.g. "French Vocabulary")
+   - Replace `{{ICON}}` with an emoji (e.g. 🇫🇷, 🧠, 📚)
+   - Replace `{{SUBTITLE}}` with a tagline
+   - Replace the `CARDS` array with your content:
+     ```js
+     const CARDS = [
+       { front: "Question", back: "Answer", emoji: "📝", detail: "Extra info" },
+     ];
+     ```
+## Built-in features (don't rebuild these)
+- 3D flip card animation (CSS transform)
+- Know it / Again buttons (spaced repetition)
+- Progress bar and score tracking
+- Cards shuffle on restart
+- "Again" cards go back in the deck
+- End screen with final score
+- Mobile responsive
+## Testing
+After creating the app, verify:
+1. Card displays front text
+2. Tapping flips to show back
+3. Know/Again buttons appear after flip
+4. Progress bar advances
+5. End screen shows when deck is empty

localcoder-0.4.0/.agents/skills/flashcards/assets/index.html ADDED Viewed

@@ -0,0 +1,158 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>{{TITLE}}</title>
+<style>
+@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;900&display=swap');
+*{margin:0;padding:0;box-sizing:border-box}
+:root{--bg:#fefce8;--card:#fff;--primary:#8b5cf6;--accent:#ec4899;--correct:#10b981;--text:#1e293b;--dim:#94a3b8;--radius:20px}
+body{font-family:'Nunito',sans-serif;background:var(--bg);color:var(--text);min-height:100dvh;display:flex;align-items:center;justify-content:center}
+.app{max-width:440px;width:100%;padding:24px;display:flex;flex-direction:column;align-items:center;gap:20px}
+.header{text-align:center}
+h1{font-size:2rem;font-weight:900;color:var(--primary)}
+.subtitle{color:var(--dim);font-size:0.9rem;margin-top:4px}
+.score-row{display:flex;gap:16px;font-size:0.95rem;font-weight:700;color:var(--dim)}
+.score-row span{color:var(--text)}
+/* Flip card */
+.card-container{width:100%;height:280px;perspective:1000px;cursor:pointer}
+.card-inner{position:relative;width:100%;height:100%;transition:transform 0.6s cubic-bezier(.4,0,.2,1);transform-style:preserve-3d}
+.card-container.flipped .card-inner{transform:rotateY(180deg)}
+.card-front,.card-back{position:absolute;inset:0;backface-visibility:hidden;border-radius:var(--radius);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px;box-shadow:0 4px 24px rgba(0,0,0,0.06)}
+.card-front{background:linear-gradient(135deg,#8b5cf6,#6366f1);color:#fff}
+.card-back{background:var(--card);transform:rotateY(180deg);border:2px solid #e2e8f0}
+.card-emoji{font-size:3rem;margin-bottom:12px}
+.card-text{font-size:1.6rem;font-weight:900;text-align:center}
+.card-hint{font-size:0.85rem;margin-top:8px;opacity:0.7}
+.card-answer{font-size:1.4rem;font-weight:700;color:var(--primary);text-align:center}
+.card-detail{font-size:0.9rem;color:var(--dim);margin-top:8px;text-align:center}
+/* Buttons */
+.btn-row{display:flex;gap:10px;width:100%}
+.btn{flex:1;border:none;border-radius:14px;padding:14px;font-size:1rem;font-weight:700;font-family:inherit;cursor:pointer;transition:all .15s}
+.btn-know{background:var(--correct);color:#fff}
+.btn-know:hover{transform:translateY(-2px)}
+.btn-again{background:#fee2e2;color:#ef4444}
+.btn-again:hover{transform:translateY(-2px)}
+.btn-primary{background:var(--accent);color:#fff;width:100%;padding:16px;font-size:1.1rem}
+.progress{width:100%;height:6px;background:#e2e8f0;border-radius:99px;overflow:hidden}
+.progress-fill{height:100%;background:var(--primary);border-radius:99px;transition:width .3s}
+.tap-hint{color:var(--dim);font-size:0.8rem;animation:pulse 2s infinite}
+@keyframes pulse{0%,100%{opacity:0.5}50%{opacity:1}}
+</style>
+</head>
+<body>
+<div class="app">
+  <div class="header">
+    <h1>{{ICON}} {{TITLE}}</h1>
+    <p class="subtitle">{{SUBTITLE}}</p>
+  </div>
+  <div class="score-row">
+    <div>✅ Know: <span id="known">0</span></div>
+    <div>🔄 Again: <span id="again">0</span></div>
+    <div>📚 Left: <span id="left">0</span></div>
+  </div>
+  <div class="progress"><div class="progress-fill" id="progressBar" style="width:0%"></div></div>
+  <div class="card-container" id="flashcard" onclick="flipCard()">
+    <div class="card-inner">
+      <div class="card-front">
+        <div class="card-emoji" id="cardEmoji">📝</div>
+        <div class="card-text" id="cardFront">Loading...</div>
+        <div class="card-hint">Tap to flip</div>
+      </div>
+      <div class="card-back">
+        <div class="card-answer" id="cardBack">Answer</div>
+        <div class="card-detail" id="cardDetail"></div>
+      </div>
+    </div>
+  </div>
+  <p class="tap-hint" id="tapHint">👆 Tap the card to reveal</p>
+  <div class="btn-row" id="actions" style="display:none">
+    <button class="btn btn-again" onclick="markAgain()">🔄 Again</button>
+    <button class="btn btn-know" onclick="markKnown()">✅ Know It!</button>
+  </div>
+  <!-- End screen -->
+  <div id="endScreen" style="display:none;text-align:center">
+    <h1>🎉 All Done!</h1>
+    <p style="font-size:1.2rem;margin:12px 0">You knew <strong id="finalKnown">0</strong> out of <strong id="finalTotal">0</strong></p>
+    <button class="btn btn-primary" onclick="restart()">Study Again 🔄</button>
+  </div>
+</div>
+<script>
+// ── CARD DATA — Agent replaces this array ──
+const CARDS = [
+  { front: "Hello", back: "Bonjour", emoji: "👋", detail: "French greeting" },
+  { front: "Thank you", back: "Merci", emoji: "🙏", detail: "Express gratitude" },
+  { front: "Goodbye", back: "Au revoir", emoji: "👋", detail: "Farewell" },
+  { front: "Please", back: "S'il vous plaît", emoji: "🤲", detail: "Polite request" },
+  { front: "Yes", back: "Oui", emoji: "✅", detail: "Affirmative" },
+  { front: "No", back: "Non", emoji: "❌", detail: "Negative" },
+  { front: "Water", back: "Eau", emoji: "💧", detail: "Essential for life" },
+  { front: "Food", back: "Nourriture", emoji: "🍽️", detail: "Sustenance" },
+];
+let deck = [], known = 0, again = 0, current = null, isFlipped = false;
+function shuffle(arr) { return [...arr].sort(() => Math.random() - 0.5); }
+function restart() {
+  deck = shuffle(CARDS); known = 0; again = 0; isFlipped = false;
+  document.getElementById('endScreen').style.display = 'none';
+  document.getElementById('flashcard').style.display = '';
+  document.getElementById('tapHint').style.display = '';
+  updateUI(); showNext();
+}
+function updateUI() {
+  document.getElementById('known').textContent = known;
+  document.getElementById('again').textContent = again;
+  document.getElementById('left').textContent = deck.length;
+  const total = CARDS.length;
+  document.getElementById('progressBar').style.width = `${((total - deck.length)/total)*100}%`;
+}
+function showNext() {
+  if (deck.length === 0) { endGame(); return; }
+  current = deck.shift();
+  isFlipped = false;
+  document.getElementById('flashcard').classList.remove('flipped');
+  document.getElementById('cardEmoji').textContent = current.emoji;
+  document.getElementById('cardFront').textContent = current.front;
+  document.getElementById('cardBack').textContent = current.back;
+  document.getElementById('cardDetail').textContent = current.detail || '';
+  document.getElementById('actions').style.display = 'none';
+  document.getElementById('tapHint').style.display = '';
+  updateUI();
+}
+function flipCard() {
+  if (isFlipped) return;
+  isFlipped = true;
+  document.getElementById('flashcard').classList.add('flipped');
+  document.getElementById('actions').style.display = 'flex';
+  document.getElementById('tapHint').style.display = 'none';
+}
+function markKnown() { known++; updateUI(); showNext(); }
+function markAgain() { again++; deck.push(current); updateUI(); showNext(); }
+function endGame() {
+  document.getElementById('flashcard').style.display = 'none';
+  document.getElementById('tapHint').style.display = 'none';
+  document.getElementById('actions').style.display = 'none';
+  document.getElementById('finalKnown').textContent = known;
+  document.getElementById('finalTotal').textContent = CARDS.length;
+  document.getElementById('endScreen').style.display = '';
+}
+restart();
+</script>
+</body>
+</html>

localcoder-0.4.0/.agents/skills/gallery/assets/index.html ADDED Viewed

@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>{{TITLE}}</title>
+<style>
+@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700&display=swap');
+*{margin:0;padding:0;box-sizing:border-box}
+:root{--bg:#0a0a0f;--card:rgba(255,255,255,0.04);--border:rgba(255,255,255,0.08);--text:#e4e4e7;--dim:#71717a;--accent:#f97316;--radius:16px}
+body{font-family:'Outfit',sans-serif;background:var(--bg);color:var(--text);min-height:100dvh}
+.container{max-width:1200px;margin:0 auto;padding:40px 20px}
+.hero{text-align:center;padding:60px 0 40px}
+h1{font-size:3rem;font-weight:700;background:linear-gradient(135deg,var(--accent),#ec4899);-webkit-background-clip:text;color:transparent}
+.hero-sub{color:var(--dim);font-size:1.1rem;margin-top:8px;max-width:500px;margin-left:auto;margin-right:auto}
+/* Masonry grid */
+.gallery{columns:3;column-gap:16px;padding:20px 0}
+@media(max-width:768px){.gallery{columns:2}}
+@media(max-width:480px){.gallery{columns:1}}
+.gallery-item{break-inside:avoid;margin-bottom:16px;border-radius:var(--radius);overflow:hidden;background:var(--card);border:1px solid var(--border);transition:transform .2s,box-shadow .2s;cursor:pointer}
+.gallery-item:hover{transform:translateY(-4px);box-shadow:0 8px 32px rgba(0,0,0,0.3)}
+.gallery-item img{width:100%;display:block}
+.gallery-item .caption{padding:12px 16px;font-size:0.85rem;color:var(--dim)}
+.gallery-item .caption strong{color:var(--text);display:block;margin-bottom:4px}
+/* Lightbox */
+.lightbox{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.9);z-index:100;align-items:center;justify-content:center;cursor:pointer}
+.lightbox.active{display:flex}
+.lightbox img{max-width:90vw;max-height:90vh;border-radius:12px;object-fit:contain}
+.lightbox-close{position:fixed;top:20px;right:20px;color:#fff;font-size:2rem;cursor:pointer;z-index:101}
+/* Footer */
+.footer{text-align:center;padding:40px 0;color:var(--dim);font-size:0.8rem;letter-spacing:0.05em;text-transform:uppercase}
+/* Fade in animation */
+.gallery-item{opacity:0;animation:fadeUp .5s ease-out forwards}
+@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
+</style>
+</head>
+<body>
+<div class="container">
+  <div class="hero">
+    <h1>{{TITLE}}</h1>
+    <p class="hero-sub">{{SUBTITLE}}</p>
+  </div>
+  <div class="gallery" id="gallery">
+    <!-- Agent populates these items with searched images -->
+    <div class="gallery-item" style="animation-delay:0.0s" onclick="openLightbox(this)">
+      <img src="https://source.unsplash.com/random/600x400/?{{KEYWORD}}&sig=1" alt="" loading="lazy">
+      <div class="caption"><strong>{{CAPTION_1}}</strong>{{DETAIL_1}}</div>
+    </div>
+    <div class="gallery-item" style="animation-delay:0.1s" onclick="openLightbox(this)">
+      <img src="https://source.unsplash.com/random/600x800/?{{KEYWORD}}&sig=2" alt="" loading="lazy">
+      <div class="caption"><strong>{{CAPTION_2}}</strong>{{DETAIL_2}}</div>
+    </div>
+    <div class="gallery-item" style="animation-delay:0.2s" onclick="openLightbox(this)">
+      <img src="https://source.unsplash.com/random/600x500/?{{KEYWORD}}&sig=3" alt="" loading="lazy">
+      <div class="caption"><strong>{{CAPTION_3}}</strong>{{DETAIL_3}}</div>
+    </div>
+    <div class="gallery-item" style="animation-delay:0.3s" onclick="openLightbox(this)">
+      <img src="https://source.unsplash.com/random/600x700/?{{KEYWORD}}&sig=4" alt="" loading="lazy">
+      <div class="caption"><strong>{{CAPTION_4}}</strong>{{DETAIL_4}}</div>
+    </div>
+    <div class="gallery-item" style="animation-delay:0.4s" onclick="openLightbox(this)">
+      <img src="https://source.unsplash.com/random/600x600/?{{KEYWORD}}&sig=5" alt="" loading="lazy">
+      <div class="caption"><strong>{{CAPTION_5}}</strong>{{DETAIL_5}}</div>
+    </div>
+    <div class="gallery-item" style="animation-delay:0.5s" onclick="openLightbox(this)">
+      <img src="https://source.unsplash.com/random/600x450/?{{KEYWORD}}&sig=6" alt="" loading="lazy">
+      <div class="caption"><strong>{{CAPTION_6}}</strong>{{DETAIL_6}}</div>
+    </div>
+  </div>
+  <div class="footer">{{FOOTER}}</div>
+</div>
+<div class="lightbox" id="lightbox" onclick="closeLightbox()">
+  <span class="lightbox-close">&times;</span>
+  <img id="lightbox-img" src="" alt="">
+</div>
+<script>
+function openLightbox(item) {
+  const img = item.querySelector('img');
+  document.getElementById('lightbox-img').src = img.src.replace(/\/\d+x\d+\//, '/1200x900/');
+  document.getElementById('lightbox').classList.add('active');
+}
+function closeLightbox() {
+  document.getElementById('lightbox').classList.remove('active');
+}
+document.addEventListener('keydown', e => { if(e.key==='Escape') closeLightbox(); });
+</script>
+</body>
+</html>

localcoder-0.4.0/.agents/skills/quiz-game/SKILL.md ADDED Viewed

@@ -0,0 +1,48 @@
+---
+name: quiz-game
+description: Build an interactive quiz game app. Use when asked to create a quiz, trivia, math game, learning game, educational game, or any multiple-choice question app. Supports SVG visuals, score tracking, confetti, and sound effects.
+---
+# Quiz Game Template
+Build interactive quiz apps from this template. Works for math, trivia, vocabulary, science — any topic with questions and answers.
+## How to use
+1. Read the template: `assets/index.html`
+2. Copy it to the user's project directory with `write_file`
+3. Customize these parts:
+   - Replace `{{TITLE}}` with the app name (e.g. "Math Fractions Quiz")
+   - Replace `{{ICON}}` with an emoji (e.g. 🍕, 🧮, 🌍)
+   - Replace `{{SUBTITLE}}` with a tagline
+   - Replace `{{QUESTION_TEXT}}` with the question prompt
+   - Modify the `generateQuestion()` function for your topic
+   - Modify the `drawPie()` function or replace with different SVG visuals
+   - Update CSS colors in `:root` to match the theme
+## Built-in features (don't rebuild these)
+- Start screen → Game screen → End screen transitions
+- SVG pie chart with real Math.cos/Math.sin arc paths
+- 4 answer buttons with correct/wrong animations
+- Score counter with ⭐ stars
+- Progress bar
+- Confetti celebration on correct answer
+- Web Audio API sound effects
+- Mobile responsive
+## Example customizations
+**Math fractions:** Keep the SVG pie, change questions to fractions
+**World capitals:** Remove SVG, show country flag emoji, change to geography questions
+**Vocabulary:** Remove SVG, show word in large text, answers are definitions
+**Times tables:** Remove SVG, show "7 × 8 = ?", answers are numbers
+## Testing
+After creating the app, verify:
+1. PLAY button hides start screen and shows game
+2. SVG visual renders correctly (if using pie chart)
+3. Clicking an answer shows correct/wrong feedback
+4. Score increments on correct answers
+5. End screen shows after all questions

localcoder-0.4.0/.agents/skills/quiz-game/assets/index.html ADDED Viewed

@@ -0,0 +1,213 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>{{TITLE}}</title>
+<style>
+@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;900&display=swap');
+*{margin:0;padding:0;box-sizing:border-box}
+:root{--bg:#f0fdf4;--card:#fff;--primary:#10b981;--accent:#f97316;--wrong:#ef4444;--text:#1e293b;--dim:#94a3b8;--radius:20px}
+body{font-family:'Nunito',sans-serif;background:var(--bg);color:var(--text);min-height:100dvh;display:flex;align-items:center;justify-content:center}
+.screen{display:none;flex-direction:column;align-items:center;gap:24px;padding:32px;max-width:480px;width:100%}
+.screen.active{display:flex}
+.card{background:var(--card);border-radius:var(--radius);padding:32px;width:100%;box-shadow:0 4px 24px rgba(0,0,0,0.06);text-align:center}
+h1{font-size:2.2rem;font-weight:900;color:var(--primary)}
+.subtitle{color:var(--dim);font-size:1rem;margin-top:4px}
+.btn{border:none;border-radius:14px;padding:16px 40px;font-size:1.1rem;font-weight:700;font-family:inherit;cursor:pointer;transition:all .15s}
+.btn-primary{background:var(--accent);color:#fff;box-shadow:0 4px 16px rgba(249,115,22,0.3)}
+.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(249,115,22,0.4)}
+.btn-option{background:var(--card);border:2px solid #e2e8f0;width:100%;padding:14px;font-size:1.05rem;border-radius:14px}
+.btn-option:hover{border-color:var(--primary);background:#f0fdf4}
+.btn-option.correct{background:#d1fae5;border-color:var(--primary);animation:pop .3s}
+.btn-option.wrong{background:#fee2e2;border-color:var(--wrong);animation:shake .3s}
+@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.05)}100%{transform:scale(1)}}
+@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
+.options{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%}
+.visual{width:200px;height:200px;margin:0 auto}
+.score-bar{display:flex;align-items:center;gap:8px;font-size:1.1rem;font-weight:700}
+.stars{letter-spacing:4px;font-size:1.3rem}
+.progress{width:100%;height:6px;background:#e2e8f0;border-radius:99px;overflow:hidden}
+.progress-fill{height:100%;background:var(--primary);border-radius:99px;transition:width .3s}
+/* Confetti */
+.confetti-piece{position:fixed;width:10px;height:10px;border-radius:2px;animation:confetti-fall 1.5s ease-out forwards;pointer-events:none;z-index:999}
+@keyframes confetti-fall{0%{transform:translateY(-20px) rotate(0deg);opacity:1}100%{transform:translateY(100vh) rotate(720deg);opacity:0}}
+</style>
+</head>
+<body>
+<!-- START SCREEN -->
+<div id="start" class="screen active">
+  <div class="card">
+    <h1>{{ICON}} {{TITLE}}</h1>
+    <p class="subtitle">{{SUBTITLE}}</p>
+  </div>
+  <button class="btn btn-primary" onclick="startGame()">PLAY! ▶️</button>
+</div>
+<!-- GAME SCREEN -->
+<div id="game" class="screen">
+  <div class="score-bar">
+    <span id="scoreNum">0</span> pts
+    <span class="stars" id="stars"></span>
+  </div>
+  <div class="progress"><div class="progress-fill" id="progressBar" style="width:0%"></div></div>
+  <div class="card">
+    <div class="visual" id="visual">
+      <!-- SVG or visual goes here — agent customizes this -->
+      <svg viewBox="0 0 200 200" id="pieSvg"></svg>
+    </div>
+    <p id="question" style="margin-top:16px;font-size:1.15rem;font-weight:700">{{QUESTION_TEXT}}</p>
+  </div>
+  <div class="options" id="options">
+    <!-- Agent generates answer buttons dynamically -->
+  </div>
+</div>
+<!-- END SCREEN -->
+<div id="end" class="screen">
+  <div class="card">
+    <h1>🎉 Great Job!</h1>
+    <p style="font-size:1.3rem;margin:12px 0">Score: <strong id="finalScore">0</strong></p>
+    <p class="stars" id="finalStars"></p>
+  </div>
+  <button class="btn btn-primary" onclick="startGame()">Play Again 🔄</button>
+</div>
+<script>
+// ── CONFIG — Agent customizes these ──
+const TOTAL_QUESTIONS = 10;
+const QUESTION_TEXT = "{{QUESTION_TEXT}}";
+// ── STATE ──
+let score = 0, question = 0, correctAnswer = null;
+function showScreen(id) {
+  document.querySelectorAll('.screen').forEach(s => s.classList.remove('active'));
+  document.getElementById(id).classList.add('active');
+}
+function startGame() {
+  score = 0; question = 0;
+  document.getElementById('scoreNum').textContent = '0';
+  document.getElementById('stars').textContent = '';
+  document.getElementById('progressBar').style.width = '0%';
+  showScreen('game');
+  nextQuestion();
+}
+// ── VISUAL: SVG Pie Chart — draws fraction as colored slices ──
+function drawPie(numerator, denominator) {
+  const svg = document.getElementById('pieSvg');
+  svg.innerHTML = '';
+  const cx=100, cy=100, r=85;
+  // Background circle
+  const bg = document.createElementNS('http://www.w3.org/2000/svg','circle');
+  bg.setAttribute('cx',cx); bg.setAttribute('cy',cy); bg.setAttribute('r',r);
+  bg.setAttribute('fill','#f1f5f9'); bg.setAttribute('stroke','#cbd5e1'); bg.setAttribute('stroke-width','2');
+  svg.appendChild(bg);
+  // Draw slices
+  for (let i = 0; i < denominator; i++) {
+    const startAngle = (i * 360 / denominator - 90) * Math.PI / 180;
+    const endAngle = ((i+1) * 360 / denominator - 90) * Math.PI / 180;
+    const x1 = cx + r * Math.cos(startAngle);
+    const y1 = cy + r * Math.sin(startAngle);
+    const x2 = cx + r * Math.cos(endAngle);
+    const y2 = cy + r * Math.sin(endAngle);
+    const large = (360/denominator > 180) ? 1 : 0;
+    const path = document.createElementNS('http://www.w3.org/2000/svg','path');
+    path.setAttribute('d', `M${cx},${cy} L${x1},${y1} A${r},${r} 0 ${large},1 ${x2},${y2} Z`);
+    path.setAttribute('fill', i < numerator ? 'var(--primary)' : '#e2e8f0');
+    path.setAttribute('stroke', '#fff'); path.setAttribute('stroke-width', '2');
+    svg.appendChild(path);
+  }
+}
+// ── QUESTION GENERATOR — Agent customizes this function ──
+function generateQuestion() {
+  const denominators = [2, 3, 4, 5, 6, 8];
+  const d = denominators[Math.floor(Math.random() * denominators.length)];
+  const n = Math.floor(Math.random() * (d - 1)) + 1;
+  correctAnswer = `${n}/${d}`;
+  drawPie(n, d);
+  document.getElementById('question').textContent = QUESTION_TEXT;
+  // Generate 4 options (1 correct + 3 wrong)
+  const opts = new Set([correctAnswer]);
+  while (opts.size < 4) {
+    const wd = denominators[Math.floor(Math.random() * denominators.length)];
+    const wn = Math.floor(Math.random() * (wd - 1)) + 1;
+    opts.add(`${wn}/${wd}`);
+  }
+  const shuffled = [...opts].sort(() => Math.random() - 0.5);
+  const container = document.getElementById('options');
+  container.innerHTML = '';
+  shuffled.forEach(opt => {
+    const btn = document.createElement('button');
+    btn.className = 'btn btn-option';
+    btn.textContent = opt;
+    btn.onclick = () => checkAnswer(btn, opt);
+    container.appendChild(btn);
+  });
+}
+function checkAnswer(btn, selected) {
+  document.querySelectorAll('.btn-option').forEach(b => b.disabled = true);
+  if (selected === correctAnswer) {
+    btn.classList.add('correct');
+    score++;
+    document.getElementById('scoreNum').textContent = score;
+    document.getElementById('stars').textContent = '⭐'.repeat(Math.floor(score / 2));
+    spawnConfetti();
+    playSound(800, 0.15);
+  } else {
+    btn.classList.add('wrong');
+    document.querySelectorAll('.btn-option').forEach(b => {
+      if (b.textContent === correctAnswer) b.classList.add('correct');
+    });
+    playSound(200, 0.2);
+  }
+  question++;
+  document.getElementById('progressBar').style.width = `${(question/TOTAL_QUESTIONS)*100}%`;
+  setTimeout(() => {
+    if (question >= TOTAL_QUESTIONS) endGame();
+    else nextQuestion();
+  }, 1200);
+}
+function nextQuestion() { generateQuestion(); }
+function endGame() {
+  document.getElementById('finalScore').textContent = `${score}/${TOTAL_QUESTIONS}`;
+  document.getElementById('finalStars').textContent = '⭐'.repeat(Math.floor(score / 2));
+  showScreen('end');
+}
+// ── CONFETTI ──
+function spawnConfetti() {
+  const colors = ['#10b981','#f97316','#3b82f6','#ec4899','#eab308'];
+  for (let i = 0; i < 30; i++) {
+    const el = document.createElement('div');
+    el.className = 'confetti-piece';
+    el.style.left = Math.random() * 100 + 'vw';
+    el.style.background = colors[Math.floor(Math.random()*colors.length)];
+    el.style.animationDelay = Math.random() * 0.5 + 's';
+    el.style.width = (Math.random()*8+6)+'px';
+    el.style.height = (Math.random()*8+6)+'px';
+    document.body.appendChild(el);
+    setTimeout(() => el.remove(), 2000);
+  }
+}
+// ── SOUND ──
+function playSound(freq, dur) {
+  try {
+    const ctx = new (window.AudioContext||window.webkitAudioContext)();
+    const osc = ctx.createOscillator(); const gain = ctx.createGain();
+    osc.connect(gain); gain.connect(ctx.destination);
+    osc.frequency.value = freq; gain.gain.value = 0.1;
+    osc.start(); osc.stop(ctx.currentTime + dur);
+  } catch(e) {}
+}
+</script>
+</body>
+</html>

localcoder-0.4.0/.agents/skills/web-app-patterns/SKILL.md ADDED Viewed

@@ -0,0 +1,107 @@
+# Web App Patterns
+Reference patterns for building web applications. Load this skill when the user asks to build a web app, Express server, or any project that needs a backend.
+## When to Use
+- User asks to build an AI-powered app (analyzer, chatbot, scanner)
+- User asks for a server/backend
+- NOT for simple static pages (those are just index.html)
+## 3-File Pattern (Express + LLM)
+Always create 3 files in the SAME directory:
+### package.json
+```json
+{"name":"app","scripts":{"start":"node server.js"},"dependencies":{"express":"^4"}}
+```
+### server.js
+```javascript
+const express = require('express');
+const app = express();
+app.use(express.json({limit:'50mb'}));
+const API_BASE = process.env.LLM_API_BASE || 'http://127.0.0.1:8089/v1';
+const MODEL = process.env.LLM_MODEL || 'local';
+app.get('/', (req,res) => res.sendFile(__dirname+'/index.html'));
+app.post('/api/analyze', async (req,res) => {
+  const {message, image} = req.body;
+  const userContent = image
+    ? [{type:'text',text:message}, {type:'image_url',image_url:{url:image}}]
+    : message;
+  const r = await fetch(API_BASE+'/chat/completions', {
+    method:'POST', headers:{'Content-Type':'application/json'},
+    body:JSON.stringify({model:MODEL, stream:false, max_tokens:2048,
+      messages:[{role:'system',content:SYSTEM_PROMPT}, {role:'user',content:userContent}]})});
+  const data = await r.json();
+  res.json({analysis: data.choices[0].message.content});
+});
+app.listen(3000);
+```
+### index.html
+Single file with inline CSS+JS. Dark theme.
+## Frontend Design System
+- Background: `#0a0a14`
+- Card: `background:rgba(255,255,255,0.04); backdrop-filter:blur(20px); border:1px solid rgba(255,255,255,0.08); border-radius:24px`
+- Buttons: `border-radius:14px; background:linear-gradient(135deg,#6366f1,#8b5cf6); color:white; font-weight:600; padding:14px 28px`
+- Title gradient: `background:linear-gradient(to right,#f97316,#22c55e); -webkit-background-clip:text; color:transparent`
+- Result area: `background:rgba(255,255,255,0.03); border-left:3px solid #22c55e; border-radius:16px; padding:24px`
+- Font: `system-ui`. Transitions on all interactive elements.
+## Image Upload Pattern
+```javascript
+let imageBase64 = null;
+function uploadImage() {
+  const input = document.createElement('input');
+  input.type='file'; input.accept='image/*';
+  input.onchange = e => {
+    const file = e.target.files[0]; if(!file) return;
+    const reader = new FileReader();
+    reader.onload = ev => { imageBase64 = ev.target.result;
+      document.getElementById('preview').src = imageBase64;
+      document.getElementById('preview').style.display = 'block'; };
+    reader.readAsDataURL(file); };
+  input.click();
+}
+```
+## Camera Capture Pattern
+```javascript
+async function openCamera() {
+  const stream = await navigator.mediaDevices.getUserMedia({video:{facingMode:'environment'}});
+  const video = document.getElementById('camVideo');
+  video.srcObject = stream; video.style.display='block'; video.play();
+}
+function capturePhoto() {
+  const video = document.getElementById('camVideo');
+  const canvas = document.createElement('canvas');
+  canvas.width=video.videoWidth; canvas.height=video.videoHeight;
+  canvas.getContext('2d').drawImage(video,0,0);
+  imageBase64 = canvas.toDataURL('image/jpeg',0.8);
+  video.srcObject.getTracks().forEach(t=>t.stop()); video.style.display='none';
+}
+```
+## Loading Animation
+```css
+@keyframes scan { 0%{transform:translateY(-100%)} 100%{transform:translateY(100%)} }
+.scanning { position:relative; overflow:hidden; }
+.scanning::after { content:''; position:absolute; left:0; right:0; height:2px;
+  background:linear-gradient(90deg,transparent,#22c55e,transparent); animation:scan 1.5s infinite; }
+@keyframes dots { 0%{content:''} 33%{content:'.'} 66%{content:'..'} 100%{content:'...'} }
+.dots::after { content:''; animation:dots 1.5s infinite steps(4); }
+```
+## Testing Checklist
+1. Static HTML: `python3 -m http.server 8888 &` then `curl -s http://localhost:8888/`
+2. Express: `npm install && node server.js &` then `curl -s http://localhost:3000/`
+3. Check JS: `node -e "...parse script tags..."`
+4. Fix any errors, re-test until passing.
+## Common Bugs
+- Start screen not hiding: use `onclick='getElementById("s1").style.display="none"'`
+- SVG arcs: use `Math.cos(angle*Math.PI/180)*radius` — never approximate
+- Fetch to /api without server: static HTML can't call /api. Use local JS logic.
+- Always add `transition` on hover/active states.

localcoder 0.2.1__tar.gz → 0.4.0__tar.gz

localcoder 0.2.1tar.gz → 0.4.0tar.gz