React Frontend Expert

What it does

This skill assists with React frontend development, specifically focusing on building user interfaces (UIs) and user experiences. It provides guidance on creating and modifying functional React components, writing custom hooks (useXxx), implementing data fetching using TanStack Query, handling forms with validation, and setting up project structures for React/TypeScript applications. The skill enforces specific coding conventions to promote maintainability and best practices.

When to use it

• Creating or modifying React components (functional components only).
• Writing custom hooks (useXxx).
• Building pages that utilize routing.
• Implementing data fetching with TanStack Query.
• Handling forms with validation.
• Setting up the initial project structure for a new React/TypeScript application.

Key capabilities

• Guidance on creating functional React components.
• Support for writing custom hooks.
• Assistance with routing and page building.
• Implementation of data fetching using TanStack Query.
• Form validation handling.
• Project structure setup (including src/api, components, features, hooks, layouts, pages, types).
• Enforcement of specific component coding rules (named exports for shared components, default exports for page components, props interface naming convention, prop destructuring).

Example prompts

• "Help me create a custom hook to manage user authentication."
• "What's the best way to structure my React project with TypeScript?"
• "How can I implement data fetching using TanStack Query in this component?"

Tips & gotchas

• This skill only supports functional components. Class-based components are not within its scope.
• It does not assist with testing (unit, E2E), API design, backend implementation, or deployment/CI/CD pipelines. Use specialized skills for those tasks.
• The skill enforces specific coding conventions; be prepared to adhere to them for optimal results.