predictability
Use when getX()나 fetchX()에 숨은 부수 효과가 있거나, 같은 종류의 함수들이 서로 다른 반환 타입을 가지거나, 함수 이름과 실제 동작이 다를 때
- Installs
- 51
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/toss/frontend-fundamentals --skill predictability- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads predictability automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
예측 가능성
함수는 이름이 암시하는 대로 동작해야 한다. 숨겨진 동작이 없어야 한다.
핵심 패턴
숨은 로직 드러내기
❌ fetch 함수에 숨은 부수 효과:
async function fetchBalance(): Promise<number> {
const balance = await http.get<number>("...");
logging.log("balance_fetched"); // 숨은 부수 효과!
return balance;
}
✅ 부수 효과는 호출부에서 명시적으로:
async function fetchBalance(): Promise<number> {
return await http.get<number>("...");
}
const balance = await fetchBalance();
logging.log("balance_fetched");
반환 타입 통일
❌ 같은 종류인데 반환 타입 다름:
function checkIsNameValid(name: string) {
return name.length > 0; // boolean
}
function checkIsAgeValid(age: number) {
if (age < 18) return { ok: false, reason: "18세 이상" };
return { ok: true }; // 객체
}
✅ Discriminated Union으로 통일:
type ValidationResult = { ok: true } | { ok: false; reason: string };
function checkIsNameValid(name: string): ValidationResult {
if (name.length === 0) return { ok: false, reason: "이름 필수" };
return { ok: true };
}
function checkIsAgeValid(age: number): ValidationResult {
if (age < 18) return { ok: false, reason: "18세 이상" };
return { ok: true };
}
빠른 참조
| 코드 냄새 | 개선 방법 |
|---|---|
getX()에 부수 효과 | 순수 getter와 action 분리 |
calculateX()가 저장함 | calculateAndSaveX()로 이름 변경 또는 분리 |
| 같은 종류인데 반환 타입 다름 | Discriminated Union: { ok: true } | { ok: false; reason } |
| 라이브러리 이름과 겹침 | 구분되는 이름 사용: http → httpService |
주의사항
- 부수 효과를 제거하지 말고 명시적 위치로 이동
- 지나치게 복잡한 타입 피하기
- 기존 API 계약 유지
참고: https://frontend-fundamentals.com/code-quality/predictable/
FAQ
What does the predictability skill do?
Use when getX()나 fetchX()에 숨은 부수 효과가 있거나, 같은 종류의 함수들이 서로 다른 반환 타입을 가지거나, 함수 이름과 실제 동작이 다를 때
How do I install predictability?
Run npx skills add https://github.com/toss/frontend-fundamentals --skill predictability in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/predictability/ (personal) or .claude/skills/predictability/ (project).
Which AI agents can use predictability?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is predictability safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains predictability?
It is published by toss in toss/frontend-fundamentals. It has 51 recorded installs.
More from toss/frontend-fundamentals
coupling
toss/frontend-fundamentals
Use when props가 3개 이상 컴포넌트 계층을 통과하거나, 하나의 Hook이 5개 이상 값을 반환하거나, A 수정 시 관련 없는 B가 깨질 때
readability
toss/frontend-fundamentals
Open the skill to read its SKILL.md instructions.
cohesion
toss/frontend-fundamentals
Use when 한 기능 수정 시 여러 디렉토리를 건드리거나, 같은 숫자/상수가 여러 파일에 흩어져 있거나, import 경로가 ../../..처럼 길어질 때
Popular frontend & design skills
setup-matt-pocock-skills
mattpocock/skills
Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.
frontend-design
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
hyperframes-animation
heygen-com/hyperframes
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.
prototype
mattpocock/skills
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.
hyperframes-core
heygen-com/hyperframes
The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.
vercel-react-best-practices
vercel-labs/agent-skills
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.