react

Name: react
Availability: InStock
Author: razgulay

Standardize React component structure, styling, and routing patterns.

Updated Aug 23, 2026

Search Tags:#ui #frontend #react #routing #reference #component #best-practices

Ready to run

npx skills add https://github.com/razgulay/my-lobe-chat --skill react-razgulay

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: react
Source: https://github.com/razgulay/my-lobe-chat/tree/main/.agents/skills/react
Command: npx skills add https://github.com/razgulay/my-lobe-chat --skill react-razgulay

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a standardized guide for building React components, helping teams maintain consistency across UI elements, routing, and component architecture.

Core Features & Use Cases

Guided Component Development: Clear rules for creating, styling, and organizing React components using the @lobehub/ui library.
Routing & Architecture: Guidelines for hybrid routing setups and component structure in Next.js apps alongside React Router DOM based SPA paths.
Reference & Reuse: Central references to common layout and UI patterns (see references/layout-kit.md) to promote reuse.

Quick Start

Start with a new component folder under src/components, then consult the layout-kit reference to structure your layout and import components from @lobehub/ui.

Frequently Asked Questions about react

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

FAQPage Schema

How do I standardize React component structure and styling conventions across multiple teams?▼

To standardize React component structure, use a centralized guide enforcing shared rules for styling conventions, UI building, and routing patterns. This ensures uniformity across teams and codebases.

What are the best practices for organizing React components in a hybrid Next.js and React Router DOM app?▼

For hybrid routing setups in Next.js apps and React Router DOM SPAs, follow guidelines for component structure and routing patterns. This promotes architectural consistency and component reuse across different routing environments.

How do I start building a new React UI component using the @lobehub/ui library?▼

To start building a new React UI component, create a folder under src/components, then consult the layout-kit reference to structure your layout and import components directly from the @lobehub/ui library.

Where can I find reference patterns for React layout and UI component reuse?▼

You can find reference patterns for React layout and UI component reuse in the centralized layout-kit reference file. It provides common layout patterns to promote consistent component reuse across your frontend projects.

Does this React component guide work for both single page applications and Next.js architectures?▼

Yes, this React component guide works for both architectures by providing specific guidelines for hybrid routing setups and component structure in Next.js apps alongside React Router DOM based SPA paths.