메뉴
React library public API design principles. Use when designing hooks, components, or utility APIs.
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 | library-api-design |
| description | React library public API design principles. Use when designing hooks, components, or utility APIs. |
| allowed-tools | Read, Glob, Grep |
// Single value
function useDebounce<T>(value: T, delay: number): T;
// Tuple (state + action)
function useToggle(init = false): [boolean, () => void];
// Object (3 or more fields)
function usePagination(): { page; nextPage; prevPage };
// Required first, optional last
function useDebounce<T>(
value: T, // required
delay: number, // required
options?: {...} // optional
): T
// ✅ SSR-safe
export function useMediaQuery(query: string): boolean {
const [matches, setMatches] = useState(() => {
if (typeof window === 'undefined') return false;
return window.matchMedia(query).matches;
});
}
// ✅ Named exports only
export { useDebounce } from './useDebounce';
// ❌ Default export
export default useDebounce;