skills.rest
find-xposed-magisk
find-xposed-magiskCOMMUNITY
Explore all skills by this author →
GitHub

react

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

30|10|Updated Aug 5, 2024
Search Tags:#ui#frontend#react#routing#design-system#component-development
One-click install
npx skills add https://github.com/find-xposed-magisk/lobe-chat --skill react-find-xposed-magisk
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react
Source: https://github.com/find-xposed-magisk/lobe-chat/tree/main/.agents/skills/react
Command: npx skills add https://github.com/find-xposed-magisk/lobe-chat --skill react-find-xposed-magisk

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides structured guidelines for writing React components, aligning with UI library usage and routing practices to speed up frontend development and maintain consistency.

Core Features & Use Cases

  • Guided component creation: Follow standardized patterns for creating React components, layouts, and navigation.
  • UI library integration: Leverage @lobehub/ui components and design-system patterns.
  • Routing & architecture: Document hybrid routing approaches and key file structure for scalable apps like Next.js + React Router.
  • Use Case: When starting a new frontend feature, use this Skill to outline component structure, routing, and styling prerequisites.

Quick Start

Create a new React component following these guidelines and wire it into the app routes according to the described architecture.

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 for scalable frontend applications?▼

To structure React components for scalable apps, follow standardized patterns for file organization, entry points, and hybrid routing to maintain consistency and speed up UI development.

What is the best way to integrate @lobehub/ui components into a React project?▼

The best way to integrate @lobehub/ui components is by applying design-system patterns and structured component writing guidelines during creation to ensure seamless UI library usage.

How do I set up hybrid routing with Next.js and React Router?▼

Set up hybrid routing by documenting key file structures and architecture approaches that combine Next.js and React Router, ensuring scalable navigation for React projects.

Do I need a specific file structure when creating new React layouts?▼

Yes, a specific file structure is enforced. Following the layout-kit guide and SKILL.md ensures proper entry points, component creation, and layout prerequisites are met.

Can I use existing design-system patterns with this React component workflow?▼

Yes, you can leverage existing design-system patterns. The workflow integrates these patterns directly with @lobehub/ui components to streamline UI library integration.

Related Skills

Explore More Software Engineering Skills→
Ayub-KhanAyub-Khan

typescript-frontend

Scaffold TypeScript frontend applications for React, Next.js, and Vue.

Community
Intermediate
schuettcschuettc
1

setup-frontend

Automate Vite + React frontend setup and deployment to S3 with CloudFront via CDK.

Community
Advanced
patricio0312revpatricio0312rev
5

eslint-prettier-config

Configure ESLint and Prettier for TypeScript and React projects.

Community
Advanced
NoobyGainsNoobyGains
78

design-integration

Detect a project's design system and enforce its conventions for new UI components.

Community
Advanced