transition-analyzer

Core Development

1. [React Component Development](./plugins/react-component-development)

- Component generation and scaffolding

- Custom hooks creation

- Performance optimization tools

- Component architecture patterns

1. [React State Management](./plugins/react-state-management)

- Context API optimization

- Global state solutions (Zustand, Jotai, Valtio)

- State machines with XState

- Redux patterns and migrations

1. [React TypeScript Integration](./plugins/react-typescript)

- Type generation and validation

- Generic component patterns

- Migration tools

- Strict type safety

Quality & Testing

1. [React Testing Suite](./plugins/react-testing)

- Unit and integration testing

- E2E test scenarios

- Coverage reporting

- Mock data generation

1. [React Performance](./plugins/react-performance)

- Bundle size optimization

- Render performance profiling

- Code splitting strategies

- Memory leak detection

1. [React Accessibility](./plugins/react-accessibility)

- WCAG compliance checking

- ARIA attribute management

- Keyboard navigation patterns

- Screen reader optimization

Features & UX

1. [React Forms & Validation](./plugins/react-forms)

- Form generation with validation

- Multi-step forms

- Field management

- Schema validation (Yup, Zod)

1. [React Data Fetching](./plugins/react-data-fetching)

- API integration hooks

- Query caching (React Query, SWR)

- Real-time subscriptions

- GraphQL support

1. [React Animation](./plugins/react-animation)

- Component animations

- Page transitions

- Gesture handling

- Scroll-triggered effects

1. [React Error Handling](./plugins/react-error-handling)

- Error boundaries

- Recovery strategies

- Error tracking

- User-friendly fallbacks

Install All Plugins

```bash

npm install @skillstash/react-marketplace

```

Install Individual Plugins

```bash

npm install @skillstash/react-component-development

npm install @skillstash/react-state-management

# ... install specific plugins as needed

```

1. Initialize Marketplace

```bash

npx @skillstash/react-marketplace init

```

2. Configure Plugins

Create .skillstash.config.json in your project root:

```json

{

"marketplace": "react",

"plugins": [

"react-component-development",

"react-state-management",

"react-testing"

],

"settings": {

"typescript": true,

"framework": "react",

"version": "18.2.0",

"packageManager": "npm"

}

}

```

3. Use Slash Commands

```bash

# Component Development

/create-component Button --typescript --with-tests

/create-hook useLocalStorage --ssr-safe

/optimize-component Dashboard --analyze

# State Management

/create-context AuthContext --with-reducer

/create-store AppStore --library zustand

# Testing

/generate-tests Button.tsx --coverage

/create-test-suite components --e2e

# Performance

/analyze-performance App.tsx --profile

/optimize-bundle --code-split

# And many more...

```

Skills automatically activate based on context:

• Component Generator: Activates in .jsx/.tsx files
• Hook Analyzer: Activates for custom hooks
• Performance Monitor: Activates on performance issues
• State Analyzer: Activates for state management
• Test Generator: Activates in test files

Agents provide expert assistance:

• Component Architect: Designs component hierarchies
• State Architect: Plans state management strategies
• Testing Architect: Creates testing strategies
• Performance Engineer: Optimizes application performance
• Accessibility Expert: Ensures WCAG compliance

Global Configuration

```json

{

"react": {

"version": "18.2.0",

"typescript": true,

"strictMode": true,

"experimental": {

"serverComponents": false,

"suspense": true

}

},

"plugins": {

"autoUpdate": true,

"checkCompatibility": true,

"enableTelemetry": false

}

}

```

Plugin-Specific Configuration

Each plugin has its own configuration:

```json

{

"react-component-development": {

"componentStyle": "functional",

"useTypeScript": true,

"generateTests": true

},

"react-state-management": {

"library": "zustand",

"enableDevTools": true,

"persistState": true

}

}

```

• [Getting Started Guide](https://docs.skillstash.dev/react/getting-started)
• [Plugin Development](https://docs.skillstash.dev/react/plugin-development)
• [Best Practices](https://docs.skillstash.dev/react/best-practices)
• [API Reference](https://docs.skillstash.dev/react/api)
• [Examples](https://github.com/skillstash/react-examples)

| Plugin Version | React Version | TypeScript Version |

|---------------|---------------|-------------------|

| 1.0.x | 18.x, 19.x | 5.x |

| 0.9.x | 17.x, 18.x | 4.x, 5.x |

Creating Custom Plugins

```typescript

// my-plugin/plugin.json

{

"name": "my-custom-plugin",

"version": "1.0.0",

"commands": ["my-command"],

"skills": ["my-skill"],

"agents": ["my-agent"]

}

// my-plugin/.claude/commands/my-command.md

# my-command

Custom command implementation...

// my-plugin/.claude/skills/my-skill.md

# my-skill

Auto-loading skill implementation...

// my-plugin/.claude/agents/my-agent.md

# my-agent

Specialized agent implementation...

```

Contributing

1. Fork the repository
2. Create your feature branch
3. Add your plugin or enhancement
4. Write tests
5. Submit a pull request

• Discord: [Join our community](https://discord.gg/skillstash)
• GitHub: [Report issues](https://github.com/skillstash/react-marketplace/issues)
• Twitter: [@skillstash](https://twitter.com/skillstash)
• Blog: [Latest updates](https://blog.skillstash.dev)

MIT © SkillStash Team

Built with contributions from the React community and powered by:

• React Team at Meta
• Open source contributors
• Plugin developers
• Community testers

---

Made with ❤️ by the SkillStash Team

Building better React applications, one plugin at a time.