skills.rest
codename-co
codename-coOFFICIAL
Explore all skills by this author →
WebsiteGitHub

react-component-development

Create React components with HeroUI following DEVS platform conventions.

52|1|Updated Aug 2, 2025
Search Tags:#best practices#frontend#react#ui development#component development#heroui
One-click install
npx skills add https://github.com/codename-co/devs --skill react-component-development-codename-co
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-component-development
Source: https://github.com/codename-co/devs/tree/main/.github/skills/react-component-development
Command: npx skills add https://github.com/codename-co/devs --skill react-component-development-codename-co

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a standardized guide and template for developing React components within the DEVS platform, ensuring consistency and adherence to best practices.

Core Features & Use Cases

  • Component Structure Guidelines: Defines organization for shared, page, and feature-specific components.
  • Standard Component Template: Offers a pre-built, reusable React component structure with common hooks and UI elements.
  • HeroUI Component Integration: Details how to import and use various UI components from the @heroui/react library.
  • Best Practices: Covers internationalization (i18n), path aliases, event handling, loading states, icon usage, styling with Tailwind CSS, and store integration with Zustand.
  • Use Case: When a developer needs to create a new user profile card component, they can refer to this Skill for the correct structure, import necessary HeroUI elements, and implement state management following the provided patterns.

Quick Start

Use the react-component-development skill to generate a new React component following the provided template and best practices.

Frequently Asked Questions about react-component-development

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

FAQPage Schema
How do I build React components with HeroUI?▼

Standard React component structure organizes code into shared, page, and feature-specific directories. This organization enforces project conventions, path aliases, and scalable frontend development patterns within your application.

What's the best way to manage state and loading states in React UI components?▼

Manage state and loading states in React UI components by integrating Zustand for store management and utilizing standard component templates that include built-in handling for loading UI and event processing.

Does this React component development guide support internationalization and Tailwind CSS?▼

Yes, the React component development guide supports internationalization (i18n) for multilingual text and Tailwind CSS for styling, ensuring components are globally accessible and visually consistent.

How do I handle icon usage and event handling in HeroUI components?▼

Handle icon usage and event handling in HeroUI components by importing necessary icons into your standard component template and attaching event handlers directly to the imported UI elements.

Can I use HeroUI for feature-specific components or only shared components?▼

You can use HeroUI for both feature-specific and shared components. The guide defines organizational patterns for all component types, ensuring consistent structure and best practices across your React application.

Related Skills

Explore More Software Engineering Skills→
fredericvilcotfredericvilcot
13

init-frontend

Initialize a React frontend project with Vite, TypeScript, and Vitest.

Community
Intermediate
KapilKumar88KapilKumar88

frontend-design

Generate custom frontend interfaces with HTML/CSS/JS and React components.

Community
Advanced
verekiaverekia
31

zustand-entities

Manage game entities in a Zustand store with getState and useStore.

Community
Intermediate
partme-aipartme-ai
610

ant-design-react

Guide Ant Design React component usage with TypeScript and design system support.

Official
Intermediate