菜单
Scaffold new hooks/components/utilities. Generate standard structure and boilerplate. Use when creating new hooks, components, utilities.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Design React APIs and abstractions in a React-like way. Covers declarative interfaces, lifecycle-safe abstractions, minimal surfaces, zero-dependency bias, type safety, and documentation.
Review React hooks against design philosophy. Checks return values, SSR safety, state design, effect usage, TypeScript patterns, and performance.
Write React hooks following design philosophy. Covers naming, return values, SSR safety, state design, effect patterns, TypeScript, and performance.
Create branches following repo conventions. Use when creating branches, starting new features.
PR/code review. 100% coverage, SSR safety, JSDoc validation. Use when reviewing code, checking PRs.
Create commits following repo conventions. Use when committing changes, creating commit messages.
| name | scaffolder |
| description | Scaffold new hooks/components/utilities. Generate standard structure and boilerplate. Use when creating new hooks, components, utilities. |
| allowed-tools | Read, Write, Edit, Bash, Glob, Grep |
Creates new hooks, components, and utilities with a standard structure.
/scaffolder useNewHook # Create a hook
/scaffolder MyComponent # Create a component
/scaffolder myUtil # Create a utility
src/{type}/{name}/
├── {name}.ts # Implementation
├── {name}.spec.ts # Tests
└── index.ts # Export
/**
* @description Hook description.
* @param {T} param - Parameter description.
* @returns {T} Return description.
* @example
* const result = useHookName(input);
*/
export function useHookName<T>(param: T): T {
// implementation
}
import { renderHook } from '@testing-library/react';
import { renderHookSSR } from '../../_internal/test-utils/renderHookSSR.tsx';
describe('useHookName', () => {
it('is safe on server side rendering', () => {
const result = renderHookSSR.serverOnly(() => useHookName('test'));
expect(result.current).toBeDefined();
});
it('works correctly', () => {
const { result } = renderHook(() => useHookName('test'));
expect(result.current).toBe('test');
});
});