claude-code-arcane 1.0.0

package/skills/unity-game-architecture/references/performance-and-systems.md

@@ -0,0 +1,29 @@
+# Performance & Systems Detail
+
+## Performance (60 FPS target)
+
+| Métrica | Budget |
+|---------|--------|
+| CPU main thread/frame | <16ms (60fps), <6.94ms (144fps) |
+| GC allocs en hot loop | **0** por frame |
+| Draw calls | <200 (batch + atlas + GPU instancing) |
+
+Optimizaciones: Object Pooling (`ObjectPool<T>`) para spawns frecuentes, cache GetComponent en Awake (nunca en Update), Burst+Jobs solo para hot loops demostrados, LOD Groups, Occlusion Culling, Texture Atlases, GPU Instancing, Static Batching.
+
+Memory: `UnloadSceneAsync` en additive loading, `UnloadUnusedAssets` tras cambio escena, max texture size por plataforma, mesh compression.
+
+Coroutines: cachear `WaitForSeconds` como `static readonly`. Async I/O: preferir UniTask (zero-alloc).
+
+## Save System
+
+JSON (JsonUtility/Newtonsoft) en `Application.persistentDataPath`. PlayerPrefs solo para settings. `version: int` en cada save + migrators v1->v2->v3. Atomic writes (.tmp -> validate -> rename). **Prohibido:** `BinaryFormatter`.
+
+## Testing
+
+Separar lógica gameplay (clases puras -> NUnit sin Play Mode) del wrapper MonoBehaviour (PlayMode tests solo para MB reales).
+
+## Build & Git
+
+Build: Mono (dev rápido), IL2CPP (release performance). Stripping disabled/dev, medium-high/release. Addressables build como step previo.
+
+Git: .gitignore (Library/, Temp/, Builds/, Logs/, *.csproj, *.sln), LFS para binarios (.png/.fbx/.wav/.psd), Force Text serialization + Visible Meta Files, Smart Merge para .unity/.prefab.

package/skills/user-persona/SKILL.md

@@ -0,0 +1,65 @@
+---
+name: user-persona
+description: "Generate user personas, JTBD, pain points, and empathy maps. Output to Notion/Coda for product alignment."
+category: "documentation"
+argument-hint: "[product or feature name]"
+user-invocable: true
+allowed-tools: Read, Glob, Grep, Write, Edit, Task, AskUserQuestion
+---
+# user-persona — User Persona & JTBD Generator
+
+Genera personas documentadas, JTBD, empathy maps y pain/gain analysis para productos Educabot (Alizia, Tuni, Vigia, Tich).
+
+## Cuando usar / NO usar
+
+| Usar | NO usar |
+|------|---------|
+| Nuevo producto/vertical sin target definido | Persona validada vigente (refinar, no recrear) |
+| Feature grande que requiere empatia profunda | Stakeholders internos (stakeholder map aparte) |
+| PRD sin persona clara (hand-in con `/product-spec`) | Bugs o issues tecnicos |
+| Re-assessment del ICP existente | |
+| Onboarding de nuevos PMs/designers | |
+
+## Filosofia
+
+Persona util: basada en data real (interviews, analytics, surveys), actionable (decide que hacer/no hacer), memorable (equipo la referencia). Persona mala: demografia irrelevante, copy-paste de competidor, 15 personas que nadie recuerda.
+
+## Preguntas previas
+
+1. **Producto:** Alizia / Tuni / Vigia / Tich / nuevo
+2. **Primaria o secundaria?**
+3. **Research existente?** (interviews, surveys, analytics, NPS)
+4. **Cantidad:** 1-3 recomendado, max 5
+5. **Contexto educativo:** Primaria / Secundaria / Univ / Adultos / Formal / No-formal
+
+## Workflow
+
+### Paso 1 — Recolectar evidencia
+Pedir inputs: links a interviews (Notion/grabaciones), exports analytics (Mixpanel/GA), tickets soporte recurrentes, data CRM/Hubspot, competitor research. Sin data -> proponer plan discovery: 5-7 interviews, survey 50+ respuestas, 2 semanas minimo.
+
+### Paso 2 — Segmentar
+Dimensiones clave: rol (docente/estudiante/director/padre), nivel educativo, tipo institucion (publica/privada/mixta), tech-savviness (low/mid/high), contexto uso (aula/remoto/hibrido).
+
+### Paso 3 — Escribir persona
+
+> → Read references/persona-template.md for full persona template sections, anti-persona template, and JTBD canvas
+
+### Paso 4 — Validar
+Research/Data team revisa -> PM + Design aprueban -> iterar si no resuena.
+
+### Paso 5 — Publicar
+Notion/Coda (hub personas) -> linkear desde PRDs y Figma -> printables opcional.
+
+## Rules of thumb
+
+- Max 3-5 personas por producto; 1 primaria, max 2 secundarias
+- Refrescar cada 6-12 meses o tras cambio grande
+- Sin interview -> marcar como hipotesis
+- Cada feature debe mapear a una persona
+- "Pero Flor no haria eso" en meetings = senal de que funciona
+
+## Delegacion
+
+- `/product-spec` — PRD que usa la persona
+- `/notion`, `/coda` — publicar hub
+- `/meeting-to-tasks` — convertir interviews en insights

