claude-code-pilot 3.1.1 → 3.2.0

package/src/skills/frontend-slides/STYLE_PRESETS.md

@@ -0,0 +1,330 @@
+# Style Presets Reference
+
+Curated visual styles for `frontend-slides`.
+
+Use this file for:
+- the mandatory viewport-fitting CSS base
+- preset selection and mood mapping
+- CSS gotchas and validation rules
+
+Abstract shapes only. Avoid illustrations unless the user explicitly asks for them.
+
+## Viewport Fit Is Non-Negotiable
+
+Every slide must fully fit in one viewport.
+
+### Golden Rule
+
+```text
+Each slide = exactly one viewport height.
+Too much content = split into more slides.
+Never scroll inside a slide.
+```
+
+### Density Limits
+
+| Slide Type | Maximum Content |
+|------------|-----------------|
+| Title slide | 1 heading + 1 subtitle + optional tagline |
+| Content slide | 1 heading + 4-6 bullets or 2 paragraphs |
+| Feature grid | 6 cards maximum |
+| Code slide | 8-10 lines maximum |
+| Quote slide | 1 quote + attribution |
+| Image slide | 1 image, ideally under 60vh |
+
+## Mandatory Base CSS
+
+Copy this block into every generated presentation and then theme on top of it.
+
+```css
+/* ===========================================
+   VIEWPORT FITTING: MANDATORY BASE STYLES
+   =========================================== */
+
+html, body {
+    height: 100%;
+    overflow-x: hidden;
+}
+
+html {
+    scroll-snap-type: y mandatory;
+    scroll-behavior: smooth;
+}
+
+.slide {
+    width: 100vw;
+    height: 100vh;
+    height: 100dvh;
+    overflow: hidden;
+    scroll-snap-align: start;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+}
+
+.slide-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    max-height: 100%;
+    overflow: hidden;
+    padding: var(--slide-padding);
+}
+
+:root {
+    --title-size: clamp(1.5rem, 5vw, 4rem);
+    --h2-size: clamp(1.25rem, 3.5vw, 2.5rem);
+    --h3-size: clamp(1rem, 2.5vw, 1.75rem);
+    --body-size: clamp(0.75rem, 1.5vw, 1.125rem);
+    --small-size: clamp(0.65rem, 1vw, 0.875rem);
+
+    --slide-padding: clamp(1rem, 4vw, 4rem);
+    --content-gap: clamp(0.5rem, 2vw, 2rem);
+    --element-gap: clamp(0.25rem, 1vw, 1rem);
+}
+
+.card, .container, .content-box {
+    max-width: min(90vw, 1000px);
+    max-height: min(80vh, 700px);
+}
+
+.feature-list, .bullet-list {
+    gap: clamp(0.4rem, 1vh, 1rem);
+}
+
+.feature-list li, .bullet-list li {
+    font-size: var(--body-size);
+    line-height: 1.4;
+}
+
+.grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
+    gap: clamp(0.5rem, 1.5vw, 1rem);
+}
+
+img, .image-container {
+    max-width: 100%;
+    max-height: min(50vh, 400px);
+    object-fit: contain;
+}
+
+@media (max-height: 700px) {
+    :root {
+        --slide-padding: clamp(0.75rem, 3vw, 2rem);
+        --content-gap: clamp(0.4rem, 1.5vw, 1rem);
+        --title-size: clamp(1.25rem, 4.5vw, 2.5rem);
+        --h2-size: clamp(1rem, 3vw, 1.75rem);
+    }
+}
+
+@media (max-height: 600px) {
+    :root {
+        --slide-padding: clamp(0.5rem, 2.5vw, 1.5rem);
+        --content-gap: clamp(0.3rem, 1vw, 0.75rem);
+        --title-size: clamp(1.1rem, 4vw, 2rem);
+        --body-size: clamp(0.7rem, 1.2vw, 0.95rem);
+    }
+
+    .nav-dots, .keyboard-hint, .decorative {
+        display: none;
+    }
+}
+
+@media (max-height: 500px) {
+    :root {
+        --slide-padding: clamp(0.4rem, 2vw, 1rem);
+        --title-size: clamp(1rem, 3.5vw, 1.5rem);
+        --h2-size: clamp(0.9rem, 2.5vw, 1.25rem);
+        --body-size: clamp(0.65rem, 1vw, 0.85rem);
+    }
+}
+
+@media (max-width: 600px) {
+    :root {
+        --title-size: clamp(1.25rem, 7vw, 2.5rem);
+    }
+
+    .grid {
+        grid-template-columns: 1fr;
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    *, *::before, *::after {
+        animation-duration: 0.01ms !important;
+        transition-duration: 0.2s !important;
+    }
+
+    html {
+        scroll-behavior: auto;
+    }
+}
+```
+
+## Viewport Checklist
+
+- every `.slide` has `height: 100vh`, `height: 100dvh`, and `overflow: hidden`
+- all typography uses `clamp()`
+- all spacing uses `clamp()` or viewport units
+- images have `max-height` constraints
+- grids adapt with `auto-fit` + `minmax()`
+- short-height breakpoints exist at `700px`, `600px`, and `500px`
+- if anything feels cramped, split the slide
+
+## Mood to Preset Mapping
+
+| Mood | Good Presets |
+|------|--------------|
+| Impressed / Confident | Bold Signal, Electric Studio, Dark Botanical |
+| Excited / Energized | Creative Voltage, Neon Cyber, Split Pastel |
+| Calm / Focused | Notebook Tabs, Paper & Ink, Swiss Modern |
+| Inspired / Moved | Dark Botanical, Vintage Editorial, Pastel Geometry |
+
+## Preset Catalog
+
+### 1. Bold Signal
+
+- Vibe: confident, high-impact, keynote-ready
+- Best for: pitch decks, launches, statements
+- Fonts: Archivo Black + Space Grotesk
+- Palette: charcoal base, hot orange focal card, crisp white text
+- Signature: oversized section numbers, high-contrast card on dark field
+
+### 2. Electric Studio
+
+- Vibe: clean, bold, agency-polished
+- Best for: client presentations, strategic reviews
+- Fonts: Manrope only
+- Palette: black, white, saturated cobalt accent
+- Signature: two-panel split and sharp editorial alignment
+
+### 3. Creative Voltage
+
+- Vibe: energetic, retro-modern, playful confidence
+- Best for: creative studios, brand work, product storytelling
+- Fonts: Syne + Space Mono
+- Palette: electric blue, neon yellow, deep navy
+- Signature: halftone textures, badges, punchy contrast
+
+### 4. Dark Botanical
+
+- Vibe: elegant, premium, atmospheric
+- Best for: luxury brands, thoughtful narratives, premium product decks
+- Fonts: Cormorant + IBM Plex Sans
+- Palette: near-black, warm ivory, blush, gold, terracotta
+- Signature: blurred abstract circles, fine rules, restrained motion
+
+### 5. Notebook Tabs
+
+- Vibe: editorial, organized, tactile
+- Best for: reports, reviews, structured storytelling
+- Fonts: Bodoni Moda + DM Sans
+- Palette: cream paper on charcoal with pastel tabs
+- Signature: paper sheet, colored side tabs, binder details
+
+### 6. Pastel Geometry
+
+- Vibe: approachable, modern, friendly
+- Best for: product overviews, onboarding, lighter brand decks
+- Fonts: Plus Jakarta Sans only
+- Palette: pale blue field, cream card, soft pink/mint/lavender accents
+- Signature: vertical pills, rounded cards, soft shadows
+
+### 7. Split Pastel
+
+- Vibe: playful, modern, creative
+- Best for: agency intros, workshops, portfolios
+- Fonts: Outfit only
+- Palette: peach + lavender split with mint badges
+- Signature: split backdrop, rounded tags, light grid overlays
+
+### 8. Vintage Editorial
+
+- Vibe: witty, personality-driven, magazine-inspired
+- Best for: personal brands, opinionated talks, storytelling
+- Fonts: Fraunces + Work Sans
+- Palette: cream, charcoal, dusty warm accents
+- Signature: geometric accents, bordered callouts, punchy serif headlines
+
+### 9. Neon Cyber
+
+- Vibe: futuristic, techy, kinetic
+- Best for: AI, infra, dev tools, future-of-X talks
+- Fonts: Clash Display + Satoshi
+- Palette: midnight navy, cyan, magenta
+- Signature: glow, particles, grids, data-radar energy
+
+### 10. Terminal Green
+
+- Vibe: developer-focused, hacker-clean
+- Best for: APIs, CLI tools, engineering demos
+- Fonts: JetBrains Mono only
+- Palette: GitHub dark + terminal green
+- Signature: scan lines, command-line framing, precise monospace rhythm
+
+### 11. Swiss Modern
+
+- Vibe: minimal, precise, data-forward
+- Best for: corporate, product strategy, analytics
+- Fonts: Archivo + Nunito
+- Palette: white, black, signal red
+- Signature: visible grids, asymmetry, geometric discipline
+
+### 12. Paper & Ink
+
+- Vibe: literary, thoughtful, story-driven
+- Best for: essays, keynote narratives, manifesto decks
+- Fonts: Cormorant Garamond + Source Serif 4
+- Palette: warm cream, charcoal, crimson accent
+- Signature: pull quotes, drop caps, elegant rules
+
+## Direct Selection Prompts
+
+If the user already knows the style they want, let them pick directly from the preset names above instead of forcing preview generation.
+
+## Animation Feel Mapping
+
+| Feeling | Motion Direction |
+|---------|------------------|
+| Dramatic / Cinematic | slow fades, parallax, large scale-ins |
+| Techy / Futuristic | glow, particles, grid motion, scramble text |
+| Playful / Friendly | springy easing, rounded shapes, floating motion |
+| Professional / Corporate | subtle 200-300ms transitions, clean slides |
+| Calm / Minimal | very restrained movement, whitespace-first |
+| Editorial / Magazine | strong hierarchy, staggered text and image interplay |
+
+## CSS Gotcha: Negating Functions
+
+Never write these:
+
+```css
+right: -clamp(28px, 3.5vw, 44px);
+margin-left: -min(10vw, 100px);
+```
+
+Browsers ignore them silently.
+
+Always write this instead:
+
+```css
+right: calc(-1 * clamp(28px, 3.5vw, 44px));
+margin-left: calc(-1 * min(10vw, 100px));
+```
+
+## Validation Sizes
+
+Test at minimum:
+- Desktop: `1920x1080`, `1440x900`, `1280x720`
+- Tablet: `1024x768`, `768x1024`
+- Mobile: `375x667`, `414x896`
+- Landscape phone: `667x375`, `896x414`
+
+## Anti-Patterns
+
+Do not use:
+- purple-on-white startup templates
+- Inter / Roboto / Arial as the visual voice unless the user explicitly wants utilitarian neutrality
+- bullet walls, tiny type, or code blocks that require scrolling
+- decorative illustrations when abstract geometry would do the job better

