agency-os

The agency project router — orchestrates the full client-project lifecycle BRIEF → CONCEPT → DESIGN → BUILD → QA → LAUNCH plus the post-launch MAINTAIN loop, and tells Claude which specialist skill to load at each phase. Use this skill whenever a client web project starts or advances — trigger on "new project", "neues Projekt", "website for a client", "Website für Kunde/Kunden", "Kundenprojekt starten", "start a client project", "we won a pitch", "relaunch for", "where does the project stand", "wo steht das Projekt", or any request to plan, kick off, continue, or maintain a client website, landing page, or web app — even if the user only describes the client and goal ("a website for a café in Cologne"). This skill routes, enforces phase gates, and keeps docs/project-state.md current; the actual design/build/QA work happens in the specialist skills it delegates to.

Choose and integrate the right CMS for a client website — decision tree (client editing needs, budget, hosting, stack) plus integration patterns for Payload, Sanity, Storyblok, Strapi, Decap, and headless WordPress, and a client-handover checklist. Use when the user asks "which CMS", "add a CMS", "the client wants to edit content themselves", "Kunde soll Inhalte selbst pflegen", "WordPress or something modern", "headless CMS", or when the BUILD phase reveals editable content requirements. Covers selection, modeling content from the design handoff, preview setup, and editor training. NOT for building the site's frontend (BUILD phase skills), NOT for content strategy or SEO content (seo-content), NOT for one-off static sites where nothing needs client editing — recommending "no CMS" is a valid outcome of this skill.

Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, settings, onboarding, and empty states. Handles UX review, visual hierarchy, information architecture, cognitive load, accessibility, performance, responsive behavior, theming, anti-patterns, typography, fonts, spacing, layout, alignment, color, motion, micro-interactions, UX copy, error states, edge cases, i18n, and reusable design systems or tokens. Also use for bland designs that need to become bolder or more delightful, loud designs that should become quieter, live browser iteration on UI elements, or ambitious visual effects that should feel technically extraordinary. Not for backend-only or non-UI tasks; GSAP/scroll animation implementation belongs to gsap-suite (motion-3d).

Generates advertising campaign concepts and creative routes. Use when the user asks for a "campaign for" / "Kampagne für" a product, "ad ideas", "campaign ideation", "creative concepts for ads", "hook ideas", or wants creative directions before production. Always delivers exactly 3 distinct campaign routes (working title, core claim, hook, visual idea, primary channel, persuasion framework) built on an audience-insight step and a framework toolbox (AIDA, PAS, JTBD, 4U, hook formulas). NOT for writing finished ad copy or headlines (use ad-copy), NOT for platform format specs or asset dimensions (use social-formats), NOT for landing page structure (use landingpage-cro).

Writes performance ad and landing page copy in German and English. Use when the user asks for "ad copy", "Werbetext", "headlines for", "CTA ideas", "A/B variants", "copy for the campaign", or needs finished text for Meta/Google/LinkedIn ads, landing pages, or banners. Provides headline systems (benefit, curiosity, social-proof, urgency), a funnel-stage CTA library (DE+EN), an A/B/C variant protocol with per-variant hypotheses, a tonality matrix, German-specific rules (Du/Sie, compound words, character lengths), and compliance guardrails. NOT for campaign ideation or creative routes (use ad-concepts), NOT for long-form content strategy, blog posts, or SEO articles (use seo-content skills).

Structures and audits landing pages for conversion — the bridge between design, SEO, and copy. Use when the user asks about "landing page structure", "CRO", "conversion optimization", "why isn't the page converting", "landingpage aufbauen", or needs a section-by-section page architecture, friction audit, message-match check, or A/B testing plan. Covers the conversion narrative sequence (hero → credibility → problem/solution → offer → proof → objections → risk reversal → CTA), DACH trust elements, mobile-first conversion rules, and a measurement plan. NOT for visual design systems, typography, or component styling (use design-foundation skills), NOT for SEO audits, rankings, or keyword research (use seo-marketing skills), NOT for writing the copy itself (use ad-copy).

Authoritative ad and content format specifications for Meta/Facebook, Instagram, TikTok, LinkedIn, and YouTube, plus a workflow for adapting one master creative into every placement a media plan requires. Use when the user wants to adapt for social, resize for all platforms, or asks about social media formats, Instagram format, TikTok ad specs, LinkedIn or YouTube ad dimensions, safe zones, aspect ratios, file size or video length limits, or says "export the campaign assets" or "Formate anpassen". This skill covers FORMATS and ADAPTATION (dimensions, crops, safe zones, export naming) — not ideation (see ad-concepts) and not copywriting (see ad-copy).