package/skills/user-persona/references/persona-template.md

@@ -0,0 +1,27 @@
+# Persona Template & Sections
+
+## Template Educabot
+
+| Seccion | Contenido |
+|---------|-----------|
+| **Snapshot** | Nombre ficticio, rol, edad, ubicacion, institucion, experiencia, tech-savviness |
+| **JTBD** | Formato: "Cuando <situacion>, quiero <motivacion>, para <outcome>". Functional + emotional + social jobs |
+| **Pain Points** | Dolores actuales, frustraciones con soluciones actuales, anti-pains (lo que NO quiere) |
+| **Gains** | Deseados + inesperados (delight) |
+| **Contexto de uso** | Cuando, donde, dispositivos, solo o con otros |
+| **Quotes reales** | Citas textuales de interviews, linkear a transcripts |
+| **Empathy Map** | Ve / Escucha / Piensa y siente / Dice y hace / Pains / Gains |
+| **Anti-patterns** | Cosas que esta persona rechaza en el producto |
+| **Metricas clave** | Tabla metrica + target (ej: NPS >50, retencion mes 3 >60%) |
+| **Testing** | Como reclutar, canal, incentivo, frecuencia |
+| **Referencias** | Links a interviews, surveys, analytics, PRDs, Figma |
+
+Metadata: tipo (primaria/secundaria/anti-persona), producto, ultima validacion, research base, owner PM.
+
+## Anti-persona
+
+Template para definir **para quien NO es el producto**: quien es, por que no es target (3 razones), senales en demo/sales/onboarding, que hacer cuando aparece (sales deflect, support no priorizar, product no construir).
+
+## JTBD Canvas (alternativa ligera)
+
+Job statement + Forces diagram (push/pull/anxiety/habits) + success criteria. Usar JTBD solo para feature especifica (equipo ya conoce user). Persona completa para onboarding, producto nuevo, re-alignment.

package/skills/ux-design/SKILL.md

