skills.rest
rafek1241
rafek1241COMMUNITY
Explore all skills by this author →
WebsiteGitHub

react

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

Updated Jan 15, 2026
Search Tags:#frontend#react#routing#zustand#component-development#ui-library
One-click install
npx skills add https://github.com/rafek1241/ai-copy-paste --skill react-rafek1241
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react
Source: https://github.com/rafek1241/ai-copy-paste/tree/main/.claude/skills/react
Command: npx skills add https://github.com/rafek1241/ai-copy-paste --skill react-rafek1241

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Developers often struggle to create consistent React components, apply standardized styling, and wire components into complex routing setups across projects.

Core Features & Use Cases

  • Component scaffolding with consistent styling using the @lobehub/ui library
  • Routing guidance for hybrid setups (Next.js App Router + React Router DOM)
  • Store access patterns with zustand and layout best practices

Quick Start

Create a new React component in src/components, wire it into the app routing, and verify layout using the UI kit.

Frequently Asked Questions about react

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

FAQPage Schema
How do I structure and style React components consistently?▼

Structure and style React components by scaffolding them with the @lobehub/ui library. This ensures consistent UI patterns across .tsx files while standardizing component architecture and integration workflows.

What is the best way to set up hybrid routing with Next.js App Router and React Router DOM?▼

Hybrid routing with Next.js App Router and React Router DOM is guided by structured layout patterns. The workflow ensures components are wired correctly into complex routing setups across your project.

How do I manage state in React using zustand?▼

Manage state in React using zustand by applying standardized store access patterns. This provides a documented workflow for integrating layout best practices and global state management.

Can I use this React workflow with .tsx files and existing layouts?▼

Yes, this React workflow applies to projects using .tsx files and existing layouts. It ensures frontmatter presence and provides a documented architecture for component usage and integration patterns.

Why do I need a documented workflow for React component development?▼

A documented workflow for React component development solves the struggle of creating inconsistent components. It standardizes styling, routing setups, and store access patterns across complex projects.

Related Skills

Explore More Software Engineering Skills→
lobehublobehub
81.4k

modal

Create and manage modal dialogs programmatically using createModal from @lobehub/ui.

Official
Intermediate
gouravsingh311gouravsingh311

react

Standardize React component development with routing and zustand store conventions.

Community
Intermediate
bahayonghangbahayonghang
16

frontend-engineer

Convert UI/UX designs into reusable React components with responsive layouts.

Community
Advanced
aliepratamaaliepratama

shadcn

Manage shadcn/ui component installation, updates, and documentation in frontend projects.

Community
Basic