skills.rest
amaledtuning
amaledtuningCOMMUNITY
Explore all skills by this author →
GitHub

react

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

Updated Apr 21, 2026
Search Tags:#typescript#ui#frontend#react#routing#component#design-system
One-click install
npx skills add https://github.com/amaledtuning/CODEX_Skills --skill react-amaledtuning
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react
Source: https://github.com/amaledtuning/CODEX_Skills/tree/main/skills/react
Command: npx skills add https://github.com/amaledtuning/CODEX_Skills --skill react-amaledtuning

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Provides a structured guide for building React components, aligning UI patterns, and integrating routing and design system components to improve consistency and productivity.

Core Features & Use Cases

  • Establishes a component development workflow, including layout strategies, component priority, and usage of @lobehub/ui components.
  • Guides routing architecture decisions (Next.js App Router or React Router) and code organization for scalable frontends.
  • References Flexbox-based layouts guidance from the layout-kit to accelerate UI composition.

Quick Start

Create a new React component page that uses Flexbox layout with Center and a Button from @lobehub/ui, following the routing conventions described.

Frequently Asked Questions about react

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

FAQPage Schema
How do I scaffold a React component using TypeScript and @lobehub/ui?▼

You can scaffold a React component by following the structured development workflow provided, which enforces UI patterns and integrates @lobehub/ui components to ensure consistency. This guide automates TS/TSX file creation and layout strategies.

What is the best way to structure routing architecture for Next.js App Router?▼

The best way to structure Next.js App Router routing is by applying the architectural decisions and code organization guidelines defined here. It enforces routing conventions and aligns component layouts across your application to ensure scalable frontends.

Does this React component guide work with React Router?▼

Yes, this React component guide works with React Router. It explicitly guides routing architecture decisions and code organization for both Next.js apps and React Router-based interfaces to ensure scalable frontend development.

How do I create a Flexbox layout for a new UI component?▼

To create a Flexbox layout for a UI component, you reference the layout-kit guidance to accelerate UI composition. This approach uses Flexbox-based layouts with components like Center and Button from @lobehub/ui.

Do I need TypeScript to use this React component development guide?▼

Yes, you need TypeScript to use this React component development guide. It requires TS/TSX support in your React project structure to properly enforce UI patterns and align design system components.

Related Skills

Explore More Software Engineering Skills→
arthtyagiarthtyagi
1

react-best-practices

Review React and Next.js TSX files for performance, accessibility, hook, and component-pattern issues.

Community
Advanced
ArieGoldkinArieGoldkin
10

react-server-components-framework

Design React Server Components with Next.js 15 App Router.

Community
Basic
cute-baobaocute-baobao

react

Create consistent React components with Lobehub UI layouts and routing.

Community
Intermediate
bluefishsbluefishs

React UI 模式技能

Standardize React and Ant Design UI development with functional components and hooks.

Community
Intermediate