skills.rest
Staysr
StaysrCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

react

Guide React component development with routing and layout patterns.

Updated Mar 2, 2026
Search Tags:#ui#layout#frontend#react#routing#component-development
One-click install
npx skills add https://github.com/Staysr/lobe-windos-build --skill react-staysr
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react
Source: https://github.com/Staysr/lobe-windos-build/tree/main/.agents/skills/react
Command: npx skills add https://github.com/Staysr/lobe-windos-build --skill react-staysr

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Streamline and standardize React component development by providing clear guidelines for UI composition, routing, and layout using Lobehub UI libraries.

Core Features & Use Cases

  • UI Component Guidance: Best practices for building reusable React components with inline styles or library components like @lobehub/ui.
  • Routing & Layout: Strategies for Next.js App Router and React Router DOM hybrid routing, plus layout composition using Flexbox and Center.
  • Use Case: When starting a new frontend feature, follow this guide to scaffold a component, wire a route, and apply consistent layout.

Quick Start

Create a new React component utilizing the shared UI components and register a route in the project's router.

Frequently Asked Questions about react

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

FAQPage Schema
How do I implement hybrid routing with Next.js App Router and React Router DOM?▼

Build reusable React components by applying best practices for UI composition, utilizing @lobehub/ui library components, and implementing layout-kit Flexbox or Center for cohesive interfaces.

How do I implement hybrid routing with Next.js App Router and React Router DOM?▼

Implement hybrid routing by following structured strategies that integrate Next.js App Router with React Router DOM, ensuring cohesive navigation patterns and proper route wiring in real-world projects.

What's the best way to scaffold a new frontend feature with React?▼

Scaffold a new frontend feature by following a structured guide to create a React component, wire a route in the project's router, and apply consistent layout composition for cohesive UI.

Does this guide support building layouts with Flexbox and Center?▼

Yes, this guide supports building layouts by providing composition strategies using layout-kit Flexbox and Center to ensure consistent UI patterns across your React application.

Why use a structured guide for React component development?▼

Use a structured guide to solve the problem of inconsistent React component development, ensuring cohesive UI composition, standardized routing, and uniform layout patterns across your project.

Can I use @lobehub/ui components for my React frontend features?▼

Yes, you can use @lobehub/ui components when building React frontend features, as the guide provides specific best practices for incorporating these library components into your UI.

Related Skills

Explore More Software Engineering Skills→
rafek1241rafek1241

react

Create and route React components with @lobehub/ui and hybrid routing.

Community
Intermediate
leonanpereirapintoleonanpereirapinto
1

a11y-testing

Automate WCAG accessibility checks with jest-axe and Playwright axe-core.

Community
Advanced
alceupassosalceupassos

react

Guide React UI development with LobeHub component conventions and styling.

Community
Intermediate
mrodrigues1mrodrigues1

web-component-design

Design reusable, accessible UI component libraries for React, Vue, or Svelte.

Community
Advanced