@@ -0,0 +1,60 @@
+---
+name: ux-design
+description: "Guided UX spec authoring per screen/flow/HUD. Reads game concept, player journey, GDDs. Produces ux-spec.md or hud-design.md."
+category: "design"
+argument-hint: "[screen/flow name] or 'hud' or 'patterns'"
+user-invocable: true
+allowed-tools: Read, Glob, Grep, Write, Edit, AskUserQuestion, Task
+agent: ux-designer
+---
+# ux-design — UX Spec Authoring
+
+## Modes
+
+| Argument | Mode | Output |
+|----------|------|--------|
+| `hud` | HUD design | `design/ux/hud.md` |
+| `patterns` | Interaction pattern library | `design/ux/interaction-patterns.md` |
+| screen/flow name | UX spec | `design/ux/[name].md` |
+| none | Ask user | AskUserQuestion |
+
+## Context Gathering (Read Phase)
+
+Read all before asking anything:
+1. `design/gdd/game-concept.md` — warn if missing
+2. `design/player-journey.md` — extract phases, emotional states, needs
+3. Glob `design/gdd/*.md` → grep `UI Requirements` referencing this screen
+4. Glob `design/ux/*.md` → note existing specs, entry/exit points
+5. `design/ux/interaction-patterns.md` → pattern catalog index
+6. `design/art/art-bible.md` → visual direction
+7. `design/accessibility-requirements.md` → accessibility tier
+8. `.claude/docs/technical-preferences.md` → Input & Platform section
+
+Present context summary, then ask: "Anything else before we start?"
+
+### Retrofit Detection
+If output file exists → read it, show section status table (Complete/Empty/Placeholder), work only on incomplete sections using Edit.
+
+## Skeleton Creation
+
+Create output file with `[To be designed]` placeholders for all sections. Update `production/session-state/active.md`.
+
+> → Read references/spec-sections.md for [section inventories for UX spec, HUD, pattern library, and key section guidance]
+
+## Section Authoring Cycle
+
+For each section: Context → Questions → Options → Decision → Draft → Approval → Write (Edit to replace placeholder).
+
+> → Read references/cross-reference-and-routing.md for [cross-reference checks before marking ready, and agent routing table]
+
+## Handoff
+
+1. Update session state
+2. Suggest `/ux-review [filename]` before implementation pipeline
+3. Note cross-linked specs that should reference this one
+
+## Protocol
+- Question → Options → Decision → Draft → Approval for every section
+- AskUserQuestion at every decision point
+- Incremental writing — each section written immediately after approval
+- Never auto-generate full spec. Never write without approval. Never contradict existing specs silently

package/skills/ux-design/references/cross-reference-and-routing.md

@@ -0,0 +1,19 @@
+# Cross-Reference Check & Agent Routing
+
+## Cross-Reference Check
+
+Before marking ready:
+1. GDD requirement coverage — every UI Requirement has a spec element
+2. Pattern library alignment — new patterns flagged for addition
+3. Navigation consistency — entry/exit points match related specs
+4. Accessibility coverage — meets committed tier
+5. Empty states — every data-dependent element has one
+
+## Agent Routing
+
+| Topic | Coordinate with |
+|-------|----------------|
+| Visual aesthetics | `art-director` |
+| Implementation feasibility | `ui-programmer` |
+| Gameplay data | `game-designer` |
+| Narrative/lore in UI | `narrative-director` |

package/skills/ux-design/references/spec-sections.md

@@ -0,0 +1,19 @@
+# UX Spec Section Inventories
+
+## UX Spec Sections
+Purpose & Player Need | Player Context on Arrival | Navigation Position | Entry & Exit Points | Layout Specification (Info Hierarchy, Zones, Components, ASCII Wireframe) | States & Variants | Interaction Map | Events Fired | Transitions & Animations | Data Requirements | Accessibility | Localization | Acceptance Criteria | Open Questions
+
+## HUD Sections
+HUD Philosophy | Information Architecture (Inventory, Categorization: Must Show/Contextual/On Demand/Hidden) | Layout Zones | HUD Elements | Dynamic Behaviors | Platform Variants | Accessibility | Open Questions
+
+## Pattern Library Sections
+Overview | Pattern Catalog (extracted from existing specs) | Patterns (per-pattern: Category, Used In, Spec, When/When Not) | Gaps | Open Questions
+
+## Key Section Guidance
+
+- **Layout**: Info hierarchy first → zone proposals → component inventory → optional ASCII wireframe
+- **States & Variants**: Empty, error, loading, progression, platform variants as table
+- **Interaction Map**: Per component — action, input mapping, feedback, outcome. Use input methods from tech-prefs
+- **Events Fired**: Table: Player Action | Event Fired | Payload
+- **Data Requirements**: Table: Data | Source System | Read/Write | Notes
+- **Acceptance Criteria**: Min 5 checkboxes — 1 performance, 1 navigation, 1 error/empty, 1 accessibility, 1 core purpose

package/skills/ux-review/SKILL.md

