skills.rest
razgulay
razgulayCOMMUNITY
Explore all skills by this author →
GitHub

react

Standardize React component structure, styling, and routing patterns.

Updated Aug 23, 2026
Search Tags:#ui#frontend#react#routing#reference#component#best-practices
One-click install
npx skills add https://github.com/razgulay/my-lobe-chat --skill react-razgulay
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
aboudou-cto-blokoaboudou-cto-bloko
2

atomic-components

Organize React UI components into atoms, molecules, organisms, and templates under src/components.

Community
Intermediate
Pravin-surawasePravin-surawase
5

react-validation

Run build, lint, type-check, and test checks on React frontend changes.

Community
Intermediate
SandroBeatzSandroBeatz

lint-check

Run ESLint and TypeScript type checking on a codebase.

Community
Intermediate
cmayorgahilariocmayorgahilario

tailwindcss-development

Audit UI pages for Tailwind CSS v4 patterns and convert HTML templates to consistent utility classes.

Community
Intermediate