Development skills

Add simple scroll-triggered reveals to web pages with AOS, a CSS-driven animation library. Configure fade, slide, zoom, and flip effects through HTML data attributes, and refresh detection when content changes in React, Vue, or other frameworks.

• Adding fade-ins to a marketing page
• Revealing blog sections as readers scroll
• Staggering feature cards with delays

Build interactive 2D graphics and games with PixiJS, using sprites, sprite sheet animation, vector drawing, particles, and visual filters. It also covers React integration and placing a 2D interface over a Three.js scene.

• Building an interactive 2D game canvas
• Animating sprites from a sprite sheet
• Rendering large particle effects

Create interactive animations for React and JavaScript interfaces with Motion, formerly Framer Motion. Build hover, tap, and drag responses, animate layout changes and page exits, and coordinate scroll effects or multi-step sequences with reusable states and spring transitions.

• Animate button hover and tap responses
• Add exit animations to menus or modals
• Create page transitions in a React app

Build smooth scrolling pages with Locomotive Scroll. Add parallax motion, detect when elements enter the viewport, create sticky or horizontal layouts, and connect scroll events to GSAP ScrollTrigger animations.

• Adding smooth scrolling to a landing page
• Creating depth with parallax elements
• Starting animations when sections appear

Render designer-made Lottie animations in web and React applications using JSON or compressed dotLottie files. Control playback, connect animations to scrolling or pointer interactions, and integrate them with other animation tools for icons, loading indicators, onboarding, and marketing content.

• Add an animated icon to a web interface
• Control a loading animation in React
• Sync animation playback with page scrolling

Add decorative depth to web pages with Zdog illustrations, Vanta.js animated backgrounds, and Vanilla-Tilt.js parallax cards. The skill provides setup and optimization patterns for landing page visuals and small interactive effects.

• Adding a pseudo-3D illustration to a page
• Creating an animated hero background
• Making cards tilt with pointer or device movement

Use this skill to build web animations with Anime.js across DOM elements, CSS, SVG, and JavaScript objects. It helps compose timed sequences, staggered reveals, keyframes, and SVG drawing or morphing effects in framework-independent projects.

• Sequencing a coordinated set of page animations
• Revealing a list of elements one by one
• Drawing or morphing an SVG path

Create web animations with GSAP and ScrollTrigger, including timelines, scroll-linked motion, pinned sections, and parallax effects. The patterns cover DOM, SVG, Canvas, WebGL, and Three.js, with guidance for React integration and animation cleanup.

• Animating page elements as visitors scroll
• Building pinned or horizontal scroll sections
• Sequencing a multi-step animation timeline

Use this skill to create React animations driven by spring physics, gestures, and momentum. It covers interruptible UI motion, list transitions, scroll effects, velocity preservation, and optional low-level utilities from Popmotion.

• Adding spring motion to a React interface
• Animating items as a list changes
• Making a dragged element keep its momentum

Build interactive 3D scenes and visualizations for the web with Three.js. The skill covers setting up cameras, lights, materials, models, and animations, handling pointer interactions, and improving rendering performance for WebGL or WebGPU applications.

• Build an interactive 3D product configurator
• Display 3D models in a web page
• Add lighting and animation to a 3D scene

Review code changes for quality, security, performance, and maintainability. It helps identify issues by severity, point to relevant lines, recognize strengths, and suggest practical fixes in a structured review.

• Reviewing a code change before merging
• Finding security or input validation issues
• Getting prioritized feedback on code quality

Use this skill to explore a new repository or understand how a project is organized. It runs a visualization script that creates an interactive tree view of the codebase in an HTML file and opens that file in the default browser.

• Exploring an unfamiliar repository
• Viewing project folders as a tree
• Understanding codebase structure

Use this skill to find API route definitions in Express.js source files. It produces a structured route manifest with each route’s HTTP method, path, file, and line number, and adds details about applied middleware and whether the route uses a standard or chained form.

• Listing all Express.js API routes
• Preparing route data for documentation
• Checking middleware attached to routes

Use this skill to apply consistent API conventions when designing, writing, or reviewing endpoints. It outlines resource URL naming, response and error formats, HTTP status codes, Bearer token requirements, and versioning rules so API decisions follow the project’s standards.

• Designing URL paths for a new API
• Reviewing endpoint response formats
• Checking API authentication requirements

Use practical React guidance for component responsibilities, state placement, composition, custom Hook naming, Context, and performance topics. Load the relevant chapter for a specific question, and use the examples to shape clearer component structure without optimizing too early.

• Choose where component state should live
• Review custom Hook names and component structure
• Explore Context or performance guidance

Analyze a directory for code health concerns, including file organization, error handling, basic security risks, duplication, unused imports, and dependency issues. Return a structured report with severity levels, file locations, an overall score, and actionable recommendations.

• Review a directory for code quality issues
• Find basic security and error handling concerns
• Get a prioritized code health report

Scaffold REST API endpoint code and documentation from specifications or existing source. It can identify routes, describe their methods, parameters, schemas, and authentication, and produce Markdown references or OpenAPI 3.0 specifications with scripts for route detection and validation.

• Scaffolding a REST API from a specification
• Generating route handler code for new endpoints
• Creating API documentation and an OpenAPI 3.0 spec

Turn route definitions and handlers into API reference documentation. The skill extracts methods, paths, parameters, request and response shapes, and authentication requirements, then creates Markdown endpoint pages and an index or an OpenAPI 3.0 specification on request.

• Documenting API routes for a README or docs site
• Creating an endpoint index from source code
• Generating an OpenAPI 3.0 specification

Make a vague task measurable by turning it into checks a program can pass or fail. The skill writes a short goal-test script and can add a bounded retry loop for a headless agent, so users can tell when work is done and limit repeated attempts.

• Defining checkable completion criteria for a vague task
• Creating a script to decide when an agent task is done
• Running a headless agent with a limited retry budget

Understand what a codebase does and why it is structured that way. The skill explains key components, patterns, alternatives, and trade-offs at a requested level, then saves a learning guide or architectural audit as Markdown.

• Understanding code generated by an AI agent
• Learning an unfamiliar legacy module
• Reviewing architectural choices and trade-offs

Maintain a local MCP server by reviewing tool modules, adjusting host configuration, and troubleshooting runtime issues. The workflow includes checking dashboard availability and validating changes with type checking and a build, while preserving safeguards for tool actions.

• Updating MCP tool modules
• Changing host configuration
• Troubleshooting MCP runtime issues

Get oriented in a code repository before making changes. The skill reads key project guides, identifies the relevant layer and files, maps supporting references, and selects suitable verification commands to shape an initial implementation plan.

• Understand a repository before starting a change
• Identify the files and project layer relevant to a task
• Choose checks to run before and after implementation

Trace failures in a multi-agent session using Agent Monitor workflow data and events. See where an error began, which agent depths and parents it reached, what tools were involved, and whether a parent aborted after a child failed.

• Tracing the source of a failed multi-agent run
• Seeing which parent agents inherited an error
• Identifying tools involved in session failures

Keep localized content aligned across dashboard text, wiki pages, mirrored guides, language switchers, and locale-aware formatting. Use this workflow when changing user-facing copy, translation keys, guides, wiki content, or adding a supported language, with English as the source for each surface.

• Add or change a dashboard translation key
• Update English guide content across translated guides
• Add a supported language across the product surfaces