Frameworks

Best JavaScript Agent Skills

375 JavaScript skills for AI coding assistants — ranked by popularity.

This collection provides specific instructions for AI agents—like Claude Code, Codex, and Cursor—to execute common JavaScript development tasks. These skill files act as specialized protocols, ensuring your agent follows framework-specific best practices when modifying your codebase. If you are building a dashboard with Chart.js, managing complex state in Zustand, or running unit tests with Vitest, these instructions keep the AI focused on your project's specific requirements. Instead of generic coding advice, you get actionable guidance for handling tasks like Turborepo monorepo configurations, Three.js 3D implementation, or structured TypeScript code reviews. This library is designed for developers who want to reduce AI hallucination and improve the quality of automated code changes. By providing these curated context files, you bridge the gap between a general-purpose AI and a specialized assistant that understands the nuance of your JavaScript stack. Each skill is formatted to be dropped directly into your development workflow for immediate use.

Top JavaScript skills

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

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

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

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

threejs-skills

sickn33

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

61152

dashboard-creator

mhattingpete

Create HTML dashboards with KPI metric cards, bar/pie/line charts, progress indicators, and data visualizations. Use when users request dashboards, metrics displays, KPI visualizations, data charts, or monitoring interfaces.

31157

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

react-modernization

wshobson

Upgrade React applications to latest versions, migrate from class components to hooks, and adopt concurrent features. Use when modernizing React codebases, migrating to React Hooks, or upgrading to latest React versions.

21134

typescript-write

metabase

Write TypeScript and JavaScript code following Metabase coding standards and best practices. Use when developing or refactoring TypeScript/JavaScript code.

30114

3d-graphics

samhvw8

3D web graphics with Three.js (WebGL/WebGPU). Capabilities: scenes, cameras, geometries, materials, lights, animations, model loading (GLTF/FBX), PBR materials, shadows, post-processing (bloom, SSAO, SSR), custom shaders, instancing, LOD, physics, VR/XR. Actions: create, build, animate, render 3D scenes/models. Keywords: Three.js, WebGL, WebGPU, 3D graphics, scene, camera, geometry, material, light, animation, GLTF, FBX, OrbitControls, PBR, shadow mapping, post-processing, bloom, SSAO, shader, instancing, LOD, WebXR, VR, AR, product configurator, data visualization, architectural walkthrough, interactive 3D, canvas. Use when: creating 3D visualizations, building WebGL/WebGPU apps, loading 3D models, adding animations, implementing VR/XR, creating interactive graphics, building product configurators.

33104

miniprogram-development

TencentCloudBase

WeChat Mini Program development rules. Use this skill when developing WeChat mini programs, integrating CloudBase capabilities, and deploying mini program projects.

3792

n8n-code-javascript

czlonkowski

Write JavaScript code in n8n Code nodes. Use when writing JavaScript in n8n, using $input/$json/$node syntax, making HTTP requests with $helpers, working with dates using DateTime, troubleshooting Code node errors, or choosing between Code node modes.

7122

reviewing-nextjs-16-patterns

djankies

Review code for Next.js 16 compliance - security patterns, caching, breaking changes. Use when reviewing Next.js code, preparing for migration, or auditing for violations.

11106

d3-visualization

lyndonkl

Use when creating custom, interactive data visualizations with D3.js—building bar/line/scatter charts from scratch, creating network diagrams or geographic maps, binding changing data to visual elements, adding zoom/pan/brush interactions, animating chart transitions, or when chart libraries (Highcharts, Chart.js) don't support your specific visualization design and you need low-level control over data-driven DOM manipulation, scales, shapes, and layouts.

7107

react

lobehub

React component development guide. Use when working with React components (.tsx files), creating UI, using @lobehub/ui components, implementing routing, or building frontend features. Triggers on React component creation, modification, layout implementation, or navigation tasks.

3480

shopify-development

davila7

Build Shopify apps, extensions, themes using GraphQL Admin API, Shopify CLI, Polaris UI, and Liquid. TRIGGER: "shopify", "shopify app", "checkout extension", "admin extension", "POS extension", "shopify theme", "liquid template", "polaris", "shopify graphql", "shopify webhook", "shopify billing", "app subscription", "metafields", "shopify functions"

1299

clojure-write

metabase

Guide Clojure and ClojureScript development using REPL-driven workflow, coding conventions, and best practices. Use when writing, developing, or refactoring Clojure/ClojureScript code.

1690

3d-web-experience

davila7

Expert in building 3D experiences for the web - Three.js, React Three Fiber, Spline, WebGL, and interactive 3D scenes. Covers product configurators, 3D portfolios, immersive websites, and bringing depth to web experiences. Use when: 3D website, three.js, WebGL, react three fiber, 3D experience.

3570

algorithmic-art

anthropics

Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.

1095

browser-tools

Whamp

Lightweight Chrome automation toolkit with shared configuration, JSON-first output, and six focused scripts for starting, navigating, inspecting, capturing, evaluating, and cleaning up browser sessions.

694

paypal-integration

wshobson

Integrate PayPal payment processing with support for express checkout, subscriptions, and refund management. Use when implementing PayPal payments, processing online transactions, or building e-commerce checkout flows.

1090

accessibility-auditor

davila7

Web accessibility specialist for WCAG compliance, ARIA implementation, and inclusive design. Use when auditing websites for accessibility issues, implementing WCAG 2.1 AA/AAA standards, testing with screen readers, or ensuring ADA compliance. Expert in semantic HTML, keyboard navigation, and assistive technology compatibility.

