React

Skill ulpi-io/plugin-marketplace/plugins/lobehub/skills/react

A curated collection of 7,800+ agent skills for Claude Desktop, sourced from skills.sh

Install

npx -y skills add ulpi-io/plugin-marketplace --skill react

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
1 stars1 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

React component development guide. Use when working with React components (.tsx files), creating UI, using @lobehub/ui components, implementing routing, or building frontend features. Triggers on React component creation, modification, layout implementation, or navigation tasks.

SKILL.md

2.7 KB, as published. Nobody here has run it

React Component Writing Guide

Use antd-style for complex styles; for simple cases, use inline style attribute
Use Flexbox and Center from @lobehub/ui for layouts (see references/layout-kit.md)
Component priority: src/components > installed packages > @lobehub/ui > antd
Use selectors to access zustand store data

@lobehub/ui Components

If unsure about component usage, search existing code in this project. Most components extend antd with additional props.

Reference: node_modules/@lobehub/ui/es/index.mjs for all available components.

Common Components:

General: ActionIcon, ActionIconGroup, Block, Button, Icon
Data Display: Avatar, Collapse, Empty, Highlighter, Markdown, Tag, Tooltip
Data Entry: CodeEditor, CopyButton, EditableText, Form, FormModal, Input, SearchBar, Select
Feedback: Alert, Drawer, Modal
Layout: Center, DraggablePanel, Flexbox, Grid, Header, MaskShadow
Navigation: Burger, Dropdown, Menu, SideNav, Tabs

Routing Architecture

Hybrid routing: Next.js App Router (static pages) + React Router DOM (main SPA).

Route Type	Use Case	Implementation
Next.js App Router	Auth pages (login, signup, oauth)	`src/app/[variants]/(auth)/`
React Router DOM	Main SPA (chat, settings)	`desktopRouter.config.tsx`

Key Files

Entry: src/spa/entry.web.tsx (web), src/spa/entry.mobile.tsx, src/spa/entry.desktop.tsx
Desktop router: src/spa/router/desktopRouter.config.tsx
Mobile router: src/spa/router/mobileRouter.config.tsx
Router utilities: src/utils/router.tsx

Router Utilities

import { dynamicElement, redirectElement, ErrorBoundary } from '@/utils/router';

element: dynamicElement(() => import('./chat'), 'Desktop > Chat');
element: redirectElement('/settings/profile');
errorElement: <ErrorBoundary resetPath="/chat" />;

Navigation

Important: For SPA pages, use Link from react-router-dom, NOT next/link.

// ❌ Wrong
import Link from 'next/link';
<Link href="/">Home</Link>;

// ✅ Correct
import { Link } from 'react-router-dom';
<Link to="/">Home</Link>;

// In components
import { useNavigate } from 'react-router-dom';
const navigate = useNavigate();
navigate('/chat');

// From stores
const navigate = useGlobalStore.getState().navigate;
navigate?.('/settings');