Frameworks

Best TypeScript Agent Skills

997 TypeScript skills for AI coding assistants — ranked by popularity.

This collection provides curated skill sets for AI agents like Claude Code, Codex, and Cursor, specifically tailored for the TypeScript ecosystem. Each skill consists of specific instructions, patterns, and context designed to help agents write better code in tools like Next.js, Drizzle ORM, and Payload CMS. These files function as specialized knowledge bases, ensuring your agent understands the nuances of modern state management with Zustand, UI implementation with shadcn/ui, or infrastructure integration using Supabase and the Model Context Protocol. Whether you are scaffolding a new database schema, debugging server components, or configuring authentication, these skills provide the baseline necessary for an AI to act as a senior developer. This resource is for TypeScript developers who want to reduce hallucinations and improve output consistency across their codebase. By integrating these specific skill definitions, your agent gains the technical context required to execute complex tasks in your repository.

Top TypeScript skills

drizzle

lobehub

Drizzle ORM schema and database guide. Use when working with database schemas (src/database/schemas/*), defining tables, creating migrations, or database model code. Triggers on Drizzle schema definition, database migrations, or ORM usage questions.

238873

nextjs-developer

zenobi-us

Expert Next.js developer mastering Next.js 14+ with App Router and full-stack features. Specializes in server components, server actions, performance optimization, and production deployment with focus on building fast, SEO-friendly applications.

328531

zustand

lobehub

Zustand state management guide. Use when working with store code (src/store/**), implementing actions, managing state, or creating slices. Triggers on Zustand store development, state management questions, or action implementation.

113434

mcp-builder

anthropics

Guide for creating high-quality MCP (Model Context Protocol) servers that enable LLMs to interact with external services through well-designed tools. Use when building MCP servers to integrate external APIs or services, whether in Python (FastMCP) or Node/TypeScript (MCP SDK).

136215

ui-ux-expert-skill

fercracix33

Technical workflow for implementing accessible React user interfaces with shadcn/ui, Tailwind CSS, and TanStack Query. Includes 6-phase process with mandatory Style Guide compliance, Context7 best practices consultation, Chrome DevTools validation, and WCAG 2.1 AA accessibility standards. Use after Test Agent, Implementer, and Supabase agents complete their work.

91244

supabase-developer

daffy0208

Build full-stack applications with Supabase (PostgreSQL, Auth, Storage, Real-time, Edge Functions). Use when implementing authentication, database design with RLS, file storage, real-time features, or serverless functions.

95185

payload

payloadcms

Use when working with Payload CMS projects (payload.config.ts, collections, fields, hooks, access control, Payload API). Use when debugging validation errors, security issues, relationship queries, transactions, or hook behavior.

73206

dependency-upgrade

wshobson

Manage major dependency version upgrades with compatibility analysis, staged rollout, and comprehensive testing. Use when upgrading framework versions, updating major dependencies, or managing breaking changes in libraries.

26240

motion-canvas

davila7

Complete production-ready guide for Motion Canvas with ESM/CommonJS workarounds, full setup templates, and troubleshooting for programmatic video creation using TypeScript

58202

turborepo

vercel

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.

61191

scroll-experience

davila7

Expert in building immersive scroll-driven experiences - parallax storytelling, scroll animations, interactive narratives, and cinematic web experiences. Like NY Times interactives, Apple product pages, and award-winning web experiences. Makes websites feel like experiences, not just pages. Use when: scroll animation, parallax, scroll storytelling, interactive story, cinematic website.

101142

shadcn-ui-setup

maneeshanif

Install and configure Shadcn/ui component library with Radix UI primitives, Aceternity UI effects, set up components, and manage the component registry. Use when adding Shadcn/ui to a Next.js project or installing specific UI components for Phase 2.

37194

angular

sickn33

Modern Angular (v20+) expert with deep knowledge of Signals, Standalone Components, Zoneless applications, SSR/Hydration, and reactive patterns. Use PROACTIVELY for Angular development, component architecture, state management, performance optimization, and migration to modern patterns.

100129

telegram-mini-app

davila7

Expert in building Telegram Mini Apps (TWA) - web apps that run inside Telegram with native-like experience. Covers the TON ecosystem, Telegram Web App API, payments, user authentication, and building viral mini apps that monetize. Use when: telegram mini app, TWA, telegram web app, TON app, mini app.

62163

vitest

antfu

Vitest fast unit testing framework powered by Vite with Jest-compatible API. Use when writing tests, mocking, configuring coverage, or working with test filtering and fixtures.

41183

typescript-review

metabase

Review TypeScript and JavaScript code changes for compliance with Metabase coding standards, style violations, and code quality issues. Use when reviewing pull requests or diffs containing TypeScript/JavaScript code.

39178

stripe-integration

wshobson

Implement Stripe payment processing for robust, PCI-compliant payment flows including checkout, subscriptions, and webhooks. Use when integrating Stripe payments, building subscription systems, or implementing secure checkout flows.

48165

threejs-skills

sickn33

Three.js skills for creating 3D elements and interactive experiences

61152

web-artifacts-builder

anthropics

Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.

49162

chrome-devtools

mrgoonie

Browser automation, debugging, and performance analysis using Puppeteer CLI scripts. Use for automating browsers, taking screenshots, analyzing performance, monitoring network traffic, web scraping, form automation, and JavaScript debugging.

41157

flutter-expert

sickn33

Master Flutter development with Dart 3, advanced widgets, and multi-platform deployment. Handles state management, animations, testing, and performance optimization for mobile, web, desktop, and embedded platforms. Use PROACTIVELY for Flutter architecture, UI implementation, or cross-platform features.

73125

deepwiki-rs

sopaco

AI-powered Rust documentation generation engine for comprehensive codebase analysis, C4 architecture diagrams, and automated technical documentation. Use when Claude needs to analyze source code, understand software architecture, generate technical specs, or create professional documentation from any programming language.

25170

accessibility-compliance

wshobson

Implement WCAG 2.2 compliant interfaces with mobile accessibility, inclusive design patterns, and assistive technology support. Use when auditing accessibility, implementing ARIA patterns, building for screen readers, or ensuring inclusive user experiences.

45132

playwright-browser-automation

lackeyjb

Complete browser automation with Playwright. Auto-detects dev servers, writes clean test scripts to /tmp. Test pages, fill forms, take screenshots, check responsive design, validate UX, test login flows, check links, automate any browser task. Use when user wants to test websites, automate browser interactions, validate web functionality, or perform any browser-based testing.

29146

How to choose a TypeScript skill

Evaluate each skill based on your current project stack and the specific problem you need to solve. Check the scope of the skill to ensure it aligns with your directory structure, such as checking if it targets 'src/store' or 'src/database'. Look at the specific patterns it enforces, like App Router conventions for Next.js or React UI workflows. Prioritize skills that match your primary libraries, and verify that the maintenance status meets your project's requirement for up-to-date documentation and best practices.

More TypeScript skills

langchain
zechenzhangAGI · 26 installs
react-native-architecture
wshobson · 55 installs
radix-ui-design-system
sickn33 · 33 installs
obsidian
gapmiss · 29 installs
svelte-ui-design
XIYO · 23 installs
react-modernization
wshobson · 21 installs
landing-page-guide-v2
bear2u · 48 installs
figma-integration
duongdev · 23 installs
nodejs-best-practices
davila7 · 28 installs
typescript-write
metabase · 30 installs
3d-graphics
samhvw8 · 33 installs
supabase-mcp-integration
manutej · 13 installs
frontend-dev-guidelines
diet103 · 25 installs
codex-skill
feiskyer · 12 installs
bullmq-specialist
davila7 · 25 installs
react-native-design
wshobson · 33 installs
reviewing-nextjs-16-patterns
djankies · 11 installs
d3-visualization
lyndonkl · 7 installs
react
lobehub · 34 installs
angular-best-practices
sickn33 · 21 installs
shopify-development
davila7 · 12 installs
typescript-advanced-types
wshobson · 15 installs
backend-dev-guidelines
langfuse · 10 installs
nextjs15-init
bear2u · 8 installs
frontend-developer
sickn33 · 27 installs
typescript
lobehub · 28 installs
swapper-integration
shapeshift · 6 installs
browser-tools
Whamp · 6 installs
testing-workflow
amo-tech-ai · 16 installs
nestjs-expert
davila7 · 37 installs
nextjs-best-practices
davila7 · 31 installs
nuxthub-migration
onmax · 5 installs
nx-workspace-patterns
wshobson · 5 installs
validate-typescript
BerryKuipers · 5 installs
writing-registry-meta
siriwatknp · 5 installs
fix-dependabot-alerts
microsoft · 18 installs
ts-testing
johnlindquist · 6 installs
tanstack-form
exceptionless · 16 installs
frontend-code-review
langgenius · 11 installs
frontend-prompt-generator
gharam1234 · 6 installs
figma-implement-design
openai · 24 installs
markdown-to-html
github · 16 installs
run-nx-generator
nrwl · 5 installs
add-setting-env
lobehub · 4 installs
better-auth-best-practices
novuhq · 18 installs
zod-4
prowler-cloud · 12 installs
nextjs-supabase-auth
davila7 · 12 installs
copilot-sdk
github · 7 installs
nuxt
antfu · 19 installs
vue-best-practices
antfu · 19 installs
monorepo-management
wshobson · 9 installs
react-best-practices
redpanda-data · 22 installs
web-games
davila7 · 11 installs
frontend-testing
langgenius · 11 installs
project-overview
lobehub · 15 installs
ai-sdk
vercel · 11 installs
rendering-animate-svg
TheOrcDev · 13 installs
senior-frontend
davila7 · 15 installs
nodejs-backend-patterns
wshobson · 12 installs
frontend-patterns
affaan-m · 11 installs
react-patterns
davila7 · 9 installs
flutter
alinaqi · 13 installs
fact-check
leonardomso · 7 installs
schema-markup
davila7 · 10 installs
coding-standards
affaan-m · 7 installs
effect-ts-expert
ojowwalker77 · 7 installs
desktop
lobehub · 9 installs
langfuse
davila7 · 7 installs
nextjs-app-router-patterns
wshobson · 3 installs
write-unit-tests
tldraw · 5 installs
anthropic-frontend-design
chaibuilder · 12 installs
pwa-development
alinaqi · 9 installs
feature-flags
facebook · 6 installs
tanstack-query
exceptionless · 7 installs
obsidian-performance-tuning
jeremylongshore · 6 installs
prisma-expert
davila7 · 12 installs
fix
facebook · 5 installs
typescript-code-review
anyproto · 13 installs
browser-extension-builder
davila7 · 6 installs
backend-patterns
affaan-m · 7 installs
vite
antfu · 7 installs
develop-ai-functions-example
vercel · 5 installs
obsidian-data-handling
jeremylongshore · 4 installs
chatgpt-app-builder
mcp-use · 5 installs
heroui-native
heroui-inc · 5 installs
openrouter-hello-world
jeremylongshore · 7 installs
react-state-management
wshobson · 4 installs
security-audit
ruvnet · 3 installs
turborepo-caching
wshobson · 5 installs
antfu
antfu · 6 installs
browser-extension-developer
yamadashy · 4 installs
obsidian-observability
jeremylongshore · 5 installs
react-dev
davila7 · 7 installs
security-best-practices
openai · 7 installs
survey-sdk-audit
PostHog · 3 installs
tdd-workflow
affaan-m · 6 installs

+877 more — browse all skills.

Frequently asked

Can I use multiple skills for a single project?
Yes. You should stack skills based on your project architecture. For example, a project using Next.js and Drizzle ORM performs best when you provide the agent with both the 'nextjs-developer' and 'drizzle' skills. This allows the AI to reference the correct patterns for both the frontend components and the database layer simultaneously.
How do these skills differ from general AI prompts?
General prompts often lack specific file paths and library-level constraints. These skill files are structured to provide explicit guidance on folder structures, such as targeting 'src/database/schemas', and enforce library-specific syntax like Payload CMS hooks or Zustand slice patterns. They turn generic coding agents into project-aware team members that respect your specific development standards.

Skills for other frameworks

Search skills

Search the agent skills registry