skills.rest
zmh13928433602-sys
zmh13928433602-sysCOMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/zmh13928433602-sys/lobe-chat --skill react-zmh13928433602-sys
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
findinfinitelabsfindinfinitelabs

react-typescript-frontend

Build a type-safe Chuukese React frontend with Mantine UI v8 and Vite.

Community
Intermediate
jdretsjdrets

shadcn-ui

Install shadcn/ui components and configure React Hook Form with Zod validation.

Community
Intermediate
StaysrStaysr

react

Guide React component development with routing and layout patterns.

Community
Intermediate
partme-aipartme-ai
610

ant-design-mobile

Provide React components for building mobile-first user interfaces with Ant Design.

Official
Intermediate