Coding standards, frameworks, refactoring, and code review (15.5K skills)
Build a floating contact widget as a single HTML file, with a welcome screen, social links, meeting booking link, and offline form. The message field provides an interface that can optionally connect to a backend.
Reproduce an existing website locally by examining source code, collecting assets, and checking browser behavior. Follow paths for static, framework-based, or graphics-heavy sites, then compare the result with the original and replace content as needed.
Build an HTML dashboard for a public GitHub repository, showing stars, forks, contributors, issues, pull requests, and recent activity. Choose a standalone page or source files that support updates and record where the data came from.
Create complex HTML artifacts for claude.ai using React and Tailwind. The skill follows Anthropic’s reference workflow to produce rich web content that can be embedded, supporting artifact development with these tools.
Handle pull request feedback and merge conflicts with focused fixes and validation. Before committing or pushing, run a read-only cross-review, assess its findings against the actual changes, and report checks, decisions, and remaining risks.
Build React or Next.js interfaces with specific rules for typography, color, spacing, and animation. The skill guides responsive layouts, loading and error states, and performance-conscious interactions while preserving the original v1 design behavior.
Guide agents to produce complete code or written deliverables without omitted sections or placeholder comments. It checks the requested item count and defines clear stopping points and resume instructions when a response reaches its length limit.
Build 3D elements and interactive browser experiences with Three.js. The skill covers scene setup, materials that define surface appearance, user controls, and post-processing, which adds visual effects after rendering. The full workflow requires the upstream skill bundle.
Build interface components with shadcn/ui, focusing on clear structure and accessibility so more people can use them. Pair the implementation work with the Stitch design loop to move from design iteration to working components.
Build and review web animations with GSAP's core API, including movement, rotation, fades, and staggered starts. Adjust timing and easing, meaning changes in speed, and adapt animations to screen size and reduced-motion preferences.
Build web animations with GSAP plugins for text, SVG graphics, dragging, scrolling, and layout changes. It guides plugin selection, registration, configuration, and cleanup, with examples for implementing effects and reviewing existing animation code.
Build coordinated animation sequences with GSAP, an animation library. Arrange movements in order or in parallel, set start times with labels, group sequences inside others, and control playback, pauses, seeking, and reverse motion.
Link Figma design components with their code counterparts through Code Connect, helping design-system updates flow into the codebase. This catalogue entry points agents toward the full upstream workflow.
Build hero pages and showcase sites with cinematic animations, AI-generated media through the MiniMax API, and generative art. This catalog entry introduces the frontend skill; running its complete workflow requires installing the upstream bundle.
Write or review animation code using GSAP’s helper functions. Convert input ranges, limit values, generate random variations, snap positions to fixed steps, and handle groups of elements for effects driven by scrolling, pointer movement, or repeated updates.
Build GSAP animations in React or Next.js with guidance on useGSAP, element references, and component boundaries. It covers cleanup when components update or disappear, plus keeping animation code out of server rendering.
Improve GSAP animation performance by reviewing movement properties, batching page measurements and updates, and stopping unused animations. It guides changes for smoother motion, including efficient handling of long lists, pointer tracking, and scroll-driven effects.
Turn Figma designs into production-ready frontend code that closely matches the original visuals. Use it to hand design frames directly to a frontend agent and guide implementation toward a faithful reproduction of the design.
Implement animated effects, transitions, and movement in Flutter apps. Use it when adding motion to native iOS and Android app interfaces, with support for turning requests for animation into implementation work.
Build web animations with GSAP ScrollTrigger that respond to scrolling. The skill covers pinned sections, animation progress linked to scroll position, horizontal movement, and the position updates and cleanup needed when page content changes.
Implement and review GSAP animations in Vue, Nuxt, Svelte, and SvelteKit. It explains when to start animations, how to limit element selection to one component, and how to clean up when that component is removed.
Diagnose image export and download failures in browsers and Electron. Separate image data preparation from file saving, investigate empty files and blocked writes, and choose a suitable fallback save method.
Create HTML artifacts for claude.ai using React, Tailwind CSS, and shadcn/ui. This skill supports building elaborate interfaces with multiple components, helping turn a web prototype request into a structured, styled artifact.
Create a phased implementation plan for a feature or complex development task. It investigates documentation and existing examples, identifies supported APIs, and records concrete tasks, references, and verification checks for each phase.