Claude Skills by kensaurus

Build interactive, accessible charts, graphs, and data dashboards using Recharts, D3, or Victory. Use when the user says "chart", "graph", "data visualization", "analytics dashboard", "metrics display", "D3", "Recharts", "time-series", or "data display".

Diagnose one error/bug with hypotheses and runtime evidence before fixing. Use when "debug this error", "investigate this bug", or behavior is unexpected. FE↔BE contract mismatch → debug-fe-be-integration. Sentry backlog/monitoring → debug-sentry-monitor. Bug-to-PR lifecycle → workflow-fix-and-ship.

Diagnose and fix frontend↔backend contract failures by tracing client requests, server logs, validation, auth, and responses on both sides. Use for API 4xx/5xx, mismatched payloads, validation failures, or "frontend and backend disagree". Single-layer errors → debug-error.

Operate Sentry: triage/fix unresolved issues, reduce noise, audit instrumentation, and monitor after deploy. Use when "check Sentry", "fix Sentry issues", "review production errors", or "improve error tracking". One named bug through PR → workflow-fix-and-ship. Plan-only observability → plan-error-handling.

Release an npm package: version, CHANGELOG, publish, verify. Use when "publish this package", "release to npm", or "ship a new npm version". Running-app production deploy → workflow-ship-and-observe.

Post-deploy smoke test across browser, Sentry, Supabase, Langfuse, and the public web. Use when "verify deploy", "smoke test production", "post-release check", or "ship or rollback". Deploy + observation loop → workflow-ship-and-observe. npm package release → deploy-npm.

Design RESTful and GraphQL APIs following current best practices for naming, versioning, error shapes, and auth patterns. Use when the user says "design an API", "create endpoints", "structure my API responses", "plan API architecture", "REST vs GraphQL", or "API contract".

Create museum-quality visual art in .png and .pdf formats using design philosophy. Use when user asks for poster, visual design, infographic, certificate, badge, banner, social media graphic, print design, or mentions "create artwork", "design graphic", "visual identity", or "print material".

Design and implement transactional and marketing email templates. Use when asked to "build an email template", "transactional email", "welcome email", "password reset email", "email design", "React Email", "MJML", "dark mode email", or "email copy review". Inbox / SPF / spam → enhance-email-deliverability.

Create a new production-grade UI from scratch — not a polish pass. Use when "build this UI", "design this page", or "new dashboard layout". Polish existing → enhance-web-ui. Landing → enhance-web-landing. Redesign existing → enhance-web-redesign.

Create original algorithmic visuals with p5.js, Canvas, or SVG using seeded randomness and interactive controls. Use when "generative art", "procedural visuals", "flow fields", "particle system", or "art from code". Data charts → data-visualization. UI illustration → design-frontend.

Design mobile-first UIs: touch targets, safe areas, gestures, then enhance up. Use when building for small screens, touch, swipe, PWA, or tablet. Linearized desktop / responsive audit → audit-responsive.

Design and implement new isolated motion — micro-interactions, page transitions, scroll, hover — with Framer Motion, CSS, or GSAP. Use when adding one animation to a new surface. Existing-app coherent pass → enhance-motion. Do not fire for "motion pass across the app".

Generate Product Requirements Documents through structured conversation for any project. Use when starting a new feature, documenting requirements, creating specs before implementation, or needing clarity on scope and success criteria.

Build a new design system (tokens, variants, theming). Use when "create a design system" or "component library from scratch". Drifted existing system → housekeep-design. Plan-only unification → plan-uiux-unification.

Apply cohesive visual themes to artifacts (slides, docs, landing pages). Provides 11 pre-set themes with colors/fonts. Use when user mentions "apply theme", "color palette", "brand colors", "styling slides", "presentation design", "visual identity", or wants consistent styling across artifacts.

Create and maintain lightweight Architecture Decision Records as agent-readable decision memory — what was decided, why, and which alternatives were rejected. Use when "record this decision", "set up ADRs", "the agent keeps suggesting Y again". Docs vs code drift → plan-docs-sync. Session state → handoff.

Co-author structured documents (specs, PRDs, RFCs) through a 3-stage workflow: context gathering, drafting, and reader testing. Use when writing proposals, technical specs, or similar structured content. Repo decision-memory system (INDEX.md, rejected alternatives, agent rules) → docs-adr.