package/src/skills/gateguard/SKILL.md

@@ -0,0 +1,121 @@
+---
+name: gateguard
+description: Fact-forcing gate that blocks Edit/Write/Bash (including MultiEdit) and demands concrete investigation (importers, data schemas, user instruction) before allowing the action. Measurably improves output quality by +2.25 points vs ungated agents.
+origin: community
+---
+
+# GateGuard — Fact-Forcing Pre-Action Gate
+
+A PreToolUse hook that forces Claude to investigate before editing. Instead of self-evaluation ("are you sure?"), it demands concrete facts. The act of investigation creates awareness that self-evaluation never did.
+
+## When to Activate
+
+- Working on any codebase where file edits affect multiple modules
+- Projects with data files that have specific schemas or date formats
+- Teams where AI-generated code must match existing patterns
+- Any workflow where Claude tends to guess instead of investigating
+
+## Core Concept
+
+LLM self-evaluation doesn't work. Ask "did you violate any policies?" and the answer is always "no." This is verified experimentally.
+
+But asking "list every file that imports this module" forces the LLM to run Grep and Read. The investigation itself creates context that changes the output.
+
+**Three-stage gate:**
+
+```
+1. DENY  — block the first Edit/Write/Bash attempt
+2. FORCE — tell the model exactly which facts to gather
+3. ALLOW — permit retry after facts are presented
+```
+
+No competitor does all three. Most stop at deny.
+
+## Evidence
+
+Two independent A/B tests, identical agents, same task:
+
+| Task | Gated | Ungated | Gap |
+| --- | --- | --- | --- |
+| Analytics module | 8.0/10 | 6.5/10 | +1.5 |
+| Webhook validator | 10.0/10 | 7.0/10 | +3.0 |
+| **Average** | **9.0** | **6.75** | **+2.25** |
+
+Both agents produce code that runs and passes tests. The difference is design depth.
+
+## Gate Types
+
+### Edit / MultiEdit Gate (first edit per file)
+
+MultiEdit is handled identically — each file in the batch is gated individually.
+
+```
+Before editing {file_path}, present these facts:
+
+1. List ALL files that import/require this file (use Grep)
+2. List the public functions/classes affected by this change
+3. If this file reads/writes data files, show field names, structure,
+   and date format (use redacted or synthetic values, not raw production data)
+4. Quote the user's current instruction verbatim
+```
+
+### Write Gate (first new file creation)
+
+```
+Before creating {file_path}, present these facts:
+
+1. Name the file(s) and line(s) that will call this new file
+2. Confirm no existing file serves the same purpose (use Glob)
+3. If this file reads/writes data files, show field names, structure,
+   and date format (use redacted or synthetic values, not raw production data)
+4. Quote the user's current instruction verbatim
+```
+
+### Destructive Bash Gate (every destructive command)
+
+Triggers on: `rm -rf`, `git reset --hard`, `git push --force`, `drop table`, etc.
+
+```
+1. List all files/data this command will modify or delete
+2. Write a one-line rollback procedure
+3. Quote the user's current instruction verbatim
+```
+
+### Routine Bash Gate (once per session)
+
+```
+1. The current user request in one sentence
+2. What this specific command verifies or produces
+```
+
+## Quick Start
+
+### Option A: Use the ECC hook (zero install)
+
+The hook at `scripts/hooks/gateguard-fact-force.js` is included in this plugin. Enable it via hooks.json.
+
+### Option B: Full package with config
+
+```bash
+pip install gateguard-ai
+gateguard init
+```
+
+This adds `.gateguard.yml` for per-project configuration (custom messages, ignore paths, gate toggles).
+
+## Anti-Patterns
+
+- **Don't use self-evaluation instead.** "Are you sure?" always gets "yes." This is experimentally verified.
+- **Don't skip the data schema check.** Both A/B test agents assumed ISO-8601 dates when real data used `%Y/%m/%d %H:%M`. Checking data structure (with redacted values) prevents this entire class of bugs.
+- **Don't gate every single Bash command.** Routine bash gates once per session. Destructive bash gates every time. This balance avoids slowdown while catching real risks.
+
+## Best Practices
+
+- Let the gate fire naturally. Don't try to pre-answer the gate questions — the investigation itself is what improves quality.
+- Customize gate messages for your domain. If your project has specific conventions, add them to the gate prompts.
+- Use `.gateguard.yml` to ignore paths like `.venv/`, `node_modules/`, `.git/`.
+
+## Related Skills
+
+- `safety-guard` — Runtime safety checks (complementary, not overlapping)
+- `code-reviewer` — Post-edit review (GateGuard is pre-edit investigation)

