Refactors React/TSX for readability: names complex conditions, separates exclusive code paths into components, simplifies nested ternaries.
How this skill is triggered — by the user, by Claude, or both
Slash command
/frontend-fundamentals:readabilityThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
코드는 읽기 쉬워야 한다. 읽는 사람이 코드 의도를 빠르게 파악할 수 있어야 한다.
코드는 읽기 쉬워야 한다. 읽는 사람이 코드 의도를 빠르게 파악할 수 있어야 한다.
❌ viewer/admin 로직이 한 컴포넌트에 섞임:
function SubmitButton() {
const isViewer = useRole() === "viewer";
useEffect(() => {
if (isViewer) return;
showButtonAnimation();
}, [isViewer]);
return isViewer ? (
<TextButton disabled>Submit</TextButton>
) : (
<Button type="submit">Submit</Button>
);
}
✅ 분기별로 분리:
function SubmitButton() {
const isViewer = useRole() === "viewer";
return isViewer ? <ViewerSubmitButton /> : <AdminSubmitButton />;
}
function ViewerSubmitButton() {
return <TextButton disabled>Submit</TextButton>;
}
function AdminSubmitButton() {
useEffect(() => { showButtonAnimation(); }, []);
return <Button type="submit">Submit</Button>;
}
❌ 조건이 무슨 뜻인지 바로 안 보임:
if (user.age >= 18 && !user.isBanned && user.emailVerified) { ... }
✅ 의도를 이름으로 표현:
const canPurchase = user.age >= 18 && !user.isBanned && user.emailVerified;
if (canPurchase) { ... }
| 코드 냄새 | 개선 방법 |
|---|---|
| 중첩된 삼항 연산자 | if문이나 early return 사용 |
복잡한 조건 a && !b || c | 의미있는 이름 붙이기: const canProceed = ... |
| 여러 분기가 교차됨 | 분기별로 별도 컴포넌트 분리 |
| 코드 위아래로 왔다갔다 | 조건을 한눈에 볼 수 있는 객체로 관리 |
참고: https://frontend-fundamentals.com/code-quality/readable/
npx claudepluginhub toss/frontend-fundamentals --plugin frontend-fundamentalsSimplifies code for clarity and maintainability without changing behavior, applying project standards and reducing unnecessary complexity.
Simplifies and refines code for clarity, consistency, and maintainability while preserving functionality. Applies project-specific best practices to recently modified code.
Simplifies code for clarity by reducing complexity while preserving exact behavior. Use when refactoring functional but hard-to-read code, during reviews, or for maintenance.