skills.rest
kingmacth
kingmacthCOMMUNITY
Explore all skills by this author →
GitHub

react

Guide React component creation with routing and @lobehub/ui patterns.

Updated Dec 12, 2024
Search Tags:#ui#documentation#frontend#react#routing#component
One-click install
npx skills add https://github.com/kingmacth/lobe-chat --skill react-kingmacth
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react
Source: https://github.com/kingmacth/lobe-chat/tree/main/.agents/skills/react
Command: npx skills add https://github.com/kingmacth/lobe-chat --skill react-kingmacth

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Developers often struggle to structure React component development, routing, and UI integration in large projects; this guide provides a clear reference to standard practices and patterns.

Core Features & Use Cases

  • Clear conventions for React component creation using a consistent layout, routing integration, and UI library usage.
  • Guidance on file structure, routing architecture, and key files to accelerate frontend work.
  • Real-world workflow example: building a reusable button component and wiring it into a page layout.

Quick Start

Instantiate a new React component using the guide to implement a Button component in your app.

Frequently Asked Questions about react

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

FAQPage Schema
How do I structure React component development and routing integration in large projects?▼

To structure React component development, use clear conventions for file organization, routing architecture, and UI library integration to standardize frontend workflows and accelerate UI development.

What is the best way to create a reusable React UI component and wire it into a page layout?▼

The best way to create a reusable React UI component is following structured writing patterns and integration workflows, such as building a button component and wiring it directly into a page layout.

How does @lobehub/ui design pattern integration work with standard React components?▼

@lobehub/ui design pattern integration works by guiding React component creation using consistent layout standards and UI library usage, ensuring components satisfy documentation conventions and code organization standards.

When do I need specific routing configurations and key files for React frontend development?▼

You need specific routing configurations and key files during React frontend development when structuring large projects, ensuring proper routing architecture and code organization for UI integration.

Can I use this React component guide for establishing code organization standards and documentation conventions?▼

Yes, you can use this React component guide to establish code organization standards and documentation conventions, providing a clear reference to standard practices and patterns for frontend work.

Related Skills

Explore More Software Engineering Skills→
magic3007magic3007
10

web-artifacts-builder

Bundle React, Tailwind CSS, and shadcn/ui artifacts into a single HTML file.

Community
Advanced
invariantlabs-aiinvariantlabs-ai
2.9k

web-artifacts-builder

Initialize and bundle React, Tailwind, and shadcn/ui projects into self-contained HTML artifacts.

Official
Advanced
BarryrnBarryrn

frontend-eng

Standardize React frontend architecture, state management, and data fetching patterns.

Community
Basic
leksaleksa

vuejs-development

Guide frontend developers in building Vue.js 3 applications with the Composition API.

Community
Advanced