The go-live gate for websites, tuned for German/EU agencies — legal compliance (DSGVO/GDPR, Impressum, Cookie-Consent, BFSG accessibility) plus the technical launch checklist (SSL, redirects, 404, OG tags, sitemap, robots, forms, analytics). Use this skill before ANY website goes live or relaunches — trigger on "pre-launch", "go-live check", "launch checklist", "können wir live gehen", "ready to launch?", "vor dem Launch prüfen", "Website abnehmen", or when the agency-workflow LAUNCH phase runs. Legal items are hard blockers, not warnings. Not a general QA pass (use performance/accessibility/webapp-testing for that) — this is the final gate after QA.

Generative Engine Optimization (GEO): make brands and content visible in AI answers — Google AI Overviews, ChatGPT search, Perplexity, Bing Copilot. Analyzes AI crawler accessibility, llms.txt compliance, passage-level citability, brand mention signals, and platform-specific optimization; includes the evidence-led FLOW framework (Find → Leverage → Optimize → Win) with its stage-specific prompt library. Use when the user says 'AI visibility', 'AI Overviews', 'GEO', 'generative engine optimization', 'AEO', 'LLM optimization', 'AI citations', 'ChatGPT search', 'Perplexity', 'llms.txt', or 'how does my brand appear in AI'.

Full website SEO audit and health scoring. Crawls up to 500 pages, detects business type, delegates to specialist subagents (technical, content, schema, performance, visual, local, AI visibility), aggregates a 0-100 health score and produces prioritized action plans plus optional PDF reports. Also handles single-page audits, SEO drift monitoring (baseline, diff, regression tracking after deployments) and free multi-page Lighthouse runs via Unlighthouse. Use when the user says 'SEO audit', 'SEO-Audit', 'audit my site', 'check SEO health', 'analyze my website's SEO', 'SEO check for this page', or 'did the deploy break SEO'. This is the single entry point for audits — for standalone technical fixes, content strategy, schema generation, local SEO, backlinks or AI visibility use the dedicated seo-marketing skills.

Backlink profile analysis with free data sources: referring domains, anchor-text distribution, toxic-link detection, competitor link-gap analysis, disavow recommendations — works without paid APIs via Common Crawl web graphs and a verification crawler (Moz/Bing APIs used automatically when credentials exist). Use when the user says 'backlinks', 'link profile', 'referring domains', 'anchor text', 'toxic links', 'link gap', 'link building', 'disavow', or 'backlink audit'.

SEO-optimized competitor comparison and alternatives pages: 'X vs Y' layouts, 'alternatives to X' pages, feature matrices, comparison schema markup, and conversion-aware structure. Use when the user says 'comparison page', 'vs page', 'versus page', 'alternatives page', 'compare us against', 'competitor comparison', or 'alternative to X'. For competitor backlink gaps use seo-backlinks; for competitor content strategy use seo-content.

SEO content strategy and quality: E-E-A-T analysis, readability, thin-content detection, AI citation readiness; competitive content briefs with per-section word counts; SERP-overlap topic clustering with hub-and-spoke architecture and internal link matrices; industry content planning (SaaS, e-commerce, local, publisher, agency); programmatic SEO page generation; and search experience (SXO) analysis for well-optimized pages that fail to rank. Use when the user says 'content quality', 'E-E-A-T', 'content brief', 'content plan', 'topic cluster', 'pillar page', 'keyword grouping', 'programmatic SEO', 'thin content', or 'why doesn't this page rank'. Not for technical crawl issues (seo-technical) or full audits (seo-audit).

E-commerce SEO: product schema validation at catalog scale, Google Shopping visibility, marketplace intelligence (Amazon), pricing-gap analysis, product page and category optimization, and Universal Commerce Protocol readiness. Use when the user says 'ecommerce SEO', 'product SEO', 'Google Shopping', 'product schema', 'shop SEO', 'category pages', 'marketplace SEO', or 'product listings'. Single-page schema outside product catalogs is covered by seo-schema.

Local SEO for businesses with physical presence or service areas: Google Business Profile optimization, NAP consistency, citations, review signals, local schema, location pages, multi-location strategy, industry-specific factors — plus maps intelligence: geo-grid rank tracking, GBP audits, review analysis, competitor radius mapping. Use when the user says 'local SEO', 'Google Business Profile', 'GBP', 'map pack', 'local pack', 'citations', 'NAP', 'local rankings', 'service area business', or 'multi-location'. Not for general on-page or technical work (seo-technical) or full audits (seo-audit).

Schema.org structured data expert: detects, validates, and generates JSON-LD markup for any page or business type (LocalBusiness, Product, Article, FAQ, Event, Organization and more), flags deprecated types and rich-result eligibility. Use when the user says 'schema', 'structured data', 'JSON-LD', 'rich snippets', 'rich results', or 'schema markup'. Product-catalog and marketplace schema at scale is covered by seo-ecommerce.

