mcpField
R
readability

readability

github.com/toss開発2.0k53 回インストール34 週間前に更新
リポジトリ

readability について

フロントエンド開発者向けに、コードの意図を読み取りやすくするパターンを示すスキルです。排他的な分岐の分離、複雑な条件への命名、過度な抽象化の回避を扱います。

主な機能

  1. 01同時に実行されないロジックを分離
  2. 02複雑な条件に意図を表す名前を付与
  3. 03ネストした三項演算子をifや早期returnに置換
  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 対応