library-api-design
React library public API design principles. Use when designing hooks, components, or utility APIs.
Source facts
- Repository
- toss/react-simplikit
- Last source activity
- March 4, 2026 at 07:16
- Detected SKILL.md language
- English
- Stars
- 360
- Forks
- 78
Install options
The review-first prompt is selected by default. You can switch to a direct command or download a local copy.
Review the source files
Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.
File Explorer
2 filesShowing SKILL.md
SKILL.md
Source instructions · Read-only preview- name
- library-api-design
- description
- React library public API design principles. Use when designing hooks, components, or utility APIs.
- allowed-tools
- Read, Glob, Grep
# Library API Design Guide
## Core Principles
1. **Simplicity first** (Simple > Clever)
2. **Maintain consistency**
3. **Tree-shaking friendly**
4. **Maximize TypeScript inference**
5. **Ensure SSR safety**
## Core Patterns
### Hook Return Values
```typescript
// 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
```typescript
// Required first, optional last
function useDebounce<T>(
value: T, // required
delay: number, // required
options?: {...} // optional
): T
```
### SSR Safety
```typescript
// ✅ SSR-safe
export function useMediaQuery(query: string): boolean {
const [matches, setMatches] = useState(() => {
if (typeof window === 'undefined') return false;
return window.matchMedia(query).matches;
});
}
```
### Export
```typescript
// ✅ Named exports only
export { useDebounce } from './useDebounce';
// ❌ Default export
export default useDebounce;
```
## References
- [details.md](references/details.md) - Component design, advanced patterns
View on GitHub