Skills
Every skill in skills/, with the description from its SKILL.md frontmatter.
Both Claude Code and Codex read these from their linked skills folder. The descriptions are
quoted from each SKILL.md as written; several are in German, since they come from a German
working environment.
82 skills, read from skills/ when this site was built.
accessibility-action-plan- Formt aus priorisierten Findings einen konkreten, umsetzbaren Maßnahmenplan mit Prioritäts- und Aufwandseinordnung. Nutzen, wenn aus einem Audit ein Umsetzungsplan werden soll.
accessibility-audit- WCAG 2.2 AA patterns for Astro — semantic HTML, keyboard navigation, focus indicators, form labels, contrast ratios, ARIA roles, and motion preferences. Use when building or auditing any UI for accessibility, adding forms or interactive components, reviewing contrast or touch targets, or when fixing axe-core violations from Playwright tests. Load this skill before adding any form, dialog, tab, accordion, or icon-only button.
accessibility-finding-explainer- Übersetzt ein einzelnes technisches Barrierefreiheits-Finding (axe, Lighthouse, Pa11y, manuelle WCAG-Prüfung) in sachliche, verständliche Kundensprache. Nutzen, wenn ein Finding kundengerecht mit Auswirkung, Maßnahme und Priorität erklärt werden soll.
accessibility-report-summary- Erstellt aus technischen Audit-Rohdaten (Lighthouse, axe, Pa11y, auditmysite, manuelle Prüfung) eine verständliche Zusammenfassung für Endkunden. Nutzen, wenn ein ganzer Report/Scan kundenfreundlich zusammengefasst werden soll.
- Konventionen für die Projekt-Config-Ebene der Coding-Agenten (CLAUDE.md / AGENTS.md / GEMINI.md) — Verhaltens-Baseline, Hierarchie, Token-Effizienz, Multi-Tool-Symlinks. Vor allem: die Entscheidung, was in CLAUDE.md gehört vs. in einen Skill vs. Auto-Memory vs. knowledge-base. Nutzen beim Aufsetzen/Verbessern von Projekt-Config. NICHT für das Schreiben einzelner Skills (→ skill-authoring).
agents-sdk- Build AI agents on Cloudflare Workers using the Agents SDK. Load when creating stateful agents, durable workflows, real-time WebSocket apps, scheduled tasks, MCP servers, chat applications, voice agents, or browser automation. Covers Agent class, state management, callable RPC, Workflows, durable execution, queues, retries, observability, and React hooks. Biases towards retrieval from Cloudflare docs over pre-trained knowledge.
ai-ux-patterns- UX-Patterns für KI-/Assistenz-Interfaces — Prompt-UI, Chat-Interfaces, KI als Assistenz vs. Automat, Explainable-AI-Elemente, adaptive/personalisierte Interfaces, konversationelle UX. Nutzen beim Design von Chat-, Prompt- oder Assistenz-Features. NICHT für allgemeine UX-Zustände (→ ux-patterns) oder visuelle Gestaltung von Chat-UI-Komponenten (→ ui-design).
alt-text-generator- Erzeugt sachliche, kontextpassende Alt-Texte und erkennt dekorative Bilder (leeres alt). Nutzen, wenn Alt-Texte für Bilder gebraucht werden.
anti-ai-copy- Überarbeitet Text jeder Art — Kunden-Copy, Blogartikel, Doku, interne Texte —, damit er nicht „nach ChatGPT klingt": spezifisch, menschlich, mit Belegen. Nutzen, wenn Text zu glatt/generisch/SaaS-ig wirkt, „nach AI" klingt oder entschärft werden soll — bei jeder Texterstellung als Nachbearbeitungsschritt relevant, nicht nur bei Marketing-Copy. NICHT für reine Rechtschreib-/Grammatik-Korrektur, juristische/regulatorische Texte oder wenn ausdrücklich konventioneller Corporate-Ton gewünscht ist.
aria-usage-review- Findet falsche oder überflüssige ARIA-Nutzung (redundante Roles, kaputte id-Referenzen, ARIA statt nativem Element) und korrigiert sie. Nutzen beim Review von ARIA-Attributen.
astro-architecture- Astro v6 architecture — rendering modes (SSG/SSR/hybrid), routing, Content Collections Loader API, Zod v4 schemas, hydration directives, API routes, and Node 22+ setup. Use when creating or modifying .astro pages and layouts, configuring astro.config.mjs, setting up or querying content collections, choosing rendering strategy, or hitting v5→v6 migration errors (`entry.slug`, `entry.render()`, `getEntryBySlug`, `src/content/config.ts` all changed in v6). Load this skill before touching any .astro file or astro config.
astro-client-scripts- Client-side script patterns in Astro — when to use scoped <script> vs is:inline, ClientRouter behavior, define:vars, and when to reach for a Svelte island instead. Use when adding or reviewing <script> tags in .astro files.
astro-component-a11y-review- Prüft eine einzelne Astro-/React-/HTML-Komponente auf typische Barrierefreiheitsprobleme und liefert konkrete Fixes. Nutzen beim a11y-Review einer Komponente. Für WCAG-Patterns siehe accessibility-audit.
before-after-accessibility-comms- Erstellt Vorher/Nachher-Kommunikation, die erzielte Barrierefreiheits-Verbesserungen für Kunden greifbar macht. Nutzen, wenn ein Re-Audit Fortschritt zeigt und das kommuniziert werden soll.
bfsg-risk-language-softener- Entschärft alarmistische oder rechtlich absolute Aussagen zu BFSG, WCAG, Abmahnrisiko und Compliance, ohne die Kernaussage zu verlieren. Nutzen, wenn ein Text zu Barrierefreiheit juristische Drohkulisse enthält.
biome- Biome configuration for linting and formatting — single tool replacing ESLint and Prettier, with Astro/Svelte/Tailwind quirks and pre-commit wiring. Use for lint errors, formatting rules, and code-style questions.
blog-from-transcript- Erzeugt aus einem (YouTube-)Transkript einen strukturierten Blogartikel. Nutzen, wenn Video/Transkript zu Text werden soll.
brand-voice-dna- Extrahiert die funktionale Markenstimme eines Kunden aus dessen Bestandstexten und hält sie als wiederverwendbare Voice-DNA-Spec fest, um sie über Kanäle (Landing, Blog, Mail, Social) konsistent zu replizieren. Nutzen, wenn eine Kundenstimme erfasst, dokumentiert oder für die Copy-Skills nutzbar gemacht werden soll. NICHT für Einzeltext-Korrektur, generische Tonfall-Wünsche ohne Kundenmaterial oder wenn nur eine Rechtschreib-/Grammatikprüfung gefragt ist.
case-study-from-audit- Schreibt eine Case Study aus Vorher/Nachher-Audit-Daten. Nutzen, wenn ein Kundenprojekt als Referenz aufbereitet wird.
client-email-after-audit- Generiert eine Kunden-E-Mail nach einem Accessibility-Audit — sachlich, lösungsorientiert, ohne Panikmache. Nutzen, wenn Audit-Ergebnisse per E-Mail an den Kunden gehen.
cloudflare- Comprehensive Cloudflare platform skill covering Workers, Pages, storage (KV, D1, R2), AI (Workers AI, Vectorize, Agents SDK), feature flags (Flagship), networking (Tunnel, Spectrum), security (WAF, DDoS), and infrastructure-as-code (Terraform, Pulumi). Use for any Cloudflare development task. Biases towards retrieval from Cloudflare docs over pre-trained knowledge.
cloudflare-email-service- Send and receive transactional emails with Cloudflare Email Service (Email Sending + Email Routing). Use when building email sending (Workers binding or REST API), email routing, Agents SDK email handling, or integrating email into any app — Workers, Node.js, Python, Go, etc. Also use for email deliverability, SPF/DKIM/DMARC, wrangler email setup, MCP email tools, or when a coding agent needs to send emails. Even for simple requests like "add email to my Worker" — this skill has critical config details.
cloudflare-one- Guides Cloudflare One Zero Trust and SASE work across Access, Gateway, WARP, Tunnel, Cloudflare WAN, DLP, CASB, device posture, and identity. Use when designing, configuring, troubleshooting, or reviewing Cloudflare One deployments. Retrieval-first: use current Cloudflare docs/API schemas instead of embedded product docs.
cloudflare-one-migrations- Plans migrations from Zscaler ZIA/ZPA, Palo Alto, legacy VPN, SWG, or SASE stacks to Cloudflare One. Use for migration assessments, policy mapping, rollout plans, and parity/gap analysis.
complexity-judgment- Gegengewicht zu reinen Minimal-Code-/YAGNI-Regeln (eigenes CLAUDE.md, Ponytail-artige "so wenig Code wie möglich"-Skills) — wann eine Zeile mehr, eine Abstraktion, oder mehr Sorgfalt tatsächlich richtig ist. Nutzen als kurze Gegenfrage VOR dem Schreiben stark komprimierten/minimalen Codes, bei Refactoring-Entscheidungen, oder wenn eine "kürzer ist besser"-Regel im Einzelfall falsch wirkt. NICHT als Rechtfertigung für Over-Engineering oder spekulative Abstraktion ohne konkreten, genannten Bedarf — Minimalismus bleibt der Default, dieser Skill ist die Ausnahme-Prüfung davor.
component-doc-writer- Schreibt Nutzungs-, Props- und Accessibility-Dokumentation für eine Komponente. Nutzen, wenn eine Komponente dokumentiert werden soll.
content-clarity-a11y-check- Prüft Website-Texte auf Verständlichkeit und Barrierefreiheit (Sprache, Struktur, Linktexte, Lesbarkeit). Nutzen beim Review von Inhaltstexten.
content-qa- Fachlicher Content-QA-Audit für Website-Texte — prüft auf fachliche Richtigkeit, Begriffsverwechslungen (z.B. zwei ähnlich klingende, aber fachlich unterschiedliche Eigenschaften), Verallgemeinerungen, fehlende Einschränkungen (Bundesland/Land/Hersteller/Zulassung) und rechtliche Risiken. Nutzen bei Audits kompletter Seiten/des gesamten Contents, oder wenn ein Kunde/Nutzer eine fachliche Ungenauigkeit meldet. Ergänzt /audit (breiter Konsistenz-/SEO-/Platzhalter-Scan) um die Fact-Checking-Perspektive eines Fachexperten.
conversation-retrospective- Prüft eine oder mehrere vergangene Sessions auf wiederkehrende Reibung und Korrekturen und wandelt jedes Muster in eine konkrete System-Verbesserung (neuer/erweiterter Skill, Memory-Eintrag, Guardrail). Nutzen für Retrospektiven ("was lief schief", "welche Skills fehlen", "Loop straffen", "System smarter machen"). NICHT für inhaltliche Zusammenfassungen einer Session oder einmalige Task-Komplexität.
darkmode- Dark mode implementation for Astro + Tailwind v4 — class-based toggle, FOUC-free init script, cookie/localStorage persistence, and contrast-safe light/dark token pairing.
deep-research- Mehrquellen-Rechercheverfahren — Fan-out-Websuche, Quellen abrufen, Behauptungen adversarial verifizieren, zitierten Report synthetisieren. Nutzen für tiefe, faktengeprüfte Recherche (Markt, Wettbewerb, Technik, Thought-Leadership, Whitepaper). NICHT für einfache Faktenfragen, schnelle Lookups oder Themen-Monitoring (dafür topic-radar).
design-directions- Taxonomie der gängigen Webdesign-Richtungen (Editorial, Corporate, Premium/Luxury, Bold Branding, Minimalismus, Tech, Storytelling, Conversion, Content-First, Brand-First) mit Merkmalen und passenden Branchen/Zielen — um bewusst EINE Richtung zu wählen statt beim Default-Template zu landen. Nutzen bei Designrichtungs-Entscheidungen (Phase 5 in web-design-workflow). NICHT für die konkrete ästhetische Ausführung — dafür frontend-design.
design-systems- Design-System-Grundlagen — Token-Architektur (Farbe/Spacing/Typografie als benannte Variablen), Komponentenbibliotheken strukturieren, Variable Themes, responsive Component-Patterns. Nutzen beim Aufbau oder der Erweiterung eines Design-Tokens-Sets bzw. einer Komponentenbibliothek. Für die konkrete Dark-Mode-Implementierung siehe darkmode, für Animations-Tokens siehe motion-design, für die 7 UI-Kernregeln siehe ui-design.
durable-objects- Create and review Cloudflare Durable Objects. Use when building stateful coordination (chat rooms, multiplayer games, booking systems), implementing RPC methods, SQLite storage, alarms, WebSockets, or reviewing DO code for best practices. Covers Workers integration, wrangler config, and testing with Vitest. Biases towards retrieval from Cloudflare docs over pre-trained knowledge.
faq-from-issues- Erstellt FAQ-Einträge aus wiederkehrenden Barrierefreiheitsproblemen oder Supportfragen. Nutzen, wenn aus Problemen/Fragen ein FAQ werden soll.
form-accessibility-review- Prüft Formulare auf Labels, Fehlermeldungen und Validierung und macht die Validierung barriereärmer. Nutzen beim Review von Formularen und Eingabefeldern.
frontend-design- Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
handoff- Erzeugt am Ende einer Session einen kopierbaren Übergabe-Prompt, mit dem eine frische Session (leerer Kontext) nahtlos weitermacht. Nutzen, wenn eine Session übergeben oder der Kontext resettet werden soll, oder wenn man später/mit einem anderen Agenten weiterarbeiten will. NICHT für laufende Arbeit oder ein reines Ergebnis-Fazit — dafür ist der Recap-Schritt da.
i18n- Internationalization for Astro — URL-prefix routing, per-locale t() dictionaries, language switcher, localized OG images, and hreflang. Documents the astro-v7-template default (en at root, /de/ prefix) — individual projects can and do override this, always check the project's astro.config.mjs first. Use when adding a new language, creating translated pages, fixing language switcher behavior, setting up hreflang links, or debugging locale routing. Load this skill whenever locale, language, translation, or "German" comes up in an Astro context.
image-to-webp- Use when converting PNG/JPG images to WebP for web deployment — covers dimension limits by use-case, quality settings, batch conversion, reference updates in Astro files, and cleanup of originals.
- Prüft Tastaturbedienbarkeit: Fokusreihenfolge, sichtbarer Fokus, Tastatur-Fallen, vollständige Bedienung ohne Maus. Nutzen, wenn Keyboard-Access geprüft werden soll.
knowledge-base- Belegte, kompoundierende Wissensbasis für Kunden-/Domänenfakten (Projektfakten, wiederkehrende A11y-Muster, BFSG-Stand) als untereinander verlinkte Markdown-Seiten mit Quellen-Herkunft. Kompiliert Wissen einmal statt pro Query neu (RAG-Alternative). Nutzen, wenn Fakten aus Quellen dauerhaft abgelegt, verlinkt, gelintet oder abgefragt werden sollen, oder wenn Case-Study/FAQ/Artikel belegtes Projektwissen brauchen. NICHT für konversationelle Auto-Memory (MEMORY.md), einmalige Lookups oder flüchtige Notizen.
landing-and-site-builder- End-to-end-Workflow, um eine Website oder Landingpage im Astro-Stack zu planen und zu bauen — oder als Design-Brief an Claude design zu übergeben. Orchestriert die vorhandenen Design-, Content-, SEO- und A11y-Skills über einen Vertical-Slice-Loop mit Council-Entscheidungs-Gate. Nutzen beim Start einer neuen Site/Landing, beim Umstrukturieren oder wenn aus einem Briefing eine gebaute Seite werden soll.
landingpage-from-briefing- Erzeugt Landingpage-Abschnitte aus Briefing, Produktnotizen oder Report-Daten. Nutzen, wenn aus Rohinput Landingpage-Copy werden soll.
lighthouse-axe-result-explainer- Erklärt Lighthouse- und axe-Ergebnisse: was die Regel bedeutet, warum sie zählt, wie man sie behebt. Nutzen, wenn Tool-Output eingeordnet werden soll (intern/technisch).
linkedin-post-from-content- Bereitet ein Finding, einen Artikel oder eine Erkenntnis als LinkedIn-Post auf. Nutzen, wenn aus Bestandsinhalt ein Social-Post werden soll.
llm-council- Deliberationsverfahren (Karpathys „LLM Council") für Entscheidungen mit echten Zielkonflikten — unabhängige Perspektiven erzeugen, sich gegenseitig kritisieren lassen, dann synthetisieren. Nutzen bei Strategie, Positionierung, Architektur, Preisgestaltung, Priorisierung, Design-Richtung. NICHT für Faktenfragen, Zusammenfassungen, Übersetzungen oder kleine Aufgaben.
local-business-seo- Local SEO for company sites — LocalBusiness and Service JSON-LD, geo meta tags, areaServed hierarchy, regional keyword patterns, and the substance-over-keywords ranking approach. Use when adding local schema, regional landing pages, or optimizing for city-level search.
mcp-builder- Guide for creating high-quality MCP (Model Context Protocol) servers that enable LLMs to interact with external services through well-designed tools. Use when building MCP servers to integrate external APIs or services, whether in Python (FastMCP) or Node/TypeScript (MCP SDK).
mdx-content- MDX and Content Collections for Astro v6 — Loader API, frontmatter schemas, draft filtering, rendering with `render(entry)`, remark-directive pitfalls (ratios like 4.5:1 break in prose!), and the full blog post workflow. Use when adding or editing blog posts, defining collection schemas, querying posts with getCollection/getEntry, setting up RSS, or when MDX content renders unexpectedly. Also use when the word "blog", "post", "MDX", or "content collection" appears.
motion-design- Motion design system for Astro + Tailwind v4 + Svelte 5 — animation tokens, component state patterns, scroll reveals, performance rules, and modern CSS 2025/2026 features. Use this skill whenever adding any animation, transition, hover effect, scroll reveal, micro-interaction, or motion to any component or page. Also use when the user mentions "animation", "transition", "hover effect", "motion", "scroll reveal", "fade in", "entrance animation", "interactive feel", or wants a page to feel "more alive", "more polished", or "like Stripe/Apple/Linear/Vercel".
native-html-ui- Native browser/HTML features that replace common JS-library UI patterns — popover API, <details name> accordion groups, <dialog> modals, declarative Shadow DOM, fetchpriority, and <datalist> autocomplete. Use this BEFORE reaching for a JS library or hand-rolled component whenever building a modal, popover, tooltip, dropdown, accordion/FAQ, autocomplete input, or a Web Component — check whether plain HTML/CSS already solves it with less code, better accessibility, and no bundle-size cost. Also relevant when reviewing UI code that manually implements focus traps, click-outside listeners, or z-index stacking for overlays.
- Formt Audit-Erkenntnisse in einen Newsletter-Abschnitt. Nutzen, wenn aus Ergebnissen/Erkenntnissen ein Newsletter werden soll.
overlay-tool-risk-explainer- Erklärt sachlich Risiken und Grenzen von Accessibility-Overlay-Tools (UserWay, accessiBe, EqualWeb u.a.) gegenüber echter Barrierefreiheit. Nutzen, wenn ein Kunde ein Overlay einsetzen will oder danach fragt.
playwright- Playwright E2E test patterns for Astro — project setup, serving the static build, and ready-to-use specs for navigation, SEO meta, a11y (axe-core), i18n locales, contact forms, and theme toggling. Use when writing new E2E specs, debugging failing tests, setting up playwright.config.ts, or running `pnpm test:e2e`. Critical: tests run against the static dist/ build — always build first, and don't try to test SSR-only endpoints from E2E.
post-audit- Post-build SEO / link / a11y audit via @casoon/astro-post-audit — integration setup, options, what it checks, and how to fix common findings. Use when wiring up build audits or resolving audit failures.
remotion- Remotion workflow for animated explainer videos embedded in Astro sites — composition setup, render pipeline (ProRes → MP4 → WebP poster), frontmatter integration, and Astro component embedding. Use when building or integrating Remotion videos into an Astro project.
sandbox-migrate-to-next- Use when porting a Cloudflare Sandbox app from stable @cloudflare/sandbox to @cloudflare/sandbox@next (Sandbox SDK 1.0 preview), or when the user asks to migrate or upgrade to Sandbox 1.0 / @next. Not for day-to-day stable work (sandbox-stable) or new @next apps (sandbox-next).
sandbox-next- Use when building or changing Cloudflare Sandbox apps on @cloudflare/sandbox@next (Sandbox SDK 1.0 preview)—code execution, AI runners, interpreters, CI-like jobs, terminals, files, mounts, tunnels, preview URLs, lifecycle, or errors. Not for the default stable package (use sandbox-stable) or for porting stable to @next (use sandbox-migrate-to-next).
sandbox-sdk- Build sandboxed applications for secure code execution. Load when building AI code execution, code interpreters, CI/CD systems, interactive dev environments, or executing untrusted code. Covers Sandbox SDK lifecycle, commands, files, code interpreter, and preview URLs. Biases towards retrieval from Cloudflare docs over pre-trained knowledge.
sandbox-stable- Use when building or changing Cloudflare Sandbox apps on the current stable @cloudflare/sandbox package (default npm tag)—commands, sessions, files, ports, tunnels, terminals, bridge, production, or deprecated-API cleanup while staying on stable. Not for @cloudflare/sandbox@next (use sandbox-next) or for porting to 1.0 (use sandbox-migrate-to-next).
semantic-html-improver- Ersetzt div/span-Suppe durch semantisch korrektes HTML (Landmarks, Überschriftenhierarchie, native Elemente). Nutzen, wenn Markup semantisch verbessert werden soll.
seo- On-page SEO for Astro sites — meta tags, Open Graph images (og:title, og:image), canonical URLs, sitemap.xml, robots.txt, and JSON-LD WebPage/Article schema. Use when setting up or debugging meta descriptions, OG tags, canonical links, structured data, sitemap generation, robots config, or when a page isn't indexed correctly. For LocalBusiness schema or city/regional landing pages, use local-business-seo instead.
seo-article-from-audit-data- Macht aus Messdaten und Audit-Findings einen SEO-Blogartikel. Nutzen, wenn aus Report-/Scan-Daten Content werden soll. Für On-Page-SEO-Mechanik siehe seo.
- Conventions for skills in this repo — folder structure, description writing, gotcha-first content, categories taxonomy, and governance. Use when reviewing an existing skill for quality or deciding where a new skill belongs. For creating a skill from scratch or running evals, use skill-creator instead.
skill-creator- Create new skills, modify and improve existing skills, and measure skill performance. Use when users want to create a skill from scratch, edit, or optimize an existing skill, run evals to test a skill, benchmark skill performance with variance analysis, or optimize a skill's description for better triggering accuracy.
- Recherchiert, was gerade öffentlich über ein Thema gesagt wird — Reddit, Hacker News, X/Twitter, YouTube, Foren, allgemeines Web — zeitlich eingegrenzt (Standard letzte 30 Tage). Nutzen für Sentiment-Checks, „was denkt die Community über X", Launch-/Release-Reaktionen, Wettbewerber-Buzz. NICHT für faktengeprüfte Tiefenrecherche (→ deep-research) oder periodisches Monitoring kuratierter Quellen (→ topic-radar).
svelte-5- Svelte 5 Runes for interactive Astro islands — $state, $derived, $effect, $props(), event syntax (onclick not on:click), and shared reactive state in .svelte.ts. Use when creating or modifying .svelte components, debugging Runes errors, or migrating from Svelte 4 patterns (export let, on:click, $: reactive, stores are all gone in Svelte 5). Also use when deciding whether to reach for a Svelte island or keep a component static in .astro.
systematic-debugging- Diszipliniertes Root-Cause-Debugging für harte Bugs und Performance-Regressionen im Astro/Cloudflare-Stack — zuerst eine schnelle Pass/Fail-Feedback-Loop bauen, dann Ursache belegen, dann minimal fixen. Nutzen, wenn etwas kaputt/flaky ist, wirft, fehlschlägt, sich falsch verhält, seit einem Deploy langsamer wurde, oder wenn schon 2+ Fix-Versuche gescheitert sind. Nicht für triviale, offensichtliche Einzeiler (Typo, fehlender Import) und nicht für das Schreiben neuer E2E-Specs (siehe playwright).
tailwind-ui- Tailwind CSS v4 guidance — Vite plugin setup, CSS-first @theme configuration, v4 syntax changes, container queries, dark-mode custom variant, logical properties, and design-token discipline.
topic-radar- Scannt periodisch eine kuratierte Quellen-Liste (Wettbewerber-Blogs, WCAG/BFSG-News, Astro-/Cloudflare-Releases, Branchen-Feeds), filtert Neues nach Relevanz + Aktualität und liefert gerankte Content-Chancen. Nutzen für Blog-Themenfindung und um [[linkedin-post-from-content]] / [[newsletter-from-audit]] zu speisen. NICHT für eine einmalige, gezielte Recherche zu einem Thema — dafür [[deep-research]].
turnstile-spin- Set up Cloudflare Turnstile end-to-end in a project. Scan the codebase, create the widget via the Cloudflare API, embed it where user requests need bot verification (form submissions, SPA actions, API endpoints, download links, comment or vote submissions, etc.), wire canonical server-side siteverify in the customer's existing backend, validate, and persist the skill. Load this when a user asks to add Turnstile, set up CAPTCHA, protect a form or endpoint from bots, or fix a Turnstile integration. Mirrors developers.cloudflare.com/turnstile/spin.
ui-design- Seven core UI rules for consistent, hierarchical, readable interfaces — colors, spacing, typography, and CTA tiers. Use when checking specific component consistency, reviewing layouts for visual hierarchy, or applying systematic spacing and color rules. For broader aesthetic direction and making design choices that don't look templated, use frontend-design instead.
ux-patterns- UX-Pattern-Bibliothek für Interaktionsdesign — Progressive Disclosure, Empty States, Onboarding-Flows, Microcopy, Lade-/Fehlerzustände, Navigation, User Flows. Mit Einsatzkriterien und typischen Fehlern pro Pattern. Nutzen bei Entscheidungen zu Interaktionsverhalten und UI-Zuständen. NICHT für visuelle Gestaltung (→ ui-design/frontend-design) oder Animation (→ motion-design).
video-watch- Lässt Claude ein Video tatsächlich sehen und hören — Frames extrahieren und Read()en, Transkript aus Captions oder Whisper-Fallback. Nutzen, wenn eine Frage sich auf ein konkretes Video/eine Aufnahme bezieht (URL oder lokale Datei) — Bug-Screen-Recording diagnostizieren, Video zusammenfassen, Hook/Struktur eines Konkurrenz-Videos analysieren, "was passiert bei Minute X". NICHT für reine Audio-Transkription ohne visuellen Bezug oder wenn ein Text-Transkript bereits vorliegt.
visual-trends- Aktuelle visuelle UI-Trend-Stilmittel — Glassmorphism, Neomorphism, Gradient-Systeme, Icon-Systeme, Illustration vs. Fotografie, Bento-Grids — mit Einsatzkriterien und Fallstricken. Ergänzt die festen Regeln aus ui-design um dosiert einsetzbare Trend-Stilmittel. Nutzen bei der visuellen Gestaltung einzelner Komponenten/Sections. NICHT für die Kernregeln zu Spacing/Typografie/Farbsystem (→ ui-design) und NICHT für die grundsätzliche Stilrichtung einer ganzen Seite (→ design-directions/frontend-design).
web-design-workflow- Creative-Director-Prozess für individuelles Webdesign — Strategie → Designsystem → Layout → Inhalte → Code, statt sofort HTML zu erzeugen. Erzwingt Markenanalyse, 3–5 bewusst unterschiedliche Designkonzepte und ein fertiges Designsystem VOR dem ersten Layout. Nutzen bei neuer Website/Relaunch, wenn das Ergebnis nach Marke aussieht, nicht nach Template. NICHT für kleine Einzelseiten/Copy-only (→ landing-and-site-builder) oder reine Ästhetik-Fragen (→ frontend-design).
web-perf- Analyzes web performance using Chrome DevTools MCP. Measures Core Web Vitals (LCP, INP, CLS) and supplementary metrics (FCP, TBT, Speed Index), identifies render-blocking resources, network dependency chains, layout shifts, caching issues, and accessibility gaps. Use when asked to audit, profile, debug, or optimize page load performance, Lighthouse scores, or site speed. Biases towards retrieval from current documentation over pre-trained knowledge.
web-performance- Static performance patterns for Astro sites — responsive images, CSS containment, minimal client JS, font loading, and Core Web Vitals targets. Use when writing or reviewing code to prevent performance issues (image sizing, lazy loading, bundle splitting). For live profiling and measurement with Chrome DevTools, use web-perf instead.
webspire- Webspire MCP integration for UI patterns, CSS snippets, and design tokens — hero/pricing/FAQ patterns, scroll/hover/glass snippets, three-layer token system. Use when enhancing pages with Webspire patterns or querying the registry via MCP.
workers-best-practices- Reviews and authors Cloudflare Workers code against production best practices. Load when writing new Workers, reviewing Worker code, configuring wrangler.jsonc, or checking for common Workers anti-patterns (streaming, floating promises, global state, secrets, bindings, observability). Biases towards retrieval from Cloudflare docs over pre-trained knowledge.
wrangler- Cloudflare Workers CLI for deploying, developing, and managing Workers, KV, R2, D1, Vectorize, Hyperdrive, Workers AI, Containers, Queues, Workflows, Pipelines, and Secrets Store. Load before running wrangler commands to ensure correct syntax and best practices. Biases towards retrieval from Cloudflare docs over pre-trained knowledge.