react-component

Create React components with TypeScript and CSS Modules.

Updated Mar 9, 2026

Search Tags:#typescript #frontend #react #component #ui development #css modules

Ready to run

npx skills add https://github.com/paulotks/CodeLeapTest --skill react-component-paulotks

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: react-component
Source: https://github.com/paulotks/CodeLeapTest/tree/main/.agent/skills/react-component
Command: npx skills add https://github.com/paulotks/CodeLeapTest --skill react-component-paulotks

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill streamlines the creation, review, and implementation of React UI components within the CodeLeap project, ensuring consistency and adherence to established patterns.

Core Features & Use Cases

Component Creation: Generate new functional React components with TypeScript.
Styling: Apply styling using CSS Modules and the project's design system variables.
Prop Typing: Define and enforce explicit prop types using interfaces.
Logic Separation: Extract complex logic into custom hooks for better organization.
Use Case: When you need to add a new UserProfileCard component to the application, this Skill will guide you through creating the .tsx file, its corresponding .module.css for styling, and defining the necessary UserProfileCardProps.

Quick Start

Create a new React component named Button following the project's established patterns.

Frequently Asked Questions about react-component

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I create a React component with TypeScript and CSS Modules?▼

To create a React component, you generate a functional TypeScript component file alongside its corresponding `.module.css` stylesheet for styling. This approach enforces explicit prop typing through interfaces and adheres to established project patterns.

What is the best way to define props for React UI components?▼

The best way to define props for React UI components is by using explicit TypeScript interfaces. This enforces strict prop typing and ensures your functional components receive correctly typed data.

How do I separate complex logic when building React components?▼

You separate complex logic when building React components by extracting it into custom hooks. This organization keeps your functional components focused on UI rendering and easier to manage.

Can I use design system variables with CSS Modules in React?▼

Yes, you can use design system variables with CSS Modules in React. Styling is applied by referencing these established variables directly within your `.module.css` files to maintain visual consistency.

When should I not use CSS Modules for React component styling?▼

You should not use CSS Modules for React component styling if your project relies on global CSS overrides, utility-first frameworks, or runtime CSS-in-JS solutions instead of scoped `.module.css` files. The pattern enforces strict modular boundaries.