react-expert by jeffallan/claude-skills
npx skills add https://github.com/jeffallan/claude-skills --skill react-expert资深 React 专家,在 React 19、服务器组件和生产级应用架构方面拥有深厚专业知识。
use() 的数据获取模式tsc --noEmit;如果失败,查看报告的错误,修复所有类型问题,并在继续之前重新运行直到通过根据上下文加载详细指导:
| 主题 | 参考 | 加载时机 |
|---|
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
| 服务器组件 | references/server-components.md | RSC 模式,Next.js App Router |
| React 19 | references/react-19-features.md | use() 钩子,useActionState,表单 |
| 状态管理 | references/state-management.md | Context,Zustand,Redux,TanStack |
| 钩子 | references/hooks-patterns.md | 自定义钩子,useEffect,useCallback |
| 性能 | references/performance.md | memo,lazy,虚拟化 |
| 测试 | references/testing-react.md | Testing Library,模拟 |
| 类迁移 | references/migration-class-to-modern.md | 将类组件转换为钩子/RSC |
// app/users/page.tsx — Server Component, no "use client"
import { db } from '@/lib/db';
interface User {
id: string;
name: string;
}
export default async function UsersPage() {
const users: User[] = await db.user.findMany();
return (
<ul>
{users.map((user) => (
<li key={user.id}>{user.name}</li>
))}
</ul>
);
}
useActionState 的 React 19 表单'use client';
import { useActionState } from 'react';
async function submitForm(_prev: string, formData: FormData): Promise<string> {
const name = formData.get('name') as string;
// perform server action or fetch
return `Hello, ${name}!`;
}
export function GreetForm() {
const [message, action, isPending] = useActionState(submitForm, '');
return (
<form action={action}>
<input name="name" required />
<button type="submit" disabled={isPending}>
{isPending ? '提交中…' : '提交'}
</button>
{message && <p>{message}</p>}
</form>
);
}
import { useState, useEffect } from 'react';
function useWindowWidth(): number {
const [width, setWidth] = useState(() => window.innerWidth);
useEffect(() => {
const handler = () => setWidth(window.innerWidth);
window.addEventListener('resize', handler);
return () => window.removeEventListener('resize', handler); // cleanup
}, []);
return width;
}
key 属性(稳定、唯一的标识符)实现 React 功能时,请提供:
React 19,服务器组件,use() 钩子,Suspense,TypeScript,TanStack Query,Zustand,Redux Toolkit,React Router,React Testing Library,Vitest/Jest,Next.js App Router,可访问性 (WCAG)
每周安装量
1.1K
仓库
GitHub 星标数
7.3K
首次出现
2026年1月21日
安全审计
安装于
opencode907
gemini-cli881
codex865
github-copilot831
cursor802
claude-code780
Senior React specialist with deep expertise in React 19, Server Components, and production-grade application architecture.
use()tsc --noEmit; if it fails, review reported errors, fix all type issues, and re-run until clean before proceedingLoad detailed guidance based on context:
| Topic | Reference | Load When |
|---|---|---|
| Server Components | references/server-components.md | RSC patterns, Next.js App Router |
| React 19 | references/react-19-features.md | use() hook, useActionState, forms |
| State Management | references/state-management.md | Context, Zustand, Redux, TanStack |
| Hooks | references/hooks-patterns.md | Custom hooks, useEffect, useCallback |
| Performance | references/performance.md |
// app/users/page.tsx — Server Component, no "use client"
import { db } from '@/lib/db';
interface User {
id: string;
name: string;
}
export default async function UsersPage() {
const users: User[] = await db.user.findMany();
return (
<ul>
{users.map((user) => (
<li key={user.id}>{user.name}</li>
))}
</ul>
);
}
useActionState'use client';
import { useActionState } from 'react';
async function submitForm(_prev: string, formData: FormData): Promise<string> {
const name = formData.get('name') as string;
// perform server action or fetch
return `Hello, ${name}!`;
}
export function GreetForm() {
const [message, action, isPending] = useActionState(submitForm, '');
return (
<form action={action}>
<input name="name" required />
<button type="submit" disabled={isPending}>
{isPending ? 'Submitting…' : 'Submit'}
</button>
{message && <p>{message}</p>}
</form>
);
}
import { useState, useEffect } from 'react';
function useWindowWidth(): number {
const [width, setWidth] = useState(() => window.innerWidth);
useEffect(() => {
const handler = () => setWidth(window.innerWidth);
window.addEventListener('resize', handler);
return () => window.removeEventListener('resize', handler); // cleanup
}, []);
return width;
}
key props correctly (stable, unique identifiers)When implementing React features, provide:
React 19, Server Components, use() hook, Suspense, TypeScript, TanStack Query, Zustand, Redux Toolkit, React Router, React Testing Library, Vitest/Jest, Next.js App Router, accessibility (WCAG)
Weekly Installs
1.1K
Repository
GitHub Stars
7.3K
First Seen
Jan 21, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
opencode907
gemini-cli881
codex865
github-copilot831
cursor802
claude-code780
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
102,200 周安装
| memo, lazy, virtualization |
| Testing | references/testing-react.md | Testing Library, mocking |
| Class Migration | references/migration-class-to-modern.md | Converting class components to hooks/RSC |