Skill library api design

Skill toss/react-simplikit/.claude/skills/skill-library-api-design

React library public API design principles. Use when designing hooks, components, or utility APIs.From its SKILL.md

Install

npx -y skills add toss/react-simplikit --skill skill-library-api-design

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

SKILL.md

1.4 KB, as published. Nobody here has run it

Library API Design Guide

Core Principles

Simplicity first (Simple > Clever)
Maintain consistency
Tree-shaking friendly
Maximize TypeScript inference
Ensure SSR safety

Core Patterns

Hook Return Values

// 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 };

Parameters

// Required first, optional last
function useDebounce<T>(
  value: T,           // required
  delay: number,      // required
  options?: {...}     // optional
): T

SSR Safety

// ✅ SSR-safe
export function useMediaQuery(query: string): boolean {
  const [matches, setMatches] = useState(() => {
    if (typeof window === 'undefined') return false;
    return window.matchMedia(query).matches;
  });
}

Export

// ✅ Named exports only
export { useDebounce } from './useDebounce';

// ❌ Default export
export default useDebounce;

References

details.md - Component design, advanced patterns