Technical SEO analysis and fixes: crawlability, indexability, robots.txt, canonicals, redirects, security headers, URL structure, mobile optimization, JavaScript rendering, Core Web Vitals diagnostics — plus XML sitemap validation and generation, hreflang/international SEO auditing, and image SEO (alt text, formats, sizes, lazy loading, WebP/AVIF conversion). Use when the user says 'technical SEO', 'robots.txt', 'canonical', 'sitemap', 'hreflang', 'international SEO', 'image optimization', 'alt text', 'crawlability', or 'indexation issues'. Not for full-site audits with scoring (use seo-audit) or content quality (use seo-content).

Art direction for generating premium brand identity imagery with AI image models — brand-guideline boards, logo concept sheets, identity decks, and visual-world moodboards. Use when the user asks for a "brand kit", "logo concepts", "brand guidelines board", "identity deck", "moodboard", "visual identity", or wants a full brand presented as polished images. Derives a symbolic brand concept before any prompting, then produces restrained, gallery-grade boards with grid layouts, logo lockups, hex-labeled color swatches, type specimens, and business-matched mockups. Generates images only; it does not write code.

Faithful implementation of a website from design images, whether AI-generated or user-provided. Use when the user says "build this from the design image", "implement this mockup", "image to code", "match the design exactly", or hands over design comps/screenshots to turn into a working site. Enforces a deep per-image analysis pass (layout grid, spacing rhythm, exact palette, type scale, component inventory) before any coding, fidelity rules against inventing or omitting elements, and a final verification pass comparing the rendered result against every source image. If no design images exist yet, it first has them generated (art direction via imagegen-web), then implements. Not for generating images as the end product (imagegen-web / imagegen-mobile do that).

Art direction for generating premium mobile app screen concepts for iOS and Android with AI image models. Use when the user asks for "app screen designs", "mobile UI concepts", "app mockups", "design the app screens", or wants a visual concept of a mobile product or app flow. Produces one screen per image inside a subtle premium phone-frame mockup, with a shared token block (palette, type, radius, iconography) enforcing consistency across the whole flow, platform-correct navigation patterns, and a planned 4–8 screen story. Generates images only; it does not write code. Not for website sections (use imagegen-web).

Art direction for generating website design reference images that developers can faithfully rebuild. Use when the user asks for "design reference images", "generate the design first", "section images for the landing page", "website mockup images", or wants visual comps of a marketing site or landing page before coding. Core law — one horizontal image per page section (8 sections = 8 images), never a compressed full-page board; enforces a shared style-token block across all images, composition variety, readable in-image text, and a clear focal action per section. Not for mobile app screens (use imagegen-mobile) and not for implementing code from images (use image-to-code).

Enforces complete, unabridged code output and bans truncation shortcuts. Use whenever the user asks for "the complete code", "the full file", "everything, not a summary", "don't truncate", "no placeholders", "write it all out", or when a deliverable spans multiple files and there is any temptation to abbreviate, stub, or elide parts of it. Provides a scope cross-check before responding, a clean split protocol when output genuinely exceeds limits, and rules for choosing targeted edits versus full-file rewrites.

Design-engineering micro-detail pass for interfaces that already work but feel unrefined. Applies concrete CSS/JS rules for hover/active/focus states, transition timing and easing, enter/exit animations, stagger patterns, layered shadows, border-vs-shadow elevation, nested border-radius, optical alignment, typography details (tabular numbers, letter-spacing, text-wrap balance), image treatment, scroll behavior, and reduced-motion support. Use when the user says "polish", "make it feel better", "it feels off", "micro-interactions", "finishing touches", "add the last 10 percent", or when a UI is functionally done but flat. NOT for full visual overhauls of unrefined designs (use redesign), NOT for choosing a visual direction or creative concept (use taste or style-systems) - this skill refines execution details within an already-chosen design.

Upgrades an EXISTING website or app to premium visual quality without breaking functionality. Audit-first workflow - inventories current pages and components, identifies generic-AI and template patterns (centered-everything, purple gradients, uniform card grids, emoji icons), produces a prioritized redesign plan, then applies changes in safe increments that preserve markup semantics, routes, and JS behavior, ending with a before/after verification checklist. Framework-agnostic (Tailwind, vanilla CSS, CSS-in-JS). Use when the user says "redesign", "make this site look premium", "upgrade the design", "this looks AI-generated", "modernize the UI", or "improve the design without breaking it". NOT for greenfield builds - for new projects use taste (creative direction) plus style-systems (visual system); NOT for micro-detail passes on already-good UIs (use interface-polish).

