skills.rest
xkl2013
xkl2013COMMUNITY
Explore all skills by this author →
GitHub

react

Standardizes React component conventions within the LobeHub framework.

Updated Jul 5, 2026
Search Tags:#react#electron#ui development#lobehub#component conventions
One-click install
npx skills add https://github.com/xkl2013/lobe --skill react-xkl2013
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react
Source: https://github.com/xkl2013/lobe/tree/main/.agents/skills/react
Command: npx skills add https://github.com/xkl2013/lobe --skill react-xkl2013

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill provides a set of conventions and guidelines to streamline React component development within the LobeHub ecosystem.

Core Features & Use Cases

  • Component Conventions: Standardizes naming and structuring React components to improve maintainability.
  • Base UI Components: Recommends usage of base UI components from @lobehub/ui/base-ui over antd components for a cleaner architecture.
  • Dynamic Loading: Offers best practices for loading indicators that enhance user experience without reliance on antd's Spin component.
  • Layout Best Practices: Provides guidelines for Flexbox and Center components for efficient and visually appealing layouts.
  • Navigation and Routing: Details how to correctly use react-router-dom for single-page applications (SPA).
  • Desktop File Sync Rule: Ensures Electron apps remain consistent when editing desktop files by synchronizing between .tsx and .desktop.tsx files.

Quick Start

Install the Skill unit and follow the conventions when developing your next React component within LobeHub.

Frequently Asked Questions about react

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

FAQPage Schema
What are the LobeHub conventions for structuring and naming React components?▼

LobeHub React conventions standardize component naming and structuring to improve maintainability. They provide specific guidelines for organizing React development within the LobeHub ecosystem architecture.

How do I synchronize .tsx and .desktop.tsx files when developing Electron apps?▼

To synchronize Electron desktop files, you must edit .tsx and .desktop.tsx variants together. This ensures Electron desktop applications remain perfectly consistent during component development.

Can I use antd components for layouts and loading indicators in LobeHub React development?▼

LobeHub React conventions recommend avoiding antd components. Instead, use base UI components from @lobehub/ui/base-ui and specific loading indicators for a cleaner architecture.

What is the best way to handle SPA navigation using react-router-dom in LobeHub?▼

The best way to handle SPA navigation is by correctly using react-router-dom. LobeHub conventions provide detailed guidelines for navigating within single-page applications efficiently.

How do I create efficient layouts in LobeHub React components without relying on antd?▼

To create efficient layouts without antd, use Flexbox and Center components. LobeHub layout best practices provide guidelines for building efficient and visually appealing React structures.

Related Skills

Explore More Software Engineering Skills→
find-xposed-magiskfind-xposed-magisk
30

react

Implement React component guidelines for layouts, routing, and @lobehub/ui integration.

Community
Intermediate
windyskywindysky

moai-framework-electron

Design and implement secure Electron 33+ desktop apps with IPC and auto-update.

Community
Advanced
alceupassosalceupassos

react

Guide React UI development with LobeHub component conventions and styling.

Community
Intermediate
partme-aipartme-ai
610

ant-design-react

Guide Ant Design React component usage with TypeScript and design system support.

Official
Intermediate