Search everything...

Stats

Actions

Available In

react-skills

Name: react-skills
Author: fcakyon

By fcakyon

Review and refactor React, Next.js, and React Native code using Vercel engineering best practices for performance optimization, component composition patterns, mobile app efficiency, smooth view transitions, and web UI design/accessibility audits.

npx claudepluginhub fcakyon/claude-codex-settings --plugin react-skills

Popularity

Stars

Top 5%

692

Med: 0·Avg: 284

Installs

Top 5%

Med: 0·Avg: 1

Forks

Top 5%

Med: 0·Avg: 36

Health & Quality

Maintenance

Good6.0/10

Med: 7/10·Avg: 7.4/10

Community

42%

Med: 42%·Avg: 42.1%

What's Inside

Skills5

vercel-composition-patterns

/composition-patterns

React composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing reusable APIs. Triggers on tasks involving compound components, render props, context providers, or component architecture. Includes React 19 API changes.

vercel-react-best-practices

/react-best-practices

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 improvements.

vercel-react-native-skills

/react-native-skills

React Native and Expo best practices for building performant mobile apps. Use when building React Native components, optimizing list performance, implementing animations, or working with native modules. Triggers on tasks involving React Native, Expo, mobile performance, or native platform APIs.

vercel-react-view-transitions

/react-view-transitions

Guide for implementing smooth, native-feeling animations using React's View Transition API (`<ViewTransition>` component, `addTransitionType`, and CSS view transition pseudo-elements). Use this skill whenever the user wants to add page transitions, animate route changes, create shared element animations, animate enter/exit of components, animate list reorder, implement directional (forward/back) navigation animations, or integrate view transitions in Next.js. Also use when the user mentions view transitions, `startViewTransition`, `ViewTransition`, transition types, or asks about animating between UI states in React without third-party animation libraries.

web-design-guidelines

/web-design-guidelines

Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".

Stats

Version1.0.0

ReleasedMar 24, 2026

LanguagePython

Stars692

Forks59

Copy clicks3

MaintenanceGood

LicenseApache-2.0

Last CommitApr 1, 2026

AddedApr 1, 2026

Actions

View on GitHub View README Plugin Marketplace JSON

Own this plugin?

Verify ownership to unlock analytics, metadata editing, and a verified badge. GitHub access is read-only (username + org membership).

Available In

claude-settings707

README

My daily battle-tested Claude Code/Desktop and OpenAI Codex setup with skills, commands, hooks, subagents and MCP servers.

Installation • Plugins • Configuration • References

Installation

Plugins add skills, commands, and automations to your AI coding tool. Install only what you need from the plugin list below.

Prerequisites: See INSTALL.md for setup requirements.

Claude Code

# Add marketplace (one time)
/plugin marketplace add fcakyon/claude-codex-settings

# Install any plugin by name
/plugin install < plugin-name > @claude-settings

Codex CLI

codex plugin install < plugin-name > @claude-settings

Gemini CLI

gemini extensions install --path ./plugins/<plugin-name>

Cursor

cursor plugin install < plugin-name > @claude-settings

Create symlinks for cross-tool compatibility:

ln -sfn CLAUDE.md AGENTS.md
ln -sfn CLAUDE.md GEMINI.md

Plugins

anthropic-office-skills - Official Anthropic PDF, Word, PowerPoint, Excel skills

Claude Code	Codex CLI	Gemini CLI
`/plugin install anthropic-office-skills@claude-settings`	`codex plugin install anthropic-office-skills@claude-settings`	`gemini extensions install --path ./plugins/anthropic-office-skills`

Official office document skills from anthropics/skills.

Skill	Description	Install
`pdf`	PDF processing (read, merge, split, create, OCR, forms)
`pptx`	PowerPoint presentation building and editing
`xlsx`	Excel spreadsheet processing with formulas
`docx`	Word document creation and editing

openai-office-skills - Official OpenAI PDF, Word, PowerPoint, Excel skills

View full README on GitHub

Similar Plugins

react-best-practices

149·1·

React and Next.js performance optimization guidelines from Vercel Engineering. Use when writing/reviewing/refactoring React code for optimal performance. Covers async patterns, bundle optimization, server/client components, re-render optimization.

2mo

v3.0.0

secondsky

frontend-excellence

33·15·

Modern React and UI development expertise. Master React 19, Next.js 15, component architecture, state management, performance optimization, and design systems.

4mo

v1.0.0

dotclaude

design-forge

68·

Premium design patterns, UX research skills, and user journey mapping for modern web applications.

2mo

v2.2.0

hrconsultnj

react-native-dev

578·

Use this agent when you need expert assistance with React Native development tasks including code analysis, component creation, debugging, performance optimization, or architectural decisions. Examples: <example>Context: User is working on a React Native app and needs help with a navigation issue. user: 'My stack navigator isn't working properly when I try to navigate between screens' assistant: 'Let me use the react-native-dev agent to analyze your navigation setup and provide a solution' <commentary>Since this is a React Native specific issue, use the react-native-dev agent to provide expert guidance on navigation problems.</commentary></example> <example>Context: User wants to create a new component that follows the existing app structure. user: 'I need to create a custom button component that matches our app's design system' assistant: 'I'll use the react-native-dev agent to create a button component that aligns with your existing codebase structure and design patterns' <commentary>The user needs React Native component development that should follow existing patterns, so use the react-native-dev agent.</commentary></example>

7mo

v1.0.0

ananddtyagi

antigravity-bundle-web-wizard

37.9k·4·

Editorial "Web Wizard" bundle for Claude Code from Antigravity Awesome Skills.

v11.3.0

sickn33

react

152·

Advanced React skills for hooks, context, and performance optimization.

4mo

v1.1.2

TheBushidoCollective

react-skills

Popularity

Health & Quality

What's Inside

Confidence

README

Installation

Plugins

Similar Plugins

react-best-practices

frontend-excellence

design-forge

react-native-dev

antigravity-bundle-web-wizard

react

More by fcakyon

mongodb-skills

frontend-design-skills

web-performance-skills

supabase-skills

anthropic-office-skills

Installation

Plugins

More by fcakyon

mongodb-skills

frontend-design-skills

web-performance-skills

supabase-skills

anthropic-office-skills

Similar Plugins

react-best-practices

frontend-excellence

design-forge

react-native-dev

antigravity-bundle-web-wizard

react

Popularity

Health & Quality