@@ -0,0 +1,70 @@
+---
+name: ux-review
+description: "Validate UX spec, HUD, or pattern library for completeness, accessibility, GDD alignment. Produces verdict with specific gaps."
+category: "design"
+argument-hint: "[file-path or 'all' or 'hud' or 'patterns']"
+user-invocable: true
+allowed-tools: Read, Glob, Grep
+agent: ux-designer
+---
+# UX Review
+
+Quality gate between UX Design and Visual Design/Implementation. Read-only — reports findings only.
+
+## Arguments
+
+| Scope | Target |
+|-------|--------|
+| Specific path | One document |
+| `all` | All files in `design/ux/` |
+| `hud` | `design/ux/hud.md` |
+| `patterns` | `design/ux/interaction-patterns.md` |
+| No arg | Ask user |
+
+## Cross-Reference Context (load once)
+
+Input & Platform from `.claude/docs/technical-preferences.md`, accessibility tier from `design/accessibility-requirements.md`, pattern library from `design/ux/interaction-patterns.md`, referenced GDDs (UI Requirements sections), player journey from `design/player-journey.md`.
+
+## Phase 3A: UX Spec Checklist
+
+### Completeness (required sections)
+Header (Status/Author/Platform), Purpose & Player Need, Player Context on Arrival, Navigation Position, Entry & Exit Points, Layout Specification, States & Variants (loading/empty/error min), Interaction Map (all input methods), Data Requirements (source + owner), Events Fired, Transitions & Animations, Accessibility, Localization (char limits), Acceptance Criteria (≥5 testable).
+
+### Quality Checks
+- **Player Need:** perspective from player not dev, unambiguous goal, specific context on arrival
+- **States:** error + empty + loading documented, timed states have duration
+- **Input Methods:** keyboard-only if PC, d-pad + face buttons if console, no mouse-precision on gamepad, focus order defined
+- **Data:** no "UI" as owner (UI must not own game state), update triggers specified, null handling specified
+- **Accessibility:** meets tier (Basic: no color-only, Standard+: focus order + contrast, Comprehensive+: screen reader), colorblind alternatives
+- **GDD Alignment:** all referenced GDD UI Requirements addressed, no UI modifying state without GDD requirement, no missing requirements
+- **Pattern Library:** components reference library (or flagged as new), no re-specification, new patterns flagged for library addition
+- **Localization:** char limits present, 40% expansion accommodation
+- **ACs Quality:** specific for QA without reading other docs, performance + resolution criteria present
+
+## Phase 3B: HUD Checklist
+
+Completeness: philosophy, info architecture covers all GDD systems, layout zones + safe margins, element specs (zone/visibility/data/priority), HUD states per gameplay context (exploration/combat/dialogue/paused min), visual budget, platform adaptation, tuning knobs.
+
+Quality: no center play area coverage without visibility rule, all GDD info represented or explicitly hidden/demand, colorblind variants, notification queue/priority behavior, visual budget compliance. GDD alignment against `systems-index.md`.
+
+## Phase 3C: Pattern Library Checklist
+
+Catalog index current, standard controls specified (button/toggle/slider/dropdown/list/grid/modal/dialog/toast/tooltip/progress/input/tab/scroll), game-specific patterns present, each has When to Use/NOT/states/accessibility/implementation notes, animation + sound standards tables, no conflicting behaviors.
+
+## Verdict
+
+| Verdict | Meaning |
+|---------|---------|
+| **APPROVED** | Complete, consistent, implementation-ready |
+| **NEEDS REVISION** | Specific gaps, fix before handoff (not full redesign) |
+| **MAJOR REVISION NEEDED** | Fundamental issues, needs significant rework |
+
+Report: completeness (X/Y sections), quality issues (BLOCKING/ADVISORY with fix), GDD alignment (X/Y requirements covered), accessibility compliance, pattern library consistency.
+
+## Protocol
+
+- Read-only — never edits files
+- APPROVED → suggest `/team-ui`
+- NEEDS REVISION → offer to help draft missing sections
+- MAJOR REVISION → redirect to `/ux-design`
+- Verdict is advisory — user decides whether to proceed

package/skills/video-content-strategist/SKILL.md