Build and sharpen a project's domain model — a CONTEXT.md glossary and ubiquitous language. Use when pinning down terminology, or the agent "uses the wrong words". Repo decision-memory system (INDEX.md, rejected alternatives) → docs-adr.

Write developer docs: README content, API references, code comments, changelog entries. Use when "write docs", "document this API", "add code comments", or "explain for contributors". Visual README makeover → enhance-readme. Docs/code drift plan → plan-docs-sync. Collaborative long-form → docs-coauthor.

Install guardrails-as-code so AI sessions cannot reintroduce leaked secrets, injection, or untested code. Use when "set up guardrails", "stop vibe-coding regressions", "add pre-commit security checks". Gate-logic audit → audit-gate-logic. Gate sprawl → housekeep-gates.

Install mechanically-enforced architecture boundaries (dependency-cruiser / eslint-boundaries) so layer direction, feature isolation, and forbidden imports fail CI. Use when "enforce module boundaries" or "stop spaghetti imports". Advisory audit → audit-backend-architecture. Rule content → audit-doctrine.

Cross-surface UIUX separation skill for hybrid web apps that ship as PWA + iOS + Android via Capacitor (or Tauri / Expo Web / Ionic / RN-Web). Use when a previous UI/UX sweep "improved one surface and broke the other" — desktop polished but mobile cramped, or mobile native but desktop wastes space.

Audit and fix transactional/marketing deliverability — SPF, DKIM, DMARC, reputation, bounce/complaint handling, list hygiene, unsubscribe compliance — so mail lands in the inbox. Use when "emails go to spam", "set up SPF/DKIM", or "check deliverability". Templates stay on design-email.

Audit an existing app's design system and motion, then apply a coherent, performant, reduced-motion-safe pass. Use when "motion pass", "animate the app", or "add micro-interactions across the app". One new isolated animation → design-motion.

Add/upgrade PWA capabilities: manifest, service worker, offline mode, install prompt, push notifications, background sync. Use when "make it a PWA", "offline support", "install prompt", "service worker", or "add to home screen". Native Capacitor → mobile-capacitor-platform.

Audit and fix how easily content is UNDERSTOOD: CPL/reading level, Gestalt grouping, deadspace, icons or a table that cuts verbosity. Use when "hard to read", "too dense", "reading level", "cognitive load", or "turn this prose into a table". Looks-good → enhance-web-ui. Breakpoints → audit-responsive.

Enhance an existing README with a theme-aware hero, feature tour, screenshots/GIF, accurate badges, and synced content. Use when "enhance README", "make README prettier", "add screenshots", or "showcase the app". Content-only docs → docs-writer. Drift audit/plan → plan-docs-sync.

Upgrade an existing SKILL.md prompt (not its behavior) to 2026 practice: degrees of freedom, structured CoT, one worked example, self-critique rubric, term consistency. Use when "enhance this skill's prompts", "upgrade skill authoring", or "apply the prompt playbook". New skill from scratch → meta-skill-creator.

Build or upgrade web forms to production quality: accessible structure, schema-driven validation, client↔server parity. Use when "improve this form", "form validation", "accessible form", "multi-step form", "form error handling", or "the form UX is bad".

Instant in-site nav: Speculation Rules, View Transitions, bfcache, 103 Early Hints. Use when "instant navigation", "prerender", "early hints", "back button reloads", or "second page is slow". First-load CWV → audit-performance. JS weight → audit-bundle-size. SPA → framework prefetch.

Build landing pages, portfolios, and marketing sites that don't look AI-generated. Use when asked for "landing page", "portfolio", "marketing site", "anti-slop", "Awwwards-style", "premium frontend", or when design needs a strong point of view.

Upgrade an existing site/app to premium quality. Use when "redesign this app" or "upgrade UI to premium". One-page polish → enhance-web-ui. Plan-only slop audit → plan-antislop. New UI from scratch → design-frontend.

Audit and fix SEO for any web app. Use when asked to "improve SEO", "add meta tags", "fix search ranking", "add structured data", "sitemap", "canonical URLs", "Open Graph", "Google indexing", "rich results", "SEO audit", or "why is my site not ranking".

