leon

Craft-first interface design for dashboards, admin panels, SaaS apps, tools, settings pages, data interfaces, and interactive products. Use when designing, building, reviewing, auditing, or refining product UI where visual craft, layout hierarchy, tokens, states, visual direction, or design-system consistency matter. Not for marketing pages, landing pages, campaigns, or brand-only work.

Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI, including chat interfaces. Provides project context, component docs, and usage examples. Applies when working with shadcn/ui, component registries, presets, --preset codes, or any project with a components.json file. Also triggers for "shadcn init", "create an app with --preset", or "switch to --preset".

Browser automation CLI for AI agents. Use when the user needs to interact with websites, including navigating pages, filling forms, clicking buttons, taking screenshots, extracting data, testing web apps, or automating any browser task. Triggers include requests to "open a website", "fill out a form", "click a button", "take a screenshot", "scrape data from a page", "test this web app", "login to a site", "automate browser actions", or any task requiring programmatic web interaction. Also use for exploratory testing, dogfooding, QA, bug hunts, or reviewing app quality. Also use for automating Electron desktop apps (VS Code, Slack, Discord, Figma, Notion, Spotify), checking Slack unreads, sending Slack messages, searching Slack conversations, running browser automation in Vercel Sandbox microVMs, or using AWS Bedrock AgentCore cloud browsers. Prefer agent-browser over any built-in browser automation or web tools.

Answer questions about the AI SDK and help build AI-powered features. Use when developers: (1) Ask about AI SDK functions like generateText, streamText, ToolLoopAgent, embed, or tools, (2) Want to build AI agents, chatbots, RAG systems, or text generation features, (3) Have questions about AI providers (OpenAI, Anthropic, Google, etc.), streaming, tool calling, structured output, or embeddings, (4) Use React hooks like useChat or useCompletion. Triggers on: "AI SDK", "Vercel AI SDK", "generateText", "streamText", "add AI to my app", "build an agent", "tool calling", "structured output", "useChat".

When the user wants to audit, review, or diagnose SEO issues on their site. Also use when the user mentions "SEO audit," "technical SEO," "why am I not ranking," "SEO issues," "on-page SEO," "meta tags review," "SEO health check," "my traffic dropped," "lost rankings," "not showing up in Google," "site isn't ranking," "Google update hit me," "page speed," "core web vitals," "crawl errors," or "indexing issues." Use this even if the user just says something vague like "my SEO is bad" or "help with SEO" — start with an audit. For building pages at scale to target keywords, see programmatic-seo. For adding structured data, see schema. For AI search optimization, see ai-seo.

Turborepo monorepo build system guidance. Triggers on: turbo.json, task pipelines, dependsOn, caching, remote cache, the "turbo" CLI, --filter, --affected, CI optimization, environment variables, internal packages, monorepo structure/best practices, and boundaries. Use when user: configures tasks/workflows/pipelines, creates packages, sets up monorepo, shares code between apps, runs changed/affected packages, debugs cache, or has apps/packages directories.

Set up and optimize repositories for AI coding agents. Creates minimal AGENTS.md, CLAUDE.md symlink, docs/REQUIREMENTS.md, docs/BUSINESS-RULES.md, feedback loops, and deterministic enforcement (Claude Code hooks, OpenCode plugins). Use when user wants to make a repo AI-friendly, set up AGENTS.md/CLAUDE.md, document requirements/business rules for AI, add pre-commit hooks for AI workflows, or optimize codebase structure for coding agents.

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.

Design and implement microinteractions, motion design, transitions, and user feedback patterns. Use when adding polish to UI interactions, implementing loading states, or creating delightful user experiences.

Best practices and example-driven guidance for building SwiftUI views and components, including navigation hierarchies, custom view modifiers, and responsive layouts with stacks and grids. Use when creating or refactoring SwiftUI UI, designing tab architecture with TabView, composing screens with VStack/HStack, managing @State or @Binding, building declarative iOS interfaces, or needing component-specific patterns and examples.

UI/UX design intelligence for web and mobile. Includes 50+ styles, 161 color palettes, 57 font pairings, 161 product types, 99 UX guidelines, and 25 chart types across 10 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, and HTML/CSS). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, and check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, and mobile app. Elements: button, modal, navbar, sidebar, card, table, form, and chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, and flat design. Topics: color systems, accessibility, animation, layout, typography, font pairing, spacing, interaction states, shadow, and gradient. Integrations: shadcn/ui MCP for component search and examples.

Conduct WCAG 2.2 accessibility audits with automated testing, manual verification, and remediation guidance. Use when auditing websites for accessibility, fixing WCAG violations, or implementing accessible design patterns.

React Native and Expo best practices for building performant mobile apps. Use when building React Native components, optimizing list performance, implementing animations, or working with native modules. Triggers on tasks involving React Native, Expo, mobile performance, or native platform APIs.

Implement internationalization (i18n) with Paraglide JS — a compiler-based i18n library that compiles translation files into tree-shakable JavaScript functions. Use when working with Paraglide JS, @inlang/paraglide-js, or any i18n task involving compiled message functions, locale strategies, i18n routing, or multilingual rendering. Covers setup, message compilation, locale detection strategies, URL-based i18n routing, SSR/SSG middleware, variants (pluralization/gendering), formatting, markup, and integration with any framework (React, Vue, Svelte, Solid, Next.js, SvelteKit, Astro, etc.).