Commits a project to ONE named visual style system and applies it consistently at token level. Use when deciding a visual direction for a build — "which style should this be", "pick a visual direction", "style system", "minimalist design", "brutalist site", "soft UI", "clean product UI" — or when a codebase mixes styles and needs to be pulled onto a single coherent system. Contains four complete standalone style specs (minimalist-editorial, brutalist-industrial, soft-depth, product-modern) with palettes, type scales, spacing, shadows, components, and motion. NOT a searchable style/palette database (use ui-ux-pro-max for that), not a workflow command (impeccable), and not creative direction from a brief (taste) — this skill enforces one coherent system end-to-end once a direction is chosen.

Best practices for building programmatic videos in React with Remotion v4+. Use when the user mentions "Remotion", "video in React", "programmatic video", "render a video from code", "generate an MP4 from React components", or wants data-driven, templated, or automated video production. Covers the frame-based mental model, compositions, deterministic rendering, interpolate/spring animation, Sequence/Series timing, assets and audio, performance, and CLI rendering. Not for browser animation of live websites — for animating DOM in a running web page (scroll effects, hover states, page transitions), use a GSAP skill instead; Remotion renders video files.

Complete GSAP animation suite — core tweens (gsap.to/from/fromTo, easing, stagger), timelines and sequencing, ScrollTrigger (scroll-linked animation, pinning, scrub, parallax), official plugins (Flip, Draggable, SplitText, ScrollSmoother, SVG drawing), React (useGSAP, cleanup), Vue/Svelte/Nuxt integration, gsap.utils helpers, and performance optimization. Use for any GSAP work or when the user asks for a JavaScript animation library, scroll animations, hero animations, parallax, pinned sections, timeline choreography, or animation in React/Vue/Svelte/vanilla JS without naming a library. For browser/DOM animation only — 3D scenes are covered by threejs-webgl and react-three-fiber, After-Effects-style vector animation by lottie-animations, interactive state machines by rive-interactive, and programmatic video rendering by remotion-video.

UI/UX design intelligence for web and mobile. Searchable local database with 50+ styles, 161 color palettes, 57 font pairings, 161 product types, 99 UX guidelines, and 25 chart types across 10 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, and HTML/CSS). Use when designing, building, or reviewing UI: pages, components, color schemes, typography, layout, accessibility, animation, or data visualization.

After Effects animation rendering for web and React applications. Use this skill when implementing Lottie animations, JSON vector animations, interactive animated icons, micro-interactions, or loading animations. Triggers on tasks involving Lottie, lottie-web, lottie-react, dotLottie, After Effects JSON export, bodymovin, animated SVG alternatives, or designer-created animations. Complements GSAP ScrollTrigger and Framer Motion for scroll-driven and interactive animations.

Build declarative 3D scenes with React Three Fiber (R3F) - a React renderer for Three.js. Use when building interactive 3D experiences in React applications with component-based architecture, state management, and reusable abstractions. Ideal for product configurators, portfolios, games, data visualization, and immersive web experiences.

State machine-based vector animation with runtime interactivity and web integration. Use this skill when creating interactive animations, state-driven UI, animated components with logic, or designer-created animations with runtime control. Triggers on tasks involving Rive, state machines, interactive vector animations, animation with input handling, ViewModel data binding, or React Rive integration. Alternative to Lottie for animations requiring state machines and two-way interactivity.

Comprehensive skill for Three.js 3D web development. Use this skill when building interactive 3D scenes, WebGL/WebGPU applications, product configurators, 3D visualizations, or immersive web experiences. Triggers on tasks involving Three.js, 3D rendering, scenes, cameras, meshes, materials, lights, animations, textures, or WebGL/WebGPU rendering.

Behavioral guidelines to reduce common LLM coding mistakes. Use when writing, reviewing, or refactoring code to avoid overcomplication, make surgical changes, surface assumptions, and define verifiable success criteria.

Reference library of 74 real-world brand design systems as DESIGN.md files (colors, typography, spacing, components, motion). Use when the user wants to match, borrow from, or take inspiration from a specific brand's visual language — "make it look like Linear/Vercel/Stripe/Apple", "give me a Notion-style dashboard", "use a Supabase-like dark theme" — or asks for a curated design token set to seed a new project. Pulls one brand's DESIGN.md as ground-truth reference for building visually consistent UI.

Anti-generic design direction for landing pages, portfolios, and marketing sites. Use when a build brief needs a distinctive creative direction so the result does not look templated or AI-generated — reads the brief, infers the right direction, enforces a strict pre-flight check. Complements ui-ux-pro-max (style/palette/font database) and impeccable (command-driven design workflow); use taste when the question is "what should this look like so it feels designed, not generated". A legacy v1 ruleset is preserved in references/taste-v1-legacy.md.