Skills

Audit and fix HTML accessibility issues including ARIA labels, keyboard navigation, focus management, color contrast, and form errors. Use when adding interactive controls, forms, dialogs, or reviewing WCAG compliance.

Scaffold authentication into TypeScript/JavaScript apps using Better Auth. Detect frameworks, configure database adapters, set up route handlers, add OAuth providers (Google, GitHub, Apple, Microsoft, Discord, X), and create login, sign-up, password reset, and verification pages. Use when the user wants login, signup, sign in, sign up, account, OAuth, magic link, passkey, 2FA, or any authentication added to a new or existing project.

Validates animation durations, enforces typography scale, checks component accessibility, and prevents layout anti-patterns in Tailwind CSS projects. Use when building UI components, reviewing CSS utilities, styling React views, or enforcing design consistency.

Build a blog or content site with post list, post detail, and an editorial layout. Use when the user asks for a blog, newsletter site, writing portfolio, or content-driven site where reading typography is the priority. Prefer scaffold-next for static-friendly routing.

Apply a user's existing brand identity (colors, fonts, logo, voice) consistently across a generated site or app. Use when the user provides brand assets — hex codes, font names, a brand PDF, an existing site — and wants the new build to match. NOT for inventing a brand from scratch (use theme-kit for that).

Raw industrial brutalist interfaces fusing Swiss typographic print with military terminal / telemetry aesthetics. Rigid modular grids, extreme type-scale contrast, utilitarian color, hard 90-degree corners, mono metadata, analog degradation effects. For portfolios, editorial, or data-heavy sites that should feel like a declassified blueprint.

Build an analytics or admin dashboard UI with sidebar navigation, top bar, stat cards, and a primary chart or table area. Use when the user asks for a dashboard, admin panel, analytics view, or "control panel" for any kind of data. Prefer scaffold-next; falls back to scaffold-react.

Guidance for building deliverable, compliant, user-friendly email flows. Use when the user adds email signup, password reset, magic links, transactional sends, newsletters, contact forms, or asks about spam / SPF / DKIM / DMARC / bounces / CAN-SPAM / GDPR. Vendor-agnostic — concept is the same with Resend, SendGrid, Postmark, AWS SES, or fetch+SMTP.

Never claim a build is "done", "working", "tests pass", or "preview ready" without running the verification that proves it. Use when about to report success, mark a turn complete, or hand back to the user. Pairs with the diagnosticsRunner output already in the workspace.

Build premium, non-templated frontends for any website, landing page, marketing site, portfolio, dashboard, web app, page, UI, component, or layout. Read the brief, pick a deliberate design direction, and avoid generic AI-slop aesthetics. Covers typography, color, spacing, motion, hero design, and a pre-flight check.

Build browser mini-games that feel made, not generated — game loop structure, dual input (touch + keyboard), procedural graphics, synth SFX, juice (screenshake, particles, easing), difficulty ramps, score/game-over patterns, and mobile-safe controls. Use when the user wants a game, arcade game, platformer, shooter, puzzle, tetris, snake, breakout, pong, clicker, endless runner, or any playable interactive experience.

Clarify user intent before writing code on vague or ambiguous prompts. Use when the user's request is broad, abstract, contradictory, or names multiple disconnected features. Trigger words include "build me an app", "make something", "platform", "idea", "not sure what I want", "anything cool", or a one-liner request with no concrete deliverable. NOT for prompts that clearly describe one concrete website or feature.

Build a polished single-page marketing landing page with hero, features, social proof, and CTA. Use when the user asks for a landing page, product launch page, waitlist page, or "splash" page for a startup/product. Prefer scaffold-next for production polish; scaffold-vanilla for a one-file demo.

Build a multi-page marketing site — home, features, pricing, about, contact — for a startup or product. Use when the user asks for a "company site", "product site", or multi-page marketing presence (not just a single landing page). Prefer scaffold-next for multi-route polish.

Clean editorial minimalist interfaces in the Notion / Linear style. Warm monochrome palette, strong typographic hierarchy, generous whitespace, flat bento grids, muted pastel accents. No heavy gradients, no big shadows, no pill-shaped containers.

Audit and fix animation performance issues including layout thrashing, compositor properties, scroll-linked motion, and blur effects. Use when animations stutter, transitions jank, or reviewing CSS/JS animation performance.

Guide Stripe integrations — API selection (Checkout Sessions vs PaymentIntents), Connect platform setup, billing and subscriptions, Treasury financial accounts, integration surfaces (Checkout, Payment Element), migrating from deprecated APIs, and security best practices (restricted keys, webhooks, OAuth). Use when the user wants to accept payments, add Stripe, build a marketplace, charge customers, process payments, set up subscriptions, create connected accounts, or implement secure key handling.

Build a personal portfolio site for a designer, developer, writer, or creative — about, work/projects, contact. Use when the user asks for a portfolio, personal site, "for hire" site, or showcase site. Prefer scaffold-next for static-friendly multi-route output.

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

Upgrade or redesign an existing site or app by auditing first, then fixing design problems. Detect preserve-vs-overhaul, extract existing brand tokens, protect SEO and information architecture, and modernize typography, spacing, color, and motion without breaking what works.

Identify exploitable security vulnerabilities in generated code. Use when reviewing for security issues, when building auth / file upload / external requests, or before deploy. Reports only HIGH confidence findings — clear vulnerable patterns with attacker-controlled input. OWASP-grounded.

Audit and fix HTML metadata including page titles, meta descriptions, canonical URLs, Open Graph tags, Twitter cards, favicons, JSON-LD structured data, and robots directives. Use when adding SEO metadata, fixing social share previews, reviewing Open Graph tags, setting up canonical URLs, or shipping new pages that need correct meta tags.

High-end agency-tier visual design that feels expensive. Apple-esque / Linear-tier soft UI with premium fonts, heavy whitespace, ultra-diffuse shadows, nested double-bezel cards, squircle radii, and fluid spring-physics motion. For premium consumer, SaaS, and agency sites that need to look like a $150k build.

A library of 10 named color/typography themes that can be applied to any frontend. Use when the user wants their site to feel calm/maritime, warm/sunset, minimal/gray, neon/tech, etc., but hasn't supplied specific colors. Each theme ships with hex values, Tailwind config snippet, and CSS variable block. Adapted from anthropics/skills theme-factory for web targets.

Build a task / todo / checklist app with add, edit, complete, delete, and persistent local storage. Use when the user asks for a todo app, task tracker, checklist, or simple list-based CRUD UI as a learning project or demo. Works in any scaffold; default to scaffold-react for a snappy SPA feel.

Core Web Vitals thresholds (LCP, INP, CLS, TTFB, FCP, TBT) and the bundle / network / render-path patterns that move them. Use when reviewing or optimizing page load speed, Lighthouse scores, slow pages, jank, or site performance. Pairs with react-perf-kit when the target is React/Next.