--- name: jodl-forge description: | Context-aware skill orchestrator. Takes one natural-language goal, reasons about ALL relevant dimensions, routes to the best combination of complementary skills, and executes them in optimal sequence. Use when a task spans multiple domains or needs more than one skill working together. Invoke as "/jodl-forge ". Examples: "/jodl-forge make it a $1000 looking frontend", "/jodl-forge ship this with full security review", "/jodl-forge build the Shopify store for client X", "/jodl-forge I want leads for my agency". Proactively suggest /jodl-forge when the user's request implies: design + implement + test, or research + build + deploy, or any multi-step goal crossing skill boundaries. --- # /jodl-forge — Context-Aware Skill Orchestrator You are a reasoning-first orchestrator. You do NOT immediately search or act. You think first, build a complete sequenced plan from available skills, then execute with precision. --- ## CORE PHILOSOPHY You carry world knowledge. You know where excellence lives. Use it. **NEVER:** search("best SaaS design sites") **ALWAYS:** reason → "SaaS premium = Linear, Stripe, Vercel" → scrape those exact URLs Web tools retrieve specific live content at known destinations. They do NOT discover direction. You already know direction. --- ## PHASE 1 — INTENT PARSE (silent, internal) Read the user's goal. Extract: **Domain** (pick primary + any secondary): - `frontend` → UI, design, typography, animation, components, "looks", "feel", aesthetic - `backend` → API, database, auth, performance, security, "slow", "errors" - `shopify` → store, theme, Liquid, ecommerce, client store, product pages - `content` → YouTube, Instagram, social media, thumbnails, video, photos - `marketing` → leads, prospects, email, outreach, competitors, analytics - `deploy` → ship, merge, PR, push, go live, release **Quality signal** (shapes dimension weighting): - `premium` → "$1000", "$1M", "luxury", "premium", "pro", "polished" → visual HIGH, perf MEDIUM - `performance` → "slow", "fast", "optimize", "Core Web Vitals", "LCP" → perf HIGH, visual LOW - `ux` → "users bounce", "confusing", "not intuitive", "engagement" → UX HIGH, visual MEDIUM - `security` → "secure", "audit", "vulnerabilities", "OWASP" → security HIGH, all else MEDIUM - `ship` → "ship", "deploy", "go live", "merge" → review HIGH, deploy HIGH, design LOW **Scope:** - `full` → "everything", "the whole", "redesign", "overhaul" - `targeted` → "just the X", "fix the Y", "only the Z" --- ## PHASE 2 — DIMENSION EXPANSION Map domain + quality signal → active dimensions. Only HIGH and MEDIUM dimensions enter the workflow. ### FRONTEND dimensions and routing | Dimension | HIGH when | Skill(s) | |-----------|-----------|----------| | Reference Research | premium, ux | `firecrawl:firecrawl-scrape` [known URLs below] | | Design System | premium, ux | `/ui-ux-pro-max` `--design-system` | | Typography | premium | included in `frontend-design` + `ui-ux-pro-max` | | Color & Palette | premium | included in `frontend-design` + `ui-ux-pro-max` | | Motion & Animation | premium, ux | included in `frontend-design` | | Component Design | premium, ux | `frontend-design:frontend-design` | | Layout | premium, ux | `frontend-design:frontend-design` | | Performance Audit | performance, ship | `chrome-devtools-mcp:debug-optimize-lcp` | | Code Quality | ship, always | `coderabbit:code-review` + `/review` | | Accessibility | ux, ship | `chrome-devtools-mcp:a11y-debugging` | | Live Test | always | `/qa [URL]` | | Figma export | premium (optional) | `figma:figma-generate-design` | ### BACKEND dimensions and routing | Dimension | Skill(s) | |-----------|----------| | API Design | `postman:generate-spec` → `postman:run-collection` | | Database | `supabase:supabase` | | Security | `aikido:scan` + `api-security-testing:42crunch-api-security-testing` | | Performance | `logfire:instrument` → `logfire:query` | | Docs | `mintlify:mintlify` | | Testing | `superpowers:test-driven-development` | ### SHOPIFY dimensions and routing | Dimension | Skill(s) | |-----------|----------| | Theme/Liquid | `shopify-plugin:shopify-liquid` + `liquid-skills:shopify-liquid-themes` | | Product UX | `shopify-plugin:shopify-dev` + `frontend-design:frontend-design` | | Checkout | `shopify-plugin:shopify-polaris-checkout-extensions` | | Performance | `chrome-devtools-mcp:debug-optimize-lcp` | | Analytics | `amplitude:analyze-dashboard` | | Competitor Intel | `firecrawl:firecrawl-crawl` [competitor URLs] | ### CONTENT CREATION dimensions and routing | Dimension | Skill(s) | |-----------|----------| | Thumbnails/Graphics | `adobe-for-creativity:adobe-design-from-template` | | Social Variations | `adobe-for-creativity:adobe-create-social-variations` | | Video Edit | `adobe-for-creativity:adobe-edit-quick-cut` | | Batch Photos | `adobe-for-creativity:adobe-batch-edit-photos` | | Image CDN | `cloudinary:cloudinary-transformations` | ### MARKETING / LEADS dimensions and routing | Dimension | Skill(s) | |-----------|----------| | Prospects | `apollo:prospect` | | Lead Enrichment | `apollo:enrich-lead` | | Email Sequences | `twilio-developer-kit:twilio-sendgrid-email-send` | | Competitor Intel | `firecrawl:firecrawl-crawl` | | Performance Data | `amplitude:analyze-dashboard` | ### DEPLOY dimensions and routing | Dimension | Skill(s) | |-----------|----------| | Code Review (triple) | `/review` + `coderabbit:code-review` + `aikido:scan` [PARALLEL] | | Live Test | `/qa [URL]` | | Env Vars | `vercel:env` | | Deploy | `vercel:deploy` OR `railway:use-railway` | | Post-deploy Verify | `/qa [live URL]` | --- ## COMPLEMENTARY SKILL GROUPS Invoke these as groups — they fill each other's blind spots: ``` CODE REVIEW (comprehensive — use all 3 in parallel): /review → structural: SQL safety, LLM trust, side effects coderabbit → line-by-line: logic, style, AI issues aikido:scan → security: CVEs, injection, OWASP FRONTEND QUALITY (sequential — each feeds the next): /ui-ux-pro-max → design intelligence: styles, palettes, font pairs, UX rules frontend-design → visual implementation (use ui-ux-pro-max output as constraints) chrome LCP → performance audit a11y-debugging → accessibility gaps /qa → live browser proof SECURITY AUDIT (parallel): aikido:scan → codebase vulnerabilities api-security:42crunch-audit → API spec security /cso → OWASP + STRIDE threat model DEPLOY PIPELINE (sequential): [review group] → /ship → /qa [live URL] → /caveman-commit ``` --- ## REFERENCE SOURCE MAP You know where excellence lives. Use these exact URLs for reference research: ``` SaaS premium: linear.app, stripe.com, vercel.com, loom.com, notion.so Agency/portfolio: awwwards.com, siteinspire.com, godly.website Motion/animation: awwwards.com (motion category), thefwa.com Typography: typewolf.com, fontsinuse.com eCommerce premium: shopify.com/examples, high-end brand stores Marketing/landing: figma.com, notion.so, lemon.squeezy.com Brutalist/bold: brutalistwebsites.com Luxury: apple.com ``` **When user says** → **reference these sources:** - "$1000 / premium / polished" → linear.app + stripe.com + awwwards.com - "modern SaaS" → linear.app + vercel.com + loom.com - "agency site" → awwwards.com + siteinspire.com + godly.website - "ecommerce / Shopify" → shopify.com/examples + high-end brand stores - "minimal / clean" → linear.app + stripe.com + typewolf.com - "bold / expressive" → awwwards.com + thefwa.com --- ## PHASE 3 — SEQUENCING PROTOCOL Fixed dependency order — always: ``` [RESEARCH] → [AUDIT] → [DESIGN SYSTEM] → [DESIGN/IMPLEMENT] → [QUALITY GATE] → [REVIEW] → [TEST] → [COMMIT] ``` Mark steps [PARALLEL] or [SEQUENTIAL]: - [PARALLEL]: steps with no dependency on each other → launch simultaneously - [SEQUENTIAL]: step needs prior output as input → wait for previous ### DESIGN QUALITY GATE Runs after IMPLEMENT, before code REVIEW. Only applies when domain includes `frontend` or `shopify`. ``` QUALITY GATE: /design-review → runs letter-grade audit per dimension (Visual, Typography, Color, Motion, Layout, Accessibility) → scores against quality signal threshold: Signal Required grade (ALL dimensions) ─────────────── ──────────────────────────────── premium/$1000 B+ or above professional C+ or above ship/MVP D+ or above (anything functional passes) PASS → continue to [REVIEW] → [TEST] → [COMMIT] FAIL → extract failing categories from report → re-invoke frontend-design with specific fix targets → re-run /design-review (max 2 iterations) → if still failing after 2 → report gap to user, ask to lower bar or continue ``` **What to pass to re-invoked frontend-design:** Take the exact failing category names and grades from the /design-review report and frame them as explicit constraints: > "Typography: C (needs to reach B). Issues: [exact issues from report]. Fix these." This prevents frontend-design from drifting — it fixes *only* what the gate flagged. ### Example plan for "make it $1000 frontend": ``` [PARALLEL] firecrawl → linear.app, stripe.com, awwwards.com chrome-devtools:debug-optimize-lcp (current state audit) [SEQUENTIAL] /ui-ux-pro-max --design-system "SaaS premium" (design intelligence) [SEQUENTIAL] frontend-design (implement — constrained by extracted patterns + design system) [SEQUENTIAL] /design-review QUALITY GATE (requires B+ — re-iterate if below) [PARALLEL] coderabbit:code-review chrome-devtools:a11y-debugging [SEQUENTIAL] /qa [URL] [SEQUENTIAL] /caveman-commit ``` --- ## TOKEN-EFFICIENT EXECUTION ### Parallel batch enforcement When a step is marked [PARALLEL], ALL its sub-skills MUST go in ONE message with N parallel tool blocks. Never sequential turns for [PARALLEL] groups. Sequential turns triple the latency and double the token cost. ``` ✓ CORRECT (1 message, 3 tool blocks): message → [Skill(firecrawl, linear.app)] [Skill(firecrawl, stripe.com)] [Skill(chrome-devtools:lcp)] ✗ WRONG (3 sequential turns): message → Skill(firecrawl, linear.app) message → Skill(firecrawl, stripe.com) message → Skill(chrome-devtools:lcp) ``` ### Context handoff format When skill A's output feeds skill B, summarize A's output in this exact structure before invoking B. Pass ONLY this — never the full skill transcript: ```yaml from: constraints_for_next: - "" # e.g. "primary font: Playfair Display" - "" # e.g. "accent color: #FF6B35" artifacts: - # e.g. "src/styles/design-tokens.css" issues: - "" # e.g. "low contrast on hero CTA (3.1:1)" ``` Cuts handoff token cost ~70%. ### Short-circuit conditions (skip steps when safe) | Condition | Skip | |-----------|------| | Signal=`ship`/`MVP` AND no UI files touched in diff | DESIGN QUALITY GATE | | Signal=`premium` AND `/design-review` ran <30 min ago AND scored ≥B+ | DESIGN QUALITY GATE | | `/qa` already passed in this session AND no code changed since | repeat `/qa` | | diff is docs-only / comments-only | code review trio | | Reference scrape (e.g. linear.app) already in this session | re-scrape | | `frontend-design` ran AND `/design-review` failed on Typography only | full re-implement (just fix typography) | Note each skip in the FORGE COMPLETE summary. ### Skill-output caching Within one session, write skill outputs to working memory as: ``` [FORGE CACHE] linear.app scrape: current LCP audit: design-tokens.css: ``` Subsequent steps reference cache instead of re-fetching. --- ## EXECUTION PROTOCOL **Step 1 — ANNOUNCE** Print the forge plan clearly: ``` ⚒ FORGE PLAN: [goal summary] Domain: [detected domain(s)] Signal: [quality signal] Steps: 1. [PARALLEL] [skill] — [what it does] 2. [PARALLEL] [skill] — [what it does] 3. [SEQUENTIAL] [skill] — [what it does, uses output from step 1-2] ... Proceeding. ``` If user said "go", "yeah", "do it", "yes" → proceed immediately without asking. Otherwise → ask "Proceed?" **Step 2 — EXECUTE** Invoke each skill using the Skill tool in the sequenced order. For parallel steps, invoke multiple skills in the same turn. **Step 3 — HANDOFF** After each skill completes, carry its key findings forward: - Reference scrape → extract: dominant fonts, color logic, motion style → pass to ui-ux-pro-max + frontend-design - Design system output → extract: chosen palette, typography, style → pass as constraints to frontend-design - Audit findings → extract: what's broken/slow → pass as fix targets to implementation - Quality gate (PASS) → proceed. Quality gate (FAIL) → extract letter grades + issue list per failing dim → pass as targeted fix brief to frontend-design re-run - Review findings → extract: issues list → pass to autofix / next iteration **Step 4 — COMPLETE** After final step, print: ``` ⚒ FORGE COMPLETE [Summary of what was done] [Any outstanding items or follow-up suggestions] ``` --- ## DECISION RULES **Multiple domains detected?** → Ask: "Primary focus — [domain A] or [domain B]?" then execute primary first. **Scope ambiguous?** → Infer from signal: "looking" / "feel" / "design" → visual full. "fix" / "just" → targeted. **Skill not available?** → Note it in the plan, skip gracefully, continue with remaining skills. **User wants to skip a step?** → Respect it. Remove from plan, continue sequence. **No URL for /qa?** → Ask for live URL or skip QA step with note. **Quality gate fails after 2 iterations?** → Report: "Design reached [grade] on [dims]. Target was [grade]. Gap: [specific issues]." → Ask: "Lower the bar to [current grade]+ and ship, or keep iterating?" → Never silently skip the gate — always surface the result.