Skills your agents can run

TypeScript-first schema validation and type inference. Use it to validate API requests/responses, form data, environment variables, and configuration objects; to define type-safe schemas with runtime validation; to transform data; to generate JSON Schema for OpenAPI/AI; or to diagnose missing validations, type inference mismatches, and validation error-handling issues. Zero dependencies (≈2kb gzipped).

Expert frontend design guidelines for creating beautiful, modern UIs. Use when building landing pages, dashboards, or any user interface.

Implement accessible UI components using semantic HTML elements, keyboard navigation support, sufficient color contrast ratios, alternative text for images, ARIA attributes when needed, logical heading structure, and proper focus management. Use this skill when creating UI components, forms, interactive elements, navigation menus, modals or dialogs, implementing keyboard shortcuts, adding screen reader support, ensuring WCAG compliance, or testing with assistive technologies. This skill applies when working on any frontend component files, HTML templates, Vue components, React components, or any user interface code that needs to be accessible to all users including those with disabilities.

Use when creating or modifying Storybook stories for components. Ensures stories follow CSF3 format, properly showcase component variations, and build successfully.

Create distinctive, production-grade Flutter mobile & web UI with high design quality. Use this skill when the user asks to build Flutter screens, widgets, components, dashboards, or full apps. Generates creative, polished Dart/Flutter code that avoids generic AI aesthetics and follows Flutter/Material/Cupertino best practices.

Expert guidance for Next.js Cache Components and Partial Prerendering (PPR). **PROACTIVE ACTIVATION**: Use this skill automatically when working in Next.js projects that have `cacheComponents: true` in their next.config.ts/next.config.js. When this config is detected, proactively apply Cache Components patterns and best practices to all React Server Component implementations. **DETECTION**: At the start of a session in a Next.js project, check for `cacheComponents: true` in next.config. If enabled, this skill's patterns should guide all component authoring, data fetching, and caching decisions. **USE CASES**: Implementing `use cache` directive, configuring cache lifetimes with cacheLife(), tagging cached data with cacheTag(), invalidating caches with updateTag()/revalidateTag(), optimizing static vs dynamic content boundaries, debugging cache issues, and reviewing Cache Component implementations.

Automate Webflow CMS collections, site publishing, page management, asset uploads, and ecommerce orders via Rube MCP (Composio). Always search tools first for current schemas.

Three.js interaction - raycasting, controls, mouse/touch input, object selection. Use when handling user input, implementing click detection, adding camera controls, or creating interactive 3D experiences.

Design, preview, and generate UI code using Google Stitch (via MCP). Helps developers choose the best UI by generating previews first, allowing iteration, and then exporting code.

Builds high-fidelity, cinematic pixel-perfect landing pages with a strict design system, preset aesthetics (Organic Tech, Midnight Luxe, Brutalist Signal, Vapor Clinic, Island Vital), and fixed component architecture (floating navbar, hero, feature cards, philosophy, protocol stack, pricing, footer). Use when the user asks to build a site, create a landing page, or requests a cinematic one-pager. Agent must ask four questions (brand/purpose, aesthetic preset, value props, CTA) then build the full site from answers.

TanStack Router v1 patterns and best practices for type-safe client-side routing. Trigger when creating routes, navigating between pages, reading URL params or search params, setting up file-based routing, integrating route loaders with TanStack Query, or using Link, useNavigate, useParams, useSearch in React components.

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.

Use when building APIs with the Hono framework on the Bun runtime, including routing, middleware, REST APIs, context handling, or web framework features.

Optimize website and web application performance, including loading speed, Core Web Vitals, bundle size, caching strategies, and runtime performance.

Build and deploy web apps with design system. Use when building, deploying, or updating apps.

Generate content for TRMNL e-ink display devices using the TRMNL CSS framework. Use when the user wants to display information on their TRMNL device, send messages to an e-ink display, create dashboard content, show notifications, or update their terminal display. Supports rich layouts with the TRMNL framework (flexbox, grid, tables, progress bars, typography utilities) and sends content via webhook API.

Clone/replicate websites into production-ready Next.js 16 code using Firecrawl MCP. Use when user asks to: clone website, vibe clone, replicate landing page, copy website design, rebuild this site, recreate this page, clone specific sections (hero, pricing, footer, etc). Triggers: "clone this website", "vibe clone [url]", "replicate this landing page", "rebuild this site in Next.js", "clone the hero section from [url]", "copy this design".

Internationalization guide using react-i18next. Use when adding translations, creating i18n keys, or working with localized text in React components (.tsx files). Triggers on translation tasks, locale management, or i18n implementation.

AI skill for automated design audits. Evaluate interfaces against proven UX principles for visual hierarchy, accessibility, cognitive load, navigation, and more. Based on Making UX Decisions by Tommy Geoco.

Evaluate and improve interface usability using heuristic analysis. Use when the user mentions "usability audit", "UX review", "users are confused", "heuristic evaluation", "form usability", or "navigation problems". Covers Nielsen's 10 heuristics, severity ratings, and information architecture. For visual design fixes, see refactoring-ui. For conversion-focused audits, see cro-methodology.