@@ -0,0 +1,181 @@
+---
+name: video-content-strategist
+description: "Plan video content strategy, write scripts, optimize YouTube channels, build short-form video pipelines, and repurpose content into video."
+argument-hint: ""
+category: "marketing-content"
+user-invocable: true
+allowed-tools: Read, Glob, Grep, Bash, Write, Edit
+---
+
+# Video Content Strategist
+
+You are an expert video content strategist with deep experience building YouTube channels from zero to authority, engineering viral short-form content, and turning long-form assets into multi-platform video pipelines. Your goal is to build a video presence that compounds -- content that drives search traffic, builds trust, and converts viewers into customers.
+
+Video is the highest-trust content format. A viewer who watches 10 minutes of you explaining a problem trusts you more than 10 blog posts combined. Build for depth first, distribution second.
+
+## Before Starting
+
+**Check for context first:** If marketing-context.md exists, read it before asking questions. It contains brand voice, audience, competitor analysis, and existing content assets.
+
+Gather this context (ask in one shot):
+
+### 1. Current State
+- Do you have any video content today? (YouTube channel, social video, webinars?)
+- What content assets exist? (blog posts, podcasts, webinars, demos?)
+- Team/budget for video? (solo founder vs. team with editor?)
+
+### 2. Goals
+- Primary goal: SEO/discovery, brand authority, lead gen, or product education?
+- Primary platform: YouTube, LinkedIn, TikTok/Reels, or all?
+- Publishing cadence target?
+
+### 3. Audience and Niche
+- Who are you making video for? (ICP -- job title, pain points, sophistication level)
+- What do competitors already do well on video? Where is the gap?
+
+## How This Skill Works
+
+### Mode 1: Strategy and Channel Setup
+No video presence yet. Build the foundation: niche definition, channel positioning, content pillars, SEO keyword targets, and a 90-day launch plan.
+
+### Mode 2: Script and Production
+Strategy exists. Write video scripts, structure hooks, plan B-roll, and define CTAs. Covers long-form (YouTube) and short-form (Reels/Shorts/TikTok).
+
+### Mode 3: Repurpose and Distribute
+Long-form content exists (blog posts, podcasts, webinars, demos). Build a systematic pipeline to atomize it into video and distribute across platforms.
+
+---
+
+## Mode 1: Strategy and Channel Setup
+
+### Step 1 -- Niche and Positioning
+
+The #1 YouTube mistake: being too broad. A channel about "marketing" competes with every marketing channel. A channel about "B2B SaaS email marketing for founders under 50 employees" can own its niche.
+
+Niche definition test: Can you describe your ideal subscriber in one sentence? If not, the niche is too broad.
+
+Positioning framework:
+
+| Dimension | Question | Example |
+|---|---|---|
+| Who | Specific audience | "Early-stage SaaS founders" |
+| What problem | The pain they have | "Cannot afford a marketing team" |
+| What you provide | Your unique POV | "Scrappy, no-budget growth tactics that work" |
+| Why you | Your credibility | "Built two SaaS products to $1M ARR solo" |
+
+### Step 2 -- Content Pillars
+
+Define 3-4 content pillars (recurring topic categories). Every video maps to a pillar. Pillars create predictability for subscribers and authority signals for YouTube's algorithm.
+
+Example pillars for a B2B SaaS marketing channel:
+1. **How-to tutorials** -- step-by-step implementation (highest search volume)
+2. **Tool reviews and comparisons** -- evaluation content (high commercial intent)
+3. **Case studies and teardowns** -- authority building (highest trust)
+4. **Opinion and hot takes** -- algorithm-friendly, shareable
+
+### Step 3 -- YouTube SEO Keyword Research
+
+YouTube is the second-largest search engine. Treat it like Google.
+
+Keyword targets by type:
+
+| Type | Characteristics | Volume | Competition | Best for |
+|---|---|---|---|---|
+| Informational | "how to", "what is", "tutorial" | High | High | Discovery, top of funnel |
+| Comparative | "X vs Y", "best X for Y" | Medium | Medium | Commercial intent, mid-funnel |
+| Problem-specific | "why isn't X working", "fix X" | Lower | Lower | High-intent, bottom of funnel |
+
+Target 1 primary keyword per video. Include in: title (first 60 chars), description (first 2 sentences), tags, spoken in first 30 seconds.
+
+### Step 4 -- 90-Day Launch Plan
+
+| Weeks | Focus | Output |
+|---|---|---|
+| 1-2 | Channel setup, first 3 videos scripted | Channel art, banner, trailer, videos 1-3 ready |
+| 3-6 | Consistency -- publish 1-2 per week | 8-12 published videos |
+| 7-10 | Double down on what works | 2-3 optimized videos based on retention data |
+| 11-13 | Repurpose top videos into Shorts | 10+ Shorts driving channel discovery |
+
+---
+
+## Mode 2: Script and Production
+
+> See [references/scripts-and-anti-patterns.md](references/scripts-and-anti-patterns.md) for long-form YouTube script structure (hook, context, body, CTA), short-form 60-second script structure, and short-form principles.
+
+---
+
+## Mode 3: Repurpose and Distribute
+
+Turn one piece of long-form into 10+ pieces of video content.
+
+### The Content Atomization Framework
+
+One long-form source (blog post, podcast, webinar, demo) becomes:
+- 1 full YouTube video (if applicable)
+- 3-5 short-form clips (key moments, quotable insights)
+- Platform-adapted distribution: YouTube Shorts (SEO-optimized titles), Instagram Reels (hook-first, caption-heavy), LinkedIn Video (professional framing, text overlay), TikTok (trend-aware, native feel)
+
+### Blog-to-Video Conversion
+
+| Blog element | Video equivalent |
+|---|---|
+| H2 headers | Video chapters / timestamps |
+| Key stats/quotes | Pull quotes for B-roll overlay |
+| Step-by-step sections | Tutorial segments |
+| Conclusion/summary | Short-form clip |
+
+### Repurposing Workflow
+
+1. **Identify source** -- which blog/podcast/webinar has the highest traffic or engagement?
+2. **Extract the hook** -- what is the single most compelling insight or result?
+3. **Write the short script** -- 60 seconds max, hook, value, CTA
+4. **Adapt for each platform** -- same core, different framing and caption style
+5. **Schedule for staggered release** -- do not publish same content on all platforms same day
+
+---
+
+## Proactive Triggers
+
+Surface these without being asked:
+
+- **No hook in first 3 seconds** -- Retention drops 40%+ before the 30-second mark. Every script needs an explicit hook reviewed before production.
+- **Targeting broad keywords** -- "marketing tips" has millions of competitors. Flag when keyword targets are too generic to rank.
+- **Inconsistent upload schedule** -- YouTube's algorithm punishes gaps. Flag if proposed cadence is not sustainable for the team.
+- **No chapters/timestamps on videos over 6 minutes** -- YouTube shows chapters in search results, increasing CTR. Add them.
+- **No CTA or buried CTA** -- Every video needs one explicit action in the final 60 seconds.
+- **Repurposing without platform adaptation** -- Horizontal YouTube content posted to Reels without reformatting performs 60-80% worse. Flag blind repurposing.
+
+---
+
+## Output Artifacts
+
+| When you ask for... | You get... |
+|---|---|
+| Channel strategy | Niche definition, 3-4 content pillars, keyword target list, 90-day launch calendar |
+| Video script (long-form) | Full script with hook, timestamped chapters, B-roll notes, and CTA |
+| Video script (short-form) | 60-second script with second-by-second breakdown and platform adaptation notes |
+| YouTube SEO optimization | Title options for A/B testing, description template, tags, thumbnail brief |
+| Repurposing plan | Content atomization map: one source into 10+ video assets across platforms |
+
+---
+
+## Communication
+
+All output follows the structured standard:
+- **Bottom line first** -- recommendation before rationale
+- **What + Why + How** -- every output includes all three
+- **Actions have owners and deadlines** -- no vague "consider making video"
+- **Confidence tagging** -- verified / medium / assumed
+
+---
+
+## Anti-Patterns
+
+> See [references/scripts-and-anti-patterns.md](references/scripts-and-anti-patterns.md) for the 6 common anti-patterns (broad keywords, inconsistent schedule, blind repurposing, missing hooks, multi-idea shorts, undefined ICP).
+
+## Related Skills
+
+- **content-production**: Use for written blog posts and articles. NOT for video scripts or video strategy (that is this skill).
+- **seo-audit**: Use for auditing overall SEO. Pairs with this skill for YouTube keyword research and video SEO.
+- **social-media-manager**: Use for social media calendar and captions. NOT for video-specific strategy (that is this skill).
+- **launch-strategy**: Use when launching a product. Pairs with this skill for video launch content planning.

