Claude Skills by Gekkos-tech

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...

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, ...

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...

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 ...

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, ...

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...

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 eleme...

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 anpas...

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"...

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. Cov...

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 f...

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 consi...

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,...

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"...

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, vani...

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) wi...

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 ru...

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.

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 sectio...

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.

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 ...

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.

Audit and improve web accessibility following WCAG 2.2 guidelines. Use when asked to "improve accessibility", "a11y audit", "WCAG compliance", "screen reader support", "keyboard navigation", or "make accessible".

Apply modern web development best practices for security, compatibility, and code quality. Use when asked to "apply best practices", "security audit", "modernize code", "code quality review", or "check for vulnerabilities".

Optimize Core Web Vitals (LCP, INP, CLS) for better page experience and search ranking. Use when asked to "improve Core Web Vitals", "fix LCP", "reduce CLS", "optimize INP", "page experience optimization", or "fix layout shifts".

Optimize web performance for faster loading and better user experience. Use when asked to "speed up my site", "optimize performance", "reduce load time", "fix slow loading", "improve page speed", or "performance audit".

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 ru...

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 optimizat...

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', 'SE...

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'...

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 ...

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', 'a...