A comprehensive collection of AI agent skills for React and React Router v7 development. These skills provide best practices, patterns, and optimizations to help developers build high-quality React applications.
Install skills using the skills CLI:
# Install all skills
npx skills add code-visionary/react-router-skills
# Install specific skill
npx skills add code-visionary/react-router-skills/loader-action-optimizer- route-scaffolder - Scaffold complete CRUD routes following React Router v7 conventions
- loader-action-optimizer - Best practices for data loading, parallel fetching, and server actions
- route-navigation-helper - Navigation patterns, form submissions, and state management
- route-error-handling - Error boundaries, route-level errors, and recovery strategies
- meta-seo-optimizer - Meta functions, SEO best practices, and structured data
- component-optimization - React.memo, useMemo, useCallback, and code splitting strategies
- bundle-optimizer - Dynamic imports, tree shaking, and bundle analysis
- render-performance - Identify re-renders, context optimization, and profiler usage
- state-management-helper - useState, useReducer, Context API patterns
- form-state-manager - Form validation, controlled inputs, and multi-step forms
- data-fetching-patterns - Loader patterns, revalidation, and cache strategies
- api-integration - API clients, error handling, and retry logic
- typescript-patterns - Type-safe loaders/actions, generics, and utility types
- type-safety-helper - Zod schemas, runtime validation, and type inference
- accessibility-checker - ARIA patterns, keyboard navigation, screen reader support
- responsive-design-helper - Mobile-first patterns, breakpoints, and touch interactions
- animation-patterns - Transitions, loading states, and skeleton screens
- testing-helper - Vitest, Testing Library, and route testing strategies
- e2e-testing-guide - Playwright patterns and user flow testing
- translation-helper - i18n setup, translation keys, and locale management
- security-patterns - Authentication, authorization, CSRF, and XSS prevention
- session-management - Cookie handling, token management, and session persistence
- debugging-helper - React DevTools, profiling, and error tracking
- code-quality-enforcer - ESLint, Prettier, and pre-commit hooks
- build-optimizer - Vite configuration and production optimizations
- deployment-helper - Deployment patterns and CI/CD integration
Each skill includes:
- Quick Reference - Most commonly needed patterns
- Step-by-Step Guide - Detailed implementation instructions
- Code Examples - Working code snippets
- Common Issues - Troubleshooting tips
- Reference Links - Additional documentation
skills/
├── skill-name/
│ ├── SKILL.md # Main skill documentation
│ ├── examples/ # Code examples
│ │ ├── basic.tsx
│ │ └── advanced.tsx
│ └── templates/ # Reusable templates
│ └── template.tsx
We welcome contributions! See CONTRIBUTING.md for guidelines.
- Create a new directory in
skills/ - Add a
SKILL.mdfile following the template - Include practical examples
- Submit a pull request
MIT License - see LICENSE file for details
Created by Code Visionary for the developer community.