casoon

@casoon source repo

66 skills
0 followers
20 hours ago last updated

▌
SEO · casoon
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.

0
installs
▌
I18N · casoon
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.

0
installs
▌
Biome · casoon
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.

0
installs
▌
Handoff · casoon
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.

0
installs
▌
Darkmode · casoon
Dark mode implementation for Astro + Tailwind v4 — class-based toggle, FOUC-free init script, cookie/localStorage persistence, and contrast-safe light/dark token pairing.

0
installs
▌
Remotion · casoon
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.

0
installs
▌
Svelte 5 · casoon
Svelte 5

0
installs
▌
Webspire · casoon
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.

0
installs
▌
UI Design · casoon
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.

0
installs
▌
Content QA · casoon
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.

0
installs
▌
Playwright · casoon
Playwright

0
installs
▌
Post Audit · casoon
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.

0
installs
▌
LLM Council · casoon
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.

0
installs
▌
Mdx Content · casoon
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.

0
installs
▌
Tailwind UI · casoon
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.

0
installs
▌
Topic Radar · casoon
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]].

0
installs
▌
UX Patterns · casoon
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).

0
installs
▌
Video Watch · casoon bundle
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.

0
installs
▌
Anti AI Copy · casoon
Anti-AI-Copy

0
installs
▌
Social Pulse · casoon
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).

0
installs
▌
Deep Research · casoon
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).

0
installs
▌
Image To Webp · casoon bundle
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.

0
installs
▌
Motion Design · casoon
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".

0
installs
▌
Visual Trends · casoon
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).

0
installs
▌
AI UX Patterns · casoon
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).

0
installs
▌
Design Systems · casoon
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.

0
installs
▌
Knowledge Base · casoon
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.

0
installs
▌
Native HTML UI · casoon
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.

0
installs
▌
Brand Voice Dna · casoon
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.

0
installs
▌
Faq From Issues · casoon
Erstellt FAQ-Einträge aus wiederkehrenden Barrierefreiheitsproblemen oder Supportfragen. Nutzen, wenn aus Problemen/Fragen ein FAQ werden soll.

0
installs
▌
Frontend Design · casoon bundle
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.

0
installs
▌
Skill Authoring · casoon
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.

0
installs
▌
Web Performance · casoon
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.

0
installs
▌
Aria Usage Review · casoon
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.

0
installs
▌
Design Directions · casoon
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.

0
installs
▌
Alt Text Generator · casoon
Erzeugt sachliche, kontextpassende Alt-Texte und erkennt dekorative Bilder (leeres alt). Nutzen, wenn Alt-Texte für Bilder gebraucht werden.

0
installs
▌
Astro Architecture · casoon
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.

0
installs
▌
Local Business SEO · casoon
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.

0
installs
▌
Accessibility Audit · casoon
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.

0
installs
▌
Complexity Judgment · casoon
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.

0
installs
▌
Web Design Workflow · casoon
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).

0
installs
▌
Astro Client Scripts · casoon
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.

0
installs
▌
Blog From Transcript · casoon
Erzeugt aus einem (YouTube-)Transkript einen strukturierten Blogartikel. Nutzen, wenn Video/Transkript zu Text werden soll.

0
installs
▌
Component Doc Writer · casoon
Schreibt Nutzungs-, Props- und Accessibility-Dokumentation für eine Komponente. Nutzen, wenn eine Komponente dokumentiert werden soll.

0
installs
▌
Systematic Debugging · casoon
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).

0
installs
▌
Case Study From Audit · casoon
Schreibt eine Case Study aus Vorher/Nachher-Audit-Daten. Nutzen, wenn ein Kundenprojekt als Referenz aufbereitet wird.

0
installs
▌
Newsletter From Audit · casoon
Formt Audit-Erkenntnisse in einen Newsletter-Abschnitt. Nutzen, wenn aus Ergebnissen/Erkenntnissen ein Newsletter werden soll.

0
installs
▌
Agent Config Authoring · casoon
Agent-Config-Authoring

0
installs
▌
Semantic HTML Improver · casoon
Ersetzt div/span-Suppe durch semantisch korrektes HTML (Landmarks, Überschriftenhierarchie, native Elemente). Nutzen, wenn Markup semantisch verbessert werden soll.

0
installs
▌
Client Email After Audit · casoon
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.

0
installs
▌
Landing And Site Builder · casoon
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.

0
installs
▌
Accessibility Action Plan · casoon
Formt aus priorisierten Findings einen konkreten, umsetzbaren Maßnahmenplan mit Prioritäts- und Aufwandseinordnung. Nutzen, wenn aus einem Audit ein Umsetzungsplan werden soll.

0
installs
▌
Form Accessibility Review · casoon
Prüft Formulare auf Labels, Fehlermeldungen und Validierung und macht die Validierung barriereärmer. Nutzen beim Review von Formularen und Eingabefeldern.

0
installs
▌
Landingpage From Briefing · casoon
Erzeugt Landingpage-Abschnitte aus Briefing, Produktnotizen oder Report-Daten. Nutzen, wenn aus Rohinput Landingpage-Copy werden soll.

0
installs
▌
Content Clarity A11Y Check · casoon
Prüft Website-Texte auf Verständlichkeit und Barrierefreiheit (Sprache, Struktur, Linktexte, Lesbarkeit). Nutzen beim Review von Inhaltstexten.

0
installs
▌
Conversation Retrospective · casoon
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.

0
installs
▌
Keyboard Navigation Review · casoon
Keyboard-Navigation-Review

0
installs
▌
Linkedin Post From Content · casoon
Bereitet ein Finding, einen Artikel oder eine Erkenntnis als LinkedIn-Post auf. Nutzen, wenn aus Bestandsinhalt ein Social-Post werden soll.

0
installs
▌
Astro Component A11Y Review · casoon
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.

0
installs
▌
Bfsg Risk Language Softener · casoon
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.

0
installs
▌
Overlay Tool Risk Explainer · casoon
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.

0
installs
▌
SEO Article From Audit Data · casoon
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.

0
installs
▌
Accessibility Report Summary · casoon
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.

0
installs
▌
Accessibility Finding Explainer · casoon
Ü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.

0
installs
▌
Lighthouse Axe Result Explainer · casoon
Lighthouse Axe Result Explainer

0
installs
▌
Before After Accessibility Comms · casoon
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.

0
installs

66 published skills