package/skills/video-content-strategist/references/scripts-and-anti-patterns.md

@@ -0,0 +1,48 @@
+# Video Script Structure & Anti-Patterns
+
+## Long-Form YouTube Script Structure
+
+Every video follows this architecture:
+
+**Hook (0-30 seconds)** -- This is everything. 70%+ of viewers decide to stay or leave here.
+
+Hook types that work:
+- Problem statement: "If your email open rates are below 20%, here is exactly why."
+- Counterintuitive claim: "The biggest mistake B2B marketers make is posting too much content."
+- Result promise: "In this video, I will show you the exact 3-step system we used to 10x our demo requests."
+
+**Context (30-90 seconds)** -- Why this matters, who this is for, what they will learn.
+
+**Body (90% of runtime)** -- The actual content. Structure: Problem then Solution then Example then Result for each major point. Use chapters (YouTube timestamps) for videos over 8 minutes.
+
+**CTA (final 60 seconds)** -- One clear action: subscribe, download resource, book demo, watch next video.
+
+## Short-Form Script Structure (60 seconds max)
+
+Hook, then Value, then CTA. No fluff.
+
+| Second | What happens |
+|---|---|
+| 0-3 | Pattern interrupt hook -- visual or statement that stops the scroll |
+| 3-15 | State the problem or promise clearly |
+| 15-50 | Deliver the value (tip, insight, mini-tutorial) |
+| 50-60 | CTA -- follow for more, link in bio, save this |
+
+Short-form principles:
+- Captions always on (85% watch without sound)
+- Vertical format (9:16) for Reels/TikTok/Shorts
+- Hook in first frame before any movement or title card
+- One idea per video -- do not pack in more
+
+---
+
+## Anti-Patterns
+
+| Anti-Pattern | Why It Fails | Better Approach |
+|---|---|---|
+| Targeting broad keywords like "marketing tips" | Millions of competing videos make ranking nearly impossible for new channels | Target niche, long-tail keywords with lower competition where you can establish authority |
+| Publishing without a consistent schedule | YouTube's algorithm deprioritizes channels with irregular uploads, killing discoverability | Set a sustainable cadence (even 1 per week) and maintain it over sporadic bursts |
+| Reposting horizontal YouTube videos to Reels/TikTok without reformatting | Vertical platforms penalize non-native aspect ratios, reducing reach by 60-80% | Re-edit each clip for 9:16 vertical with captions, native hooks, and platform-specific CTAs |
+| Skipping the hook in the first 3 seconds | 70%+ of viewers drop before the 30-second mark if there is no reason to stay | Script an explicit pattern-interrupt hook and review it before production begins |
+| Packing multiple ideas into one short-form video | Viewers scroll away from unfocused content — short-form rewards single-concept clarity | One idea per short-form video, delivered in under 60 seconds |
+| Creating video content without a defined ICP | Generic content attracts no loyal audience and competes with everyone | Define your ideal subscriber in one sentence before scripting any content |

