react
React rules for the project Applies to files matching: **/*.tsx.
Security Assessment
About react
The 'react' skill provides a set of rules and best practices for developing React applications within a project. It ensures that developers adhere to consistent patterns when building components, handling hooks, forms, styling, and configuration access. This skill aims to maintain code clarity, performance optimization, and maintainability by enforcing modern React practices and promoting a declarative approach to UI development. By standardizing how React code is structured, it minimizes potential bugs and improves team collaboration on larger projects.
FAQ
What type of components should be used in this React skill?
The 'react' skill encourages the use of function components with hooks, as opposed to class components, for cleaner and more maintainable code.
How should interactive components be managed?
Interactive components should be marked with 'use client' at the top of the file, ensuring that they are client-side components, while non-interactive logic should remain in server-side components.
Can I use default exports for components?
No, the 'react' skill mandates using named exports for all components to maintain a consistent and clear module system.
How should forms be validated?
The recommended approach for validating forms is to use 'react-hook-form' combined with Zod, especially for non-trivial forms.
How should configuration be accessed in client components?
Client components should use 'useConfig()' from '@/components/config-provider' to access the site configuration, ensuring separation from server-specific secrets.
Install react
Quick Setup:
- Copy the skill folder to
.claude/skills/ - Claude will automatically detect and use the skill
Repository
FranciscoMoretti/sparka