2474

How to choose a JavaScript skill

Evaluate a skill based on the specific directory or file types it targets in your project. Check the trigger criteria, such as the presence of a turbo.json or a specific file path, to ensure it activates only when necessary. Look for skills that offer narrow, task-oriented instructions rather than broad ones, as these produce more predictable output. Verify that the maintenance approach—such as a dependency upgrade or a coding standard review—aligns with your team's existing workflow and project constraints.

More JavaScript skills

3d-building-mechanics
Bbeierle12 · 7 installs
validate-typescript
BerryKuipers · 5 installs
fix-dependabot-alerts
microsoft · 18 installs
ts-testing
johnlindquist · 6 installs
markdown-to-html
github · 16 installs
nuxt
antfu · 19 installs
vue-best-practices
antfu · 19 installs
react-best-practices
redpanda-data · 22 installs
web-games
davila7 · 11 installs
frontend-testing
langgenius · 11 installs
seo-review
leonardomso · 9 installs
fact-check
leonardomso · 7 installs
schema-markup
davila7 · 10 installs
agent-trading-predictor
ruvnet · 9 installs
coding-standards
affaan-m · 7 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
resource-curator
leonardomso · 5 installs
flow
facebook · 7 installs
vite
antfu · 7 installs
obsidian-data-handling
jeremylongshore · 4 installs
openrouter-hello-world
jeremylongshore · 7 installs
react-state-management
wshobson · 4 installs
security-audit
ruvnet · 3 installs
antfu
antfu · 6 installs
browser-extension-developer
yamadashy · 4 installs
obsidian-observability
jeremylongshore · 5 installs
tdd-workflow
affaan-m · 6 installs
typescript-expert
davila7 · 10 installs
vue-testing-best-practices
vuejs-ai · 5 installs
javascript-mastery
davila7 · 7 installs
obsidian-rate-limits
jeremylongshore · 5 installs
test
facebook · 7 installs
playwright-pro
alirezarezvani · 8 installs
react-component-patterns
HoangNguyen0403 · 3 installs
vscode-ext-localization
github · 5 installs
vue-debug-guides
vuejs-ai · 4 installs
playwright-mcp-dev
microsoft · 5 installs
senior-qa
alirezarezvani · 6 installs
telegram-dev
2025Emma · 2 installs
threejs-shaders
CloudAI-X · 4 installs
upgrading-expo
sickn33 · 3 installs
writing-playwright-tests
open-metadata · 5 installs
yjs
EpicenterHQ · 2 installs
zustand-5
prowler-cloud · 8 installs
better-auth
mrgoonie · 5 installs
d3js-visualization
benchflow-ai · 7 installs
ast-grep-find
parcadei · 3 installs
bun-development
davila7 · 4 installs
auth-patterns
davepoon · 7 installs
tech-debt-analyzer
ailabs-393 · 5 installs
javascript-testing-patterns
wshobson · 3 installs
d3-viz
davila7 · 3 installs
pnpm
antfu · 4 installs
1k-state-management
OneKeyHQ · 4 installs
chroma
davila7 · 2 installs
expo-tailwind-setup
expo · 3 installs
react-useeffect
jarrodwatts · 7 installs
gsap
martinholovsky · 3 installs
vue-router-best-practices
antfu · 3 installs
vueuse
onmax · 4 installs
website-preview
missing-semester · 3 installs
woocommerce-email-editor
woocommerce · 3 installs
3d-camera-interaction
Project-N-E-K-O · 3 installs
agent-benchmark-suite
ruvnet · 3 installs
playwright-expert
Jeffallan · 7 installs
testing-patterns
davila7 · 3 installs
agent-coder
ruvnet · 3 installs
unit-testing-test-generate
sickn33 · 2 installs
agentation
benjitaylor · 6 installs
nx-workspace
nrwl · 4 installs
build-free-types
paulirish · 9 installs
javascript-pro
sickn33 · 8 installs
concept-workflow
leonardomso · 6 installs
functional
citypaul · 3 installs
pnpm-upgrade
openai · 2 installs
threejs-animation
CloudAI-X · 5 installs
antv-l7
antvis · 2 installs
frontend-vue-development
TencentBlueKing · 3 installs
reka-ui
onmax · 3 installs
stitch-loop
google-labs-code · 2 installs
svelte-migrate
temporalio · 2 installs
shopify-apps
alinaqi · 1 installs
code-standards
redpanda-data · 2 installs
error-handling
EpicenterHQ · 2 installs
naming-analyzer
davila7 · 2 installs
security-scanning-security-sast
sickn33 · 2 installs
cloudbase-document-database-web-sdk
TencentCloudBase · 1 installs

+255 more — browse all skills.

Frequently asked

How do I know if an AI skill is compatible with my project?
Review the trigger conditions defined in the skill file. Most skills target specific patterns, such as file paths like src/store/** or configuration files like turbo.json. If your project uses the frameworks or tools mentioned in these definitions, the skill will function as intended. Always test the agent's output in a isolated branch before applying changes to your main codebase.
Can I combine multiple skills for one project?
Yes, you can include multiple skill files depending on your project's needs. For example, a repository using Turborepo might benefit from both the Turborepo skill for pipeline management and the Vitest skill for testing individual packages. Ensure there is no overlap in instructions between the skills you select to avoid conflicting commands or agent confusion during complex tasks.

Skills for other frameworks

Search skills

Search the agent skills registry