skills.rest
kissMyApps-tlm
kissMyApps-tlmOFFICIAL
Explore all skills by this author →
GitHub

react

Standardize React component development with file structure and routing conventions.

Updated Aug 23, 2026
Search Tags:#frontend#react#routing#UI#best-practices#component-development#lobehub-ui
One-click install
npx skills add https://github.com/kissMyApps-tlm/kissmychat --skill react-kissmyapps-tlm
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react
Source: https://github.com/kissMyApps-tlm/kissmychat/tree/main/.agents/skills/react
Command: npx skills add https://github.com/kissMyApps-tlm/kissmychat --skill react-kissmyapps-tlm

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It solves the problem of inconsistent React component development by providing a standardized guide.

Core Features & Use Cases

  • Component Writing Guide for React components, outlining file structure and interaction with Lobehub UI.
  • Routing & Integration: guidance for Next.js App Router or React Router with Lobehub UI.
  • Reference: includes layout-kit guidelines in references.

Quick Start

  • Create a new React component following this guide, place it under src/components, import and compose Lobehub UI components, and wire it into your app's routing.

Frequently Asked Questions about react

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

FAQPage Schema
How do I structure React components following best practices?▼

Structure React components by organizing files under src/components, composing Lobehub UI primitives, and following standardized file organization and component composition guidelines. This ensures consistency across your project and reduces development friction.

What's the best way to set up routing in a React project?▼

Integrate routing using Next.js App Router or React Router with Lobehub UI components. The guide provides conventions for wiring components into your app's routing structure while maintaining consistent UI patterns.

Can I reuse design primitives across my React UI components?▼

Yes, Lobehub UI provides shared design primitives you can compose into custom components. Reference the layout-kit guidelines to apply consistent design patterns across your frontend without building components from scratch.

How do I speed up React component development without sacrificing consistency?▼

Use standardized component development guidelines that enforce file organization, composition patterns, and routing conventions. This approach eliminates inconsistency while accelerating your UI development workflow.

What file organization should I follow for React UI components?▼

Place components under src/components and follow the provided file structure guidelines. This standardized organization enables faster development, easier collaboration, and predictable component reuse across your React application.

Related Skills

Explore More Software Engineering Skills→
RuzenieRuzenie
2

app-workspace-guide

Identify Node, Vite, Tailwind, and shadcn configurations and directory constraints.

Community
Basic
codewithlaiba28codewithlaiba28
1

deployment-production-config

Deploy Next.js frontends to Vercel and FastAPI backends to cloud platforms.

Community
Advanced
serguei9090serguei9090

react

Enforce React component standards with @lobehub/ui primitives and createStaticStyles.

Community
Intermediate
MonosenMonosen

tailwind-css-patterns

Apply Tailwind CSS utility patterns to React, Vue, Svelte, or vanilla JavaScript components.

Community
Intermediate