skills.rest
mDevsLabs
mDevsLabsCOMMUNITY
Explore all skills by this author →
Website𝕏@mDevsLabsGitHub

react

Establish React component conventions for Lobehub TSX projects.

1|Updated May 20, 2026
Search Tags:#ui#frontend#react#routing#styling#lobehub#component-writing
One-click install
npx skills add https://github.com/mDevsLabs/mAI --skill react-mdevslabs
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react
Source: https://github.com/mDevsLabs/mAI/tree/main/.agents/skills/react
Command: npx skills add https://github.com/mDevsLabs/mAI --skill react-mdevslabs

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This guide helps developers align on React component conventions within Lobehub projects, ensuring consistent styling, routing, and UI composition across TSX code.

Core Features & Use Cases

  • Establishes styling patterns using base UI, antd, or custom styles to maintain visual consistency.
  • Guides component selection and architecture for desktop variants, layouts, and state management.
  • Use Case: when starting a new UI component, follow this guide to decide between base-ui, Lobehub UI, or antd integrations, and to set up routing and layout patterns.

Quick Start

Write a new React UI component by applying the guide to choose styling, base UI, and routing, and then scaffold the TSX file accordingly.

Frequently Asked Questions about react

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

FAQPage Schema
How do I write React UI components for Lobehub projects?▼

To write React UI components for Lobehub, follow established TSX conventions for consistent styling, routing, and layout to ensure visual alignment across the project.

What is the best way to choose between base-ui, @lobehub/ui, and antd for styling?▼

Choosing between base-ui, @lobehub/ui, and antd requires evaluating your specific component needs to maintain visual consistency and apply the correct styling patterns within your TSX file.

How do I set up routing and desktop layout patterns in a Lobehub React application?▼

Setting up routing and desktop layout patterns in a Lobehub React application involves applying specific architectural guidelines for component selection and state management to structure your TSX UI effectively.

Does this React convention guide support frontmatter-driven metadata for component scaffolding?▼

Yes, the React convention guide supports frontmatter-driven metadata including name and description, alongside a descriptive Markdown guide, to help scaffold TSX files and manage optional resource directories like scripts and assets.

When do I need to use optional resource directories like scripts and references in Lobehub UI development?▼

You need to use optional resource directories like scripts, references, and assets in Lobehub UI development when your components require on-demand tooling and supplementary resources to support complex styling or routing implementations.

Related Skills

Explore More Software Engineering Skills→
amaledtuningamaledtuning

react

Scaffold React components and enforce UI patterns across Next.js and React Router projects.

Community
Intermediate
flutterflutter
2.8k

flutter-add-widget-test

Write Flutter widget tests using the WidgetTester API to verify UI rendering and interactions.

Official
Intermediate
masonjamesmasonjames

react

Enforce React coding standards across TSX files using centralized react.mdc rules.

Community
Basic
alceupassosalceupassos

react

Guide React UI development with LobeHub component conventions and styling.

Community
Intermediate