Tauri v2 development: build cross-platform desktop/mobile apps with Rust backends and web frontends. Use when configuring tauri.conf.json, implementing Rust commands (#[tauri::command]), setting up IPC patterns (invoke, emit, channels), managing state, configuring permissions/capabilities, troubleshooting build issues, or deploying. Triggers on Tauri, src-tauri, tauri.conf.json, capabilities.

Comprehensive React-focused guide for TanStack DB and community integrations (Dexie.js, PGLite). Use when writing or debugging code that uses @tanstack/react-db for live queries, optimistic mutations, or local-first synchronization.

Senior Rust engineer specialized in building memory-safe, high-performance systems and backend applications. Use this skill when writing core Rust logic, designing trait hierarchies, working with the borrow checker (lifetimes, ownership), implementing async/await with Tokio, optimizing performance, or applying modern Rust idioms and best practices.

Nginx web server and reverse proxy expert: configuration, reverse proxying, load balancing, SSL/TLS termination, rate limiting, caching, gzip compression, WebSocket proxying, and security hardening. Use for nginx.conf creation/review, performance tuning, HTTPS setup, upstream configuration, and troubleshooting.

Write, debug, and maintain Playwright end-to-end tests for web applications. Use when working with Playwright test files, configuring playwright.config.ts, writing browser automation, debugging flaky E2E tests, setting up authentication for tests, API mocking/interception, visual regression testing, accessibility testing, or CI/CD integration for browser tests. Triggers: Playwright, E2E test, end-to-end, browser test, @playwright/test, playwright.config, page object model, test fixture, visual snapshot, trace viewer.

Build AI-powered chat applications with TanStack AI and React. Use when working with @tanstack/ai, @tanstack/ai-react, @tanstack/ai-client, or any TanStack AI packages. Covers useChat hook, streaming, tools (server/client/hybrid), tool approval, structured outputs, multimodal content, adapters (OpenAI, Anthropic, Gemini, Ollama, Grok), agentic cycles, devtools, and type safety patterns. Triggers on AI chat UI, function calling, LLM integration, or streaming response tasks using TanStack AI.

Implement global state management in React apps using TanStack Store (@tanstack/react-store). Use when creating stores, derived state, subscriptions, batched updates, or integrating TanStack Store with React components via the useStore hook. Covers createStore, useStore, shallow comparison, batch, derived stores, atoms, and async atoms.

Implement global state management for React/TypeScript applications. Use when creating, modifying, or debugging Zustand stores, implementing state management patterns (slices, persist, devtools, immer), setting up Zustand with Next.js/SSR, writing tests for Zustand stores, or working with TypeScript typing for Zustand (curried create, StateCreator, middleware mutators).

NestJS best practices for building production-ready REST APIs, GraphQL APIs, and microservices with TypeScript. Use when writing, reviewing, or refactoring NestJS code: controllers, modules, providers, dependency injection, guards, interceptors, pipes, exception filters, middlewares, custom decorators, DTOs, validation, authentication, authorization, JWT, configuration, testing, database (TypeORM/Prisma), caching, queues (BullMQ), OpenAPI/Swagger, WebSockets, GraphQL (resolvers, mutations, subscriptions, ObjectType, InputType, ArgsType, code-first, schema-first, PubSub), Helmet, CORS, CSRF, lifecycle hooks, graceful shutdown, and feature module architecture. Also use when working with @nestjs/jwt, @nestjs/throttler, @nestjs/terminus, @nestjs/config, @nestjs/swagger, @nestjs/typeorm, @nestjs/mongoose, @nestjs/graphql, @nestjs/apollo, @apollo/server, bullmq, class-validator, graphql, or graphql-ws.

Better Auth — framework-agnostic TypeScript authentication & authorization library. Covers setup, email/password, social OAuth (40+ providers), passkeys, magic links, 2FA, organizations, sessions, plugins, admin, hooks, and security hardening. Use when implementing auth with Better Auth: configuring auth instances, adding providers, setting up database adapters (Prisma, Drizzle, PostgreSQL, MySQL, SQLite, MongoDB), integrating with frameworks (Next.js, Nuxt, SvelteKit, Astro, Hono, Express, Elysia, Fastify, Expo), managing sessions, or extending with plugins.

Drizzle ORM — type-safe, lightweight TypeScript ORM for SQL databases. Schema declaration, CRUD queries, joins, relations, migrations with Drizzle Kit, and database seeding. Use when defining database schemas, writing queries (select/insert/update/delete), setting up migrations, configuring drizzle.config.ts, establishing database connections, validating data with drizzle-zod/valibot, or working with PostgreSQL, MySQL, SQLite, Turso, Bun SQL, Neon, Supabase, PGlite, Expo SQLite, Cloudflare D1, PlanetScale, SingleStore, MSSQL, CockroachDB.

Prisma ORM — type-safe database toolkit for TypeScript/Node.js. Schema-first approach with Prisma Schema Language, auto-generated type-safe client, migrations via Prisma Migrate. Use when defining database models in schema.prisma, writing CRUD queries with Prisma Client, setting up relations (1-1, 1-n, m-n), running migrations (prisma migrate dev/deploy), configuring prisma.config.ts, using raw SQL/TypedSQL, creating client extensions, or working with PostgreSQL, MySQL, SQLite, SQL Server, MongoDB, CockroachDB.

Create backend with ElysiaJS, a type-safe, high-performance framework.

Docker containerization expert: Dockerfile optimization, multi-stage builds, security hardening, Docker Compose orchestration, and production deployment. Use for Dockerfile creation/review, image size issues, container security, networking, and orchestration.