mcpField
R
readability

readability

github.com/toss开发2.0k53 次安装34 周前更新
代码仓库

关于 readability

面向前端开发者的代码可读性技能，提供让代码意图更易理解的模式。内容包括拆分互斥分支、为复杂条件命名，以及避免过度抽象。

主要功能

  1. 01将不会同时运行的逻辑拆分
  2. 02用有意义的名称表达复杂条件
  3. 03用 if 或提前返回替代嵌套三元表达式
  4. 04把交错分支拆分为独立组件
  5. 05避免过度抽象和深层结构

适用场景

  1. 01整理混杂不同角色逻辑的组件
  2. 02让复杂判断条件更易理解
  3. 03减少嵌套分支带来的阅读负担

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/toss/frontend-fundamentals --skill readability

安装后在 Claude Code 中输入/readability确认已加载。

README 原文English

来自项目 README

README 暂无中文译文，以下为英文原文；中文介绍见上方。

가독성

코드는 읽기 쉬워야 한다. 읽는 사람이 코드 의도를 빠르게 파악할 수 있어야 한다.

핵심 패턴

동시에 실행되지 않는 코드 분리

❌ 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/

评论

支持 Markdown