package/skills/visual-regression/SKILL.md

@@ -0,0 +1,86 @@
+---
+name: visual-regression
+description: "Visual regression testing: screenshot comparison antes/después. Chromatic, Percy, Playwright. React+Vite, React Native."
+category: "testing"
+argument-hint: "[setup|run|update-baseline]"
+user-invocable: true
+allowed-tools: Read, Glob, Grep, Bash, Write, Edit, Task
+---
+# Visual Regression Testing
+
+Detectar cambios visuales **no intencionales** comparando screenshots antes/después. Complementa (no reemplaza) tests de behavior.
+
+**Flujo:** correr suite → comparar contra baseline → humano aprueba (intencional) o rechaza (regresión) → baseline actualizado.
+
+## Cuándo usar / NO usar
+
+| Usar | NO usar |
+|------|---------|
+| PRs que tocan CSS/componentes/tokens/layouts | Testing de behavior/lógica |
+| Refactors de design system | Accesibilidad semántica (usar axe) |
+| Validar upgrade (React, Vite, Tailwind) | Performance (usar Lighthouse) |
+| Gatekeeping merges con cambios visuales | Features inestables sin diseño congelado |
+| Detectar regresiones focus/contraste/dark mode | Prototipos/MVPs (overkill) |
+
+## Tools
+
+| Tool | Tipo | Cuándo |
+|------|------|--------|
+| **Chromatic** | SaaS | Default si usás Storybook |
+| **Playwright screenshots** | OSS | Default sin Storybook, flujos cross-page |
+| Percy | SaaS | Alternativa a Chromatic |
+| Loki / Argos CI | OSS | Storybook sin presupuesto SaaS |
+| Detox + screenshots | OSS | React Native e2e + VR |
+
+**Default Educabot:** Web: Storybook + Chromatic (componentes) + Playwright (cross-page). RN: Detox screenshots.
+
+## Setup
+
+**Chromatic:** `npm i -D chromatic` → `npx chromatic --project-token=xxx`. CI: `chromaui/action@latest` con `onlyChanged: true` (TurboSnap) + `exitZeroOnChanges: false`.
+
+**Playwright:** config con `maxDiffPixelRatio: 0.01`, projects para mobile (375), tablet (768), desktop (1280). Baselines en `__screenshots__/` committeadas o en S3.
+
+## Flakiness
+
+Sources: fonts, animations, timestamps, random data, cursors, lazy images.
+
+Mitigaciones: `waitForLoadState('networkidle')` + `document.fonts.ready` + disable animations globalmente (transition/animation/caret none) + seed fijo en faker + stub `Date.now` + mask áreas volátiles con `mask: [locator]`.
+
+## Viewports, themes, browsers
+
+- Viewports: 375 + 768 + 1280
+- Dark mode: capturar ambos temas (Chromatic `modes` parameter)
+- Browsers: Chromium default. Firefox/WebKit solo si bugs browser-specific recurrentes
+
+## CI & Approval
+
+PR con cambio UI → CI corre VR → diffs bloquean merge → reviewer acepta/rechaza en Chromatic UI → baseline se actualiza en branch → merge actualiza baseline de main.
+
+Regla: diseñador/PM aprueba shared components; dev aprueba features propias. Threshold default: `maxDiffPixelRatio: 0.01` (ajustar por componente, nunca subir globalmente).
+
+## Anti-patterns
+
+- Sin handle de animations/fonts → flaky → nadie confía
+- Threshold alto global (0.5%+) → oculta regresiones
+- Baselines no versionadas → branch drift
+- Full suite en cada commit → lento + caro (usar TurboSnap)
+- "Accept all" sin revisar → se cuela regresión
+- Mutear diffs flaky en vez de fixear → test pierde valor
+- VR como único test UI → no testea behavior
+- Mocks rotos → data real + PII en CI logs
+- Ignorar dark mode/mobile → regresiones silenciosas en 50% tráfico
+
+## Checklist
+
+- [ ] Tool elegido según stack (Storybook → Chromatic, sin → Playwright)
+- [ ] Animations disabled en test env
+- [ ] Fonts loaded + networkidle antes de screenshot
+- [ ] Datos mockeados con seed fijo, Date.now estable
+- [ ] Masking áreas volátiles
+- [ ] Viewports: mobile + tablet + desktop
+- [ ] Dark mode capturado si aplica
+- [ ] Threshold 0.01, CI bloquea merge sin aprobar
+- [ ] TurboSnap / onlyChanged activado
+- [ ] Baselines versionadas (Chromatic auto / repo / S3)
+- [ ] Approval workflow documentado
+- [ ] Budget/tier confirmado (Chromatic educativo si aplica)