Create consistent React components with Lobehub UI layouts and routing.
npx skills add https://github.com/cute-baobao/pm --skill react-cute-baobao
Please help me install this Agent Skill. Skill: react Source: https://github.com/cute-baobao/pm/tree/main/.agents/skills/react Command: npx skills add https://github.com/cute-baobao/pm --skill react-cute-baobao
Writing React components consistently and integrating them with Lobehub UI while managing routing can be error-prone without a clear, shared guide. This Skill provides a structured approach to component structure, styling guidelines, and navigation patterns to reduce duplication and improve maintainability.
Open a React component file and apply the guide to ensure consistent structure, layout, and routing.
High-intent search queries and answers about installing and using this skill.
To build consistent React components with Lobehub UI, apply structured guidelines for component styling, prefer antd-like styles for complex visuals, and use inline styles for straightforward cases to improve maintainability.
The best way to structure responsive TSX layouts is using Flexbox and Center from @lobehub/ui. This approach ensures accessible composition and standardizes layout patterns across different project files.
Routing works by following recommended routing architectures and file organization conventions to simplify navigation. This structured approach reduces duplication and streamlines code reuse across project components.
Yes, you can use inline styles for straightforward component cases. The guidelines recommend preferring antd-like styles only for complex visuals, allowing inline styling for simpler UI elements to maintain clarity.
You need a SKILL.md frontmatter with name and description, plus a Markdown body containing actionable guidelines, when standardizing React component structure, layout, and routing across multiple projects.
You should use @lobehub/ui layout-kit because it provides standardized layout references for Flexbox and Center, ensuring responsive, accessible layouts and reducing integration errors when building new components.
amaledtuningScaffold React components and enforce UI patterns across Next.js and React Router projects.
TheBushidoCollectiveImplement file-based routing in Expo apps using Expo Router.
AutomatedMarketerDesigns accessible UI with shadcn/ui, Tailwind CSS, and canvas visuals.
1154761334Guide React component creation with @lobehub/ui and React Router DOM.
