Skill Claude CodeCodex
Development guidelines for building front ends with Next.js 15, React 19, TypeScript, Shadcn/ui, and Tailwind CSS. They cover how pages, components, data fetching, routes, and project files should be organised.
2,337 tagged React, measured the same way as everything else here.
Browse within: nextjs 114javascript 42accessibility 35design-system 29agentic-workflow 27codex-skills 27components 27ui 26openai 24claude-code-skills 23expo 22motion 22react-native 22reactjs 21
Skill Claude CodeCodex
Development guidelines for building front ends with Next.js 15, React 19, TypeScript, Shadcn/ui, and Tailwind CSS. They cover how pages, components, data fetching, routes, and project files should be organised.
Skill Claude CodeCodex
Complete guide for building accessible, high-UX forms in modern stacks (React/Next.js, Tailwind, Zod). Includes specific patterns for clickable areas, range sliders, output-inspired design, and WCAG compliance.
Skill Claude CodeCodex
Enforces React component authoring best practices. Use when creating React components, binding components, presentations, useObservableValues, or when the user asks about React UI patterns, reactive binding, or action callbacks.
Skill Claude CodeCodex
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance…
Skill Claude CodeCodex
Use this skill whenever the user wants to build or set up user interface in a Unity project using OneJS, React, TypeScript, or JSX, e.g. 'add a main menu to my game', 'build a settings screen', 'make a HUD', 'set up OneJS', 'my OneJS panel is blank', 'the UI is not hot reloading'. Covers confirming OneJS is installed…
Skill Claude CodeCodex
React and Next.js performance optimization patterns. Use BEFORE implementing any React code to ensure best practices are followed.
Skill Claude CodeCodex
Refactor high-complexity React components in Dify frontend. Use when pnpm analyze-component --json shows complexity > 50 or lineCount > 300, when the user asks for code splitting, hook extraction, or complexity reduction, or when pnpm analyze-component warns to refactor before testing; avoid for simple/well-structured…
Skill Claude CodeCodex
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance…
Skill Claude CodeCodex
GSAP + Remotion integration for professional motion graphics video production. Timeline orchestration, text splitting, SVG morphing, advanced easing, and reusable effect presets.
Skill Claude CodeCodex
Develops Inertia.js v3 React client-side applications. Activates when creating React pages, forms, or navigation; using , , useForm, useHttp, setLayoutProps, or router; working with deferred props, prefetching, optimistic updates, instant visits, or polling; or when user mentions React with Inertia, React pages, React…
Skill Claude CodeCodex
Build TUIs with a Raycast-like React API using termcast. Implements @raycast/api components (List, Detail, Form, Action) rendered to the terminal via opentui.
Skill Claude CodeCodex
A project guide for a Next.js documentation and landing-page starter built with Nextra, Tailwind CSS, MDX, translations, themes, and interface components. It explains the repository’s structure, existing features, extension points, and migration patterns.
Skill Claude CodeCodex
Distill and apply this repository's Next.js Nextra starter architecture, implemented features, extension points, and migration patterns. Use when Codex needs to understand this project, continue second-stage development, add or change docs/landing/i18n/theme/auth/UI behavior, or reuse these Next.js 16 + Nextra 4 +…
Skill Claude CodeCodex
Refactor high-complexity React components in frontend. Use when the user asks for code splitting, hook extraction, or complexity reduction, or when you come across a component that is too complex to understand and refactor it.
Skill Claude CodeCodex
Generate Vitest + React Testing Library tests for frontend components, hooks, and utilities. Triggers on testing, spec files, coverage, Vitest, RTL, unit tests, integration tests, or write/review test requests.
Skill Claude CodeCodex
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance…
Skill Claude CodeCodex
Build React animations with Motion (Framer Motion) - gestures (drag, hover, tap), scroll effects, spring physics, layout animations, SVG. Bundle: 2.3 KB (mini) to 34 KB (full). Use when: drag-and-drop, scroll animations, modals, carousels, parallax. Troubleshoot: AnimatePresence exit, list performance, Tailwind…
Skill Claude CodeCodex
Generate animated videos and motion graphics from natural language descriptions. Creates a standalone Vite + React project with Framer Motion scenes that auto-play in the browser. Use when the user wants to create animations, motion graphics, video intros, animated presentations, or product demos.
Skill Claude CodeCodex
Produces a structured diagnosis report on one React component's design: a 7-dimension scorecard (consumer API, data flow, testability, extensibility, performance, mental model, boundaries & contracts — each scored 1-5 with code evidence), design highlights, and P0/P1/P2 recommendations with effort estimates, every…
Skill Claude CodeCodex
Build an App Store "Today"-style card that zooms into its own detail/article screen with expo-router's Link.AppleZoom, including the poster card UI (expo-image + blurhash placeholder, caption tinted with the image's own average colour) and the editorial destination screen. Use when adding a card-to-detail zoom…
Skill Claude CodeCodex
Implement frame-perfect, native-feeling keyboard handling in React Native and Expo apps. Use when content is covered by the keyboard, when keyboard animations jank or "snap" on Android, when inputs are hidden behind the keyboard, when the keyboard covers fields on Android 15 / edge-to-edge even though older Android…
Skill Claude CodeCodex
Rules and best practices when working on the dashboard React frontend codebase (including the inlined Gram Elements code).
Skill Claude CodeCodex
Form implementation guidance for the aghub desktop app. Use when building or refactoring forms in crates/desktop/src, especially HeroUI v3 + React forms, RHF integration, validation, custom editors, and error presentation. Triggers: MCP forms, settings dialogs, create/edit panels, TextField, FieldError, Select…
Skill Claude CodeCodex
Reproduce a live website from its URL as a clean, deployable Vite + React project by running the complete agent-driven Perfect Web Clone harness: capture source evidence, plan the full page, author every section, implement common interactions, build, compare, repair, and hand the measured result to the user for…