package/src/skills/github-ops/SKILL.md

@@ -0,0 +1,144 @@
+---
+name: github-ops
+description: GitHub repository operations, automation, and management. Issue triage, PR management, CI/CD operations, release management, and security monitoring using the gh CLI. Use when the user wants to manage GitHub issues, PRs, CI status, releases, contributors, stale items, or any GitHub operational task beyond simple git commands.
+origin: ECC
+---
+
+# GitHub Operations
+
+Manage GitHub repositories with a focus on community health, CI reliability, and contributor experience.
+
+## When to Activate
+
+- Triaging issues (classifying, labeling, responding, deduplicating)
+- Managing PRs (review status, CI checks, stale PRs, merge readiness)
+- Debugging CI/CD failures
+- Preparing releases and changelogs
+- Monitoring Dependabot and security alerts
+- Managing contributor experience on open-source projects
+- User says "check GitHub", "triage issues", "review PRs", "merge", "release", "CI is broken"
+
+## Tool Requirements
+
+- **gh CLI** for all GitHub API operations
+- Repository access configured via `gh auth login`
+
+## Issue Triage
+
+Classify each issue by type and priority:
+
+**Types:** bug, feature-request, question, documentation, enhancement, duplicate, invalid, good-first-issue
+
+**Priority:** critical (breaking/security), high (significant impact), medium (nice to have), low (cosmetic)
+
+### Triage Workflow
+
+1. Read the issue title, body, and comments
+2. Check if it duplicates an existing issue (search by keywords)
+3. Apply appropriate labels via `gh issue edit --add-label`
+4. For questions: draft and post a helpful response
+5. For bugs needing more info: ask for reproduction steps
+6. For good first issues: add `good-first-issue` label
+7. For duplicates: comment with link to original, add `duplicate` label
+
+```bash
+# Search for potential duplicates
+gh issue list --search "keyword" --state all --limit 20
+
+# Add labels
+gh issue edit <number> --add-label "bug,high-priority"
+
+# Comment on issue
+gh issue comment <number> --body "Thanks for reporting. Could you share reproduction steps?"
+```
+
+## PR Management
+
+### Review Checklist
+
+1. Check CI status: `gh pr checks <number>`
+2. Check if mergeable: `gh pr view <number> --json mergeable`
+3. Check age and last activity
+4. Flag PRs >5 days with no review
+5. For community PRs: ensure they have tests and follow conventions
+
+### Stale Policy
+
+- Issues with no activity in 14+ days: add `stale` label, comment asking for update
+- PRs with no activity in 7+ days: comment asking if still active
+- Auto-close stale issues after 30 days with no response (add `closed-stale` label)
+
+```bash
+# Find stale issues (no activity in 14+ days)
+gh issue list --label "stale" --state open
+
+# Find PRs with no recent activity
+gh pr list --json number,title,updatedAt --jq '.[] | select(.updatedAt < "2026-03-01")'
+```
+
+## CI/CD Operations
+
+When CI fails:
+
+1. Check the workflow run: `gh run view <run-id> --log-failed`
+2. Identify the failing step
+3. Check if it is a flaky test vs real failure
+4. For real failures: identify the root cause and suggest a fix
+5. For flaky tests: note the pattern for future investigation
+
+```bash
+# List recent failed runs
+gh run list --status failure --limit 10
+
+# View failed run logs
+gh run view <run-id> --log-failed
+
+# Re-run a failed workflow
+gh run rerun <run-id> --failed
+```
+
+## Release Management
+
+When preparing a release:
+
+1. Check all CI is green on main
+2. Review unreleased changes: `gh pr list --state merged --base main`
+3. Generate changelog from PR titles
+4. Create release: `gh release create`
+
+```bash
+# List merged PRs since last release
+gh pr list --state merged --base main --search "merged:>2026-03-01"
+
+# Create a release
+gh release create v1.2.0 --title "v1.2.0" --generate-notes
+
+# Create a pre-release
+gh release create v1.3.0-rc1 --prerelease --title "v1.3.0 Release Candidate 1"
+```
+
+## Security Monitoring
+
+```bash
+# Check Dependabot alerts
+gh api repos/{owner}/{repo}/dependabot/alerts --jq '.[].security_advisory.summary'
+
+# Check secret scanning alerts
+gh api repos/{owner}/{repo}/secret-scanning/alerts --jq '.[].state'
+
+# Review and auto-merge safe dependency bumps
+gh pr list --label "dependencies" --json number,title
+```
+
+- Review and auto-merge safe dependency bumps
+- Flag any critical/high severity alerts immediately
+- Check for new Dependabot alerts weekly at minimum
+
+## Quality Gate
+
+Before completing any GitHub operations task:
+- all issues triaged have appropriate labels
+- no PRs older than 7 days without a review or comment
+- CI failures have been investigated (not just re-run)
+- releases include accurate changelogs
+- security alerts are acknowledged and tracked