react

Standardize React component development with lobehub UI, routing, and styling conventions.

Updated May 11, 2026

Search Tags:#frontend #react #routing #styling #design-system #ui-components #lobehub-ui

Ready to run

npx skills add https://github.com/zmh13928433602-sys/lobe-chat --skill react-zmh13928433602-sys

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

React component development can be inconsistent across teams, and this guide helps standardize UI coding with lobehub UI, routing patterns, and styling conventions.

Core Features & Use Cases

Provides guidelines for using @lobehub/ui primitives over traditional UI libs.
Documents routing architecture (Next.js App Router + React Router DOM) and key entry points for SPA/desktop apps.
Outlines preferred styling approaches (createStaticStyles vs createStyles) and layout recommendations using Flexbox and Center.
Use Case: A frontend developer builds a new React component library that follows the guide to ensure consistency.

Quick Start

Create a new React component following this guide and apply the recommended lobehub UI primitives to ensure consistency.

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 development across my team?▼

To standardize React component development, apply consistent guidelines for UI composition, routing patterns, and styling conventions using the lobehub design system.

Does this React guide support both Next.js App Router and React Router DOM?▼

Yes, this React guide documents routing architecture for both Next.js App Router and React Router DOM, outlining key entry points for SPA and desktop applications.

When should I use createStaticStyles vs createStyles for React styling?▼

Use createStaticStyles vs createStyles based on your styling needs; this React guide outlines preferred approaches and layout recommendations using Flexbox and Center components.

How do I structure layout and Flexbox in React components following this guide?▼

Structure React layout using Flexbox and Center components as recommended by this guide, ensuring consistent UI composition with lobehub design system primitives over traditional UI libraries.