React on Top AI Skills

I Let AI Agents Refactor My React Codebase — The Results Were Brutally Honest

Mon, 20 Jul 2026 00:00:00 +0000

Most AI Refactoring Advice Is Useless Without Context

I spent three weeks letting AI coding agents refactor a medium-sized React app — about 15K lines across 80 components. The results: some genuinely clever improvements, a few WTFs, and one incident that dropped our test coverage by 12%. Here is the raw breakdown.

The Setup: Why My Codebase Needed a Stranger’s Opinion

My team’s React app started life as a quick prototype. Two years and six developers later, it is a production app with 80+ components, a custom design system that nobody documented, and a test suite that started at 92% coverage but had been slowly bleeding. We knew the code needed love, but nobody had the time to audit every component.

Writing Videos with React: A Guide to the Remotion Agent Skill

Sun, 07 Jun 2026 00:00:00 +0000

What Remotion Is

Remotion is a framework for creating videos programmatically with React. Every frame of the video is a render result of a React component. You use useCurrentFrame() to get the current frame number, interpolate() for animation easing, and standard web technologies — JSX, CSS, Canvas, SVG, WebGL — to build visuals. The output is an MP4 file.

48.8k GitHub Stars. Fireship’s “This video was made with code” and GitHub Unwrapped were both built with Remotion.

Remotion Best Practices

Sat, 06 Jun 2026 00:00:00 +0000

What It Is

Remotion is a framework for creating videos programmatically using React. This skill packages the Remotion team’s best practices into rules that your AI assistant follows automatically — from project scaffolding, animation design, asset management, and sequencing to rendering. It covers 30+ sub-topics including subtitles, sound effects, transitions, 3D, GIF sync, transparent video, and audio visualization.

What’s Actually Different

Code-generated video is a niche with almost no direct competitors — most video production still uses Premiere or After Effects. Compared to After Effects scripting, Remotion uses React, meaning you get the entire frontend ecosystem. What makes this skill genuinely valuable is that AI is good at writing React code, but without Remotion-specific knowledge, it will write broken code — CSS transitions don’t render correctly, Tailwind animation classes don’t work, and resource loading follows different rules. This skill prevents all of that.

Vercel React Best Practices

Fri, 05 Jun 2026 00:00:00 +0000

What It Is

An official Vercel skill that packs 64 performance rules for React and Next.js into a format AI agents can follow. Covers rendering strategy, state management, component design, data fetching, performance optimization, type safety, accessibility, and testing. Install it in Claude Code and the AI writes code aligned with Vercel conventions without you prompting it.

What’s Actually Different

Writing “follow React best practices” in your prompt gives you inconsistent results that vary by model. This skill encodes 64 specific, conditional rules from Vercel’s team — they don’t drift. More importantly, these rules are Next.js-aware: Server Components, App Router, use cache, and other framework-specific patterns that generic React advice ignores. The rules tell the AI not just what to do, but when and why.

Vercel React Best Practices: 64 Rules for Faster Next.js Apps

Thu, 04 Jun 2026 00:00:00 +0000

What This Skill Actually Does

Vercel packages their React and Next.js performance knowledge into 64 rules. Once installed, your AI assistant follows them automatically when writing code. The rules cover rendering strategy, state management, component design, data fetching, performance optimization, type safety, accessibility, and testing — 8 categories total.

The skill lives inside the larger vercel-plugin package, which bundles 25 skills covering the entire Vercel ecosystem. You can install just the React best practices skill, or the full plugin.