Gsap Suite
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 as…
Awesome Design Md
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 see…
Pre Launch Checklist
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…
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), neve…
Complete Output
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 s…
Seo Audit
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 deployme…
Seo Technical
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…
Seo Ai Visibility
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 li…
Seo Local
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', '…
Style Systems
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…
Imagegen Mobile
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…
Remotion Video
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, Seque…
Ad Concepts
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…
Agency Workflow
The agency project router — orchestrates the full client-project lifecycle BRIEF → CONCEPT → DESIGN → BUILD → QA → LAUNCH 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", "w…
Impeccable
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, ac…
Redesign
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…
Ui Ux Pro Max
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,…
Brandkit
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…
Interface Polish
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, s…
Landingpage Cro
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 → cr…
Image To 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…
Ad Copy
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 protoc…
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) analys…
Social Formats
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, aspec…