React skills

rimzzlabs/website

Skill Claude CodeCodex

Production-ready UI motion system for React/Next.js. Use when implementing animations, transitions, or motion patterns.

rimzzlabs/website

Skill Claude CodeCodex

You are an expert in shadcn/ui — a collection of beautifully designed, accessible, and customizable React components built on Radix UI primitives and Tailwind CSS. Components are added directly to your codebase as source code, not installed as a dependency.

sanity-io/agent-toolkit

Skill Claude CodeCodex

Part of agent-toolkit

Render and serialize Portable Text to React, Svelte, Vue, Astro, HTML, Markdown, and plain text. Use when implementing Portable Text rendering in any frontend framework, building custom serializers for non-standard block types, converting Portable Text to HTML strings server-side, converting Portable Text to Markdown…

dylanfeltus/skills

Skill Claude CodeCodex

Framer Motion (Motion) animation patterns for React — springs, staggers, layout animations, micro-interactions, scroll effects, and page transitions. Use when building or improving UI animations, adding polish, or making interfaces feel premium.

ItsWendell/palot

Skill Claude CodeCodex

React performance optimization guidelines. This skill should be used when writing, reviewing, or refactoring React code to ensure optimal performance patterns. Triggers on tasks involving React components, data fetching, bundle optimization, or performance improvements.

robotostudio/turbo-start-sanity

Skill Claude CodeCodex

Scaffold a new page builder block for Turbo Start Sanity end-to-end — Sanity schema, GROQ projection, styled React component, Markdown serializer, tests, and all registrations. Use when asked to add, create, or scaffold a new page builder block, section, or content module (e.g. "add a testimonials block", "create a…

remorses/spiceflow

Skill Claude CodeCodex

Spiceflow is a super simple, fast, and type-safe API and React Server Components framework for TypeScript. Works on Node.js, Bun, and Cloudflare Workers. ALWAYS load this skill BEFORE writing or editing ANY spiceflow code, including one-line changes: routes, pages, layouts, loaders, server actions, forms…

Khan/wonder-blocks

Skill Claude CodeCodex

Storybook best practices for Wonder Blocks component stories. Use when creating or editing .stories.tsx / .stories.ts files.

Khan/wonder-blocks

Skill Claude CodeCodex

Jest + React Testing Library best practices for Wonder Blocks unit tests. Use when creating or editing .test.ts / .test.tsx files.

Khan/wonder-blocks

Skill Claude CodeCodex

Implements user interfaces using the Wonder Blocks (WB) design system — Khan Academy's React component library. Use this skill whenever the user asks you to build, modify, or review UI components; wants to use or map WB tokens for colors/spacing/typography (including translating Figma designs to WB components and…

deepelementlab/clawcode

Skill Claude CodeCodex

Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices.

Creatorberry/flick

Skill Claude CodeCodex

Part of flick

Turn a supplied video, public video URL, or transcript into original short-form scene animations with Remotion. Use when a user says "/flick", "$flick", "animate this", or asks to turn a video, transcript, or script into motion animation. Extract a timestamped transcript first when the source is video.

TerminalSkills/skills

Skill Claude CodeCodex

Add premium animated UI components built with Framer Motion and Tailwind CSS using Aceternity UI. Use when: adding animated effects (3D cards, glowing backgrounds, spotlight effects, moving borders), building visually stunning UIs, creating impressive hero sections and feature showcases in React/Next.js.

QwenLM/qwen-code-examples

Skill Claude CodeCodex ✓ vendor

Build full-stack dashboard applications using React/Next.js + shadcn/ui + Tailwind CSS + Recharts + Express with customizable data sources. Use when creating data visualization dashboards, business intelligence interfaces, monitoring systems, KPI displays, analytics platforms, or any project requiring data…

instructa/agent-skills

Skill Claude CodeCodex

Build, critique, and iterate high-converting marketing or product landing pages using React + Vite + TypeScript + Tailwind and shadcn/ui components, with all icons sourced from Iconify. Use when the user asks for a landing page, sales page, signup page, CRO improvements, above-the-fold vs below-the-fold structure…

Arindam200/termui

Skill Claude CodeCodex

Quick reference for TermUI components, hooks, and theming. Use when working inside an existing TermUI project and needing to look up props, hook signatures, theme tokens, or the CLI commands. Pairs with the cli-creator skill for building new CLIs from scratch. Trigger for questions like "what props does Table take"…

remix-run/agent-skills

Skill Claude CodeCodex

Build React applications using React Router's data mode with createBrowserRouter and RouterProvider. Use when working with route objects, loaders, actions, Form, useFetcher, or pending/optimistic UI without the Vite plugin.

remix-run/agent-skills

Skill Claude CodeCodex

Build React applications using React Router's declarative mode with BrowserRouter. Use when configuring routes with JSX, navigating with Link/NavLink, or reading URL params and search params without data loaders or actions.

remix-run/agent-skills

Skill Claude CodeCodex

Build full-stack React applications using React Router's framework mode. Use when configuring routes, working with loaders and actions, handling forms, handling navigation, pending/optimistic UI, error boundaries, or working with react-router.config.ts or other react router conventions.

opsrobot-ai/opsrobot

Skill Claude CodeCodexCursor

A practical development guide for building JavaScript and React interfaces with Tailwind CSS and shadcn/ui, a collection of reusable interface components.

juspay/xyne-spaces

Skill Claude CodeCodex

Author app-like designs in React/JSX and bundle them in-sandbox into the same single self-contained HTML artifact Design Studio delivers. Use when the design needs real state, complex interactivity, or component reuse beyond what vanilla JS comfortably handles.

fredm00n/framerlabs

Skill Claude CodeCodex

Create Framer Code Components and Code Overrides. Use when building custom React components for Framer, writing Code Overrides (HOCs) to modify canvas elements, implementing property controls, working with Framer Motion animations, handling WebGL/shaders in Framer, or debugging Framer-specific issues like hydration…

huanglvjing/spotpatch

Skill Claude CodeCodex

A development workflow for React that connects a selected page element to its JSX or TSX source code and gathers context for review.

popmechanic/VibesOS

Skill Claude CodeCodex

Part of VibesOS

Self-contained app generator — invoke this skill directly, do not decompose into sub-steps. Generates React web apps with TinyBase reactive data store. Use when creating new web applications, adding components, or working with real-time data. Ideal for quick prototypes and single-page apps that need real-time data…