skills.rest
andershi666
andershi666COMMUNITY
Explore all skills by this author →
GitHub

react

Create standardized React components with defined libraries and routing patterns.

1|Updated Apr 14, 2026
Search Tags:#typescript#ui#frontend#react#routing#components#zustand
One-click install
npx skills add https://github.com/andershi666/lobehub-hr-demo --skill react-andershi666
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react
Source: https://github.com/andershi666/lobehub-hr-demo/tree/main/lobehub/.agents/skills/react
Command: npx skills add https://github.com/andershi666/lobehub-hr-demo --skill react-andershi666

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Streamlines React component development by providing consistent guidelines for structure, styling, routing, and UI composition, reducing guesswork and rework.

Core Features & Use Cases

  • Establishes a component development workflow with preferred libraries and patterns (e.g., @lobehub/ui primitives, Flexbox/Center layout, zustand selectors).
  • Guides routing and UI assembly for React-based features such as components, layouts, and navigation.
  • Real-world example: A new dashboard page built with React components following the guide.

Quick Start

Create a new React component following these conventions.

Frequently Asked Questions about react

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

FAQPage Schema
What is the best way to standardize React component creation and reduce architectural drift?▼

Standardizing React component creation involves applying consistent guidelines for styling, routing, and UI composition. This approach enforces specific UI primitives and state management selectors to reduce guesswork and prevent structural inconsistencies.

How do I structure React components using @lobehub/ui primitives and Flexbox layouts?▼

Structuring React components with @lobehub/ui primitives and Flexbox involves applying standardized layout patterns like Center for UI composition. This ensures robust visual alignment and enforces a consistent component development workflow.

Can I use zustand selectors for state management in my React dashboard components?▼

Yes, you can use zustand selectors to access store data in React dashboard components. This pattern ensures optimized rendering and aligns with standardized frontend guidelines for robust state management.

Does this React component guide support routing and UI assembly for TypeScript projects?▼

Yes, this React component guide supports routing and UI assembly for TypeScript projects. It applies across tasks involving component creation, styling, and navigation to streamline frontend feature development.

How to set up a new React dashboard page following strict UI composition conventions?▼

Setting up a React dashboard page requires following standardized guidelines for UI composition and layout patterns. This involves using designated UI primitives and zustand selectors to ensure the dashboard matches architectural expectations.

Related Skills

Explore More Software Engineering Skills→
vecearvecear

storybook-setup

Automate Storybook setup, configuration, and CSF3 story authoring for frontend projects.

Community
Intermediate
joshtoljoshtol
18

bundle-optimizer

Analyze JavaScript bundles and implement code splitting for the emotive-mascot platform.

Community
Advanced
mgd34msumgd34msu
4

jotai

Manage React state with atomic, derived, and async capabilities.

Community
Intermediate
its-Basudebaits-Basudeba
1

frontend-patterns

Provide architectural guidance and code patterns for React and Next.js development.

Community
Advanced