Polish an existing page's hierarchy, spacing, type, and visual personality. Use when "make this page polished/premium", "less crowded", or "better visual hierarchy". Understood / CPL → enhance-readability. Flow/IA → enhance-web-ux. Breakpoints → audit-responsive.

NN/g-grounded enhancement of an existing page's flows — not a repo-wide slop audit. Use when "fix UX of /xxx" or "improve information density". Repo-wide authenticity plan → plan-antislop. Composition/type → enhance-web-ui. Dense prose / CPL / reading level → enhance-readability. Heuristics-only → audit-ux.

Add purposeful 3D/WebGL and scroll choreography to an existing site with Three.js/R3F, GSAP, or Motion. Use when "add 3D", "WebGL hero", "React Three Fiber", or "scroll-driven 3D". General UI polish → enhance-web-ui. Motion without 3D → enhance-motion.

Compact the current conversation into a handoff document a fresh agent can pick up. User-invoked via /handoff; an optional argument describes what the next session will focus on.

Apply-now inventory of parked work — unfinished plans, deferred phases, TODO/FIXME, skipped tests, open findings — into a living BACKLOG.md that diffs new/done/stale. Use when "what's left behind", "inventory TODOs", "consolidate the backlog". Execute → complete-everything. Decisions → docs-adr.

Apply-now dead-code removal by category — one commit each, typecheck and tests between, bisect on red, then install the Knip ratchet so it cannot grow back. Use when "delete the dead code", "remove unused files", "wire up Knip". Audit first → plan-dead-code. README/deps → workflow-housekeep.

Apply-now consolidation of a drifted design system into one token/component SSOT. Use after an approved plan-uiux-unification pass, or when "clean up the design system now", "migrate to one button", or "resolve token conflicts". Plan-only burndown → plan-uiux-unification.

Apply-now consolidation of accreted CI gates, ratchets, and hooks into one aggregator required check. Use after audit-gate-logic, or when "clean up our CI checks", "we have three lint jobs", "make one quality gate". Audit-only → audit-gate-logic. Rule content → audit-doctrine. Pipeline cost → audit-cicd.

Turn an agent failure—premature stop, false completion, gamed check, missed file, broken handoff—into a durable rule/skill/hook/CI guard plus regression test. Use when "the agent stopped early again", "it gamed the test", or "add a guard so this doesn't recur". App bugs → workflow-fix-and-ship.

Close the feedback loop for an already-live app: inspect production signals, prioritize top issues, fix, verify live, repeat. Use when "post-launch polish", "fix the top production issues", "iterate on feedback", or "what should I fix next after launch?". One named bug → workflow-fix-and-ship.

Scaffold and implement Model Context Protocol (MCP) servers that expose external services, APIs, and data sources as typed tools and resources for LLM agents. Use when the user says "build an MCP server", "give Claude access to X", "create an MCP tool", "expose my API to an agent", or "AI agent integration".

Create or update a pack SKILL.md (frontmatter, house limits, T1–T6). Use when authoring a cursor-kenji skill. Prompt-only upgrade → enhance-skill-prompts. Cursor skill wizard → create-skill.

Handle Capacitor platform depth beyond UI: plugins, OTA, deep links, push, offline, native CI/CD, App Store / Play Store submission, Apple preflight, security scan, Cordova migration. Use for "add push notifications", "deep linking", "OTA update", "native build CI", "App Store rejection", "migrate to Capacitor".

Boot Android emulator + Metro (Expo / bare RN) in order: inspect IDE terminals, kill stale ports, pick an AVD. Use when "start Metro", "start emulator", "Cannot connect to Expo", or a stuck dev loop. QA on the running emulator → mobile-emulator-test.

QA a native Android build end-to-end on the emulator. Use for "test on emulator", "QA Android build", "verify native build", "white screen", "cache rehydration", "Expo dev-client QA", "adb reverse". Pairs Metro/adb walk with Supabase + Sentry MCPs for three-layer CRUD verification.

Fix React Native / Expo performance, build, and upgrade issues. Use for jank, frame drops, slow startup, large bundles, memory leaks, Hermes, FlashList, Reanimated, Turbo Modules, Android 16KB alignment, or RN/Expo version upgrades.