skills.rest
lobehub
lobehubOFFICIAL
Explore all skills by this author →
Website𝕏@lobehubGitHub

react

Guide React component creation and routing for Next.js and React Router.

81.4k|15.8k|Updated May 21, 2023
Search Tags:#ui#react#routing#next.js#react-router#component-development
One-click install
npx skills add https://github.com/lobehub/lobehub --skill react-lobehub
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react
Source: https://github.com/lobehub/lobehub/tree/main/.agents/skills/react
Command: npx skills add https://github.com/lobehub/lobehub --skill react-lobehub

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill provides a structured guide to building and maintaining consistent React components, enabling teams to produce reusable UI consistently and align with the project's UI toolkit and routing conventions.

Core Features & Use Cases

  • Component Writing Guidelines: Standards for component naming, file structure, and styling when working with React components (.tsx) and the @lobehub/ui library.
  • UI Toolkit & Patterns: Guidance on using common UI primitives from @lobehub/ui (e.g., Button, Center, Flexbox) to accelerate development.
  • Routing & Architecture: Documentation of routing approaches for Next.js App Router and React Router DOM, including page and layout organization.
  • Use Case: Starting a new frontend feature, reference this guide to scaffold components, ensure layout consistency, and wire routes efficiently.

Quick Start

  • Create a new component under src/components, e.g., MyWidget.tsx.
  • Import layout primitives from @lobehub/ui to build a responsive UI.
  • Add a corresponding route using Next.js App Router or React Router DOM as appropriate.
  • Consult references/layout-kit.md for layout guidelines and best practices.

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 consistently across Next.js apps and SPAs?▼

Structure React components consistently by placing them under src/components, using .tsx file extensions, and importing layout primitives from @lobehub/ui to maintain naming and styling standards across Next.js and SPA projects.

What is the best way to use UI primitives when building React components?▼

The best way to use UI primitives is by importing common components like Button, Center, and Flexbox from the @lobehub/ui library. This accelerates component development and ensures layout consistency for your frontend features.

How do I wire routes using Next.js App Router and React Router DOM?▼

Wire routes by following the documented routing approaches for Next.js App Router and React Router DOM. This involves organizing your pages and layouts appropriately to ensure efficient routing architecture for your React application.

Can I use this guide to scaffold a new frontend feature in React?▼

Yes, you can use this guide to scaffold a new frontend feature in React. It helps you create components, ensure layout consistency by referencing layout guidelines, and wire routes efficiently using Next.js App Router or React Router DOM.

Do I need YAML frontmatter for React component development?▼

Yes, you need YAML frontmatter with a name and description for React component development. You can also reference optional scripts, references, and assets directories for extended tooling and layout best practices.

Related Skills

Explore More Software Engineering Skills→
datamonsterrdatamonsterr

react

Guide React component creation and routing in Next.js and React Router.

Community
Intermediate
moughamirmoughamir

cloudflare-worker-builder

Scaffold a Cloudflare Worker project with Hono routing and Static Assets.

Community
Intermediate
OpentronsOpentrons
515

react-component-creation

Create reusable React components with Opentrons-specific file structure and testing conventions.

Official
Intermediate
amaledtuningamaledtuning

react

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

Community
Intermediate