skills.rest
gouravsingh311
gouravsingh311COMMUNITY
Explore all skills by this author →
GitHub

react

Standardize React component development with routing and zustand store conventions.

Updated Apr 2, 2026
Search Tags:#ui#frontend#react#routing#component#zustand
One-click install
npx skills add https://github.com/gouravsingh311/splice-app --skill react-gouravsingh311
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react
Source: https://github.com/gouravsingh311/splice-app/tree/main/.codex/skills/react
Command: npx skills add https://github.com/gouravsingh311/splice-app --skill react-gouravsingh311

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

React component development guide helps teams standardize building reusable components, reducing boilerplate and inconsistencies across projects.

Core Features & Use Cases

  • Provides conventions for UI composition, routing strategies, and component structure using @lobehub/ui and antd.
  • Guides integration with Next.js App Router and React Router DOM for hybrid apps.
  • Use case: when creating a new React component library or adding new pages, follow the guide to align with existing styles and routing patterns.

Quick Start

Create a new React component by following the guide to ensure consistent UI and routing integration.

Frequently Asked Questions about react

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

FAQPage Schema
How do I standardize React component structure across my team?▼

Standardize React component structure by applying front-end conventions for file organization, component priority, and UI composition using @lobehub/ui and antd. This reduces boilerplate and ensures consistent routing patterns across your projects.

What is the best way to integrate Next.js App Router with React Router DOM?▼

Integrate Next.js App Router with React Router DOM by following standardized routing strategies for hybrid apps. This approach guides routing patterns and ensures seamless page transitions and component rendering across both environments.

How do I configure zustand store access in a React component?▼

Configure zustand store access by applying standardized front-end conventions for state management within React components. This ensures predictable state updates and consistent data flow across your application.

Does this guide support building components with @lobehub/ui?▼

Yes, this guide fully supports building components with @lobehub/ui. It provides specific conventions for UI composition and styling, ensuring your new components align perfectly with existing design patterns.

When do I need standardized React routing patterns?▼

You need standardized React routing patterns when adding new pages or creating a component library in hybrid apps using Next.js and React Router. This prevents inconsistencies and ensures routing aligns with existing project structures.

Related Skills

Explore More Software Engineering Skills→
0xBigBoss0xBigBoss
53

react-best-practices

Guide React hooks, effects, and component design in .tsx/.jsx codebases.

Community
Intermediate
ed3daied3dai
5

programming-in-react

Plan, implement, and test React components with TypeScript and hooks.

Official
Intermediate
jscraikjscraik
8

react-ui-patterns

Provide React UI composition patterns for TypeScript, Tailwind CSS, and Radix UI.

Community
Advanced
brixtonphambrixtonpham

frontend-development

Consolidate frontend patterns for React, Vue, Svelte, and Angular with TypeScript.

Community
Advanced