toss-frontend-fundamentals

📁 leekensei/agent-skills 📅 Jan 30, 2026
10
总安装量
10
周安装量
#30848
全站排名
安装命令
npx skills add https://github.com/leekensei/agent-skills --skill toss-frontend-fundamentals

Agent 安装分布

opencode 7
gemini-cli 7
codex 7
claude-code 6
github-copilot 6
kimi-cli 6

Skill 文档

Toss Frontend Fundamentals

“좋은 프론트엔드 코드는 변경하기 쉬운 코드다”

언제 이 스킬을 사용하는가

  • 프론트엔드 코드 리뷰 요청 시
  • 새로운 컴포넌트/함수 작성 시
  • 기존 코드 리팩토링 시
  • “코드 품질”, “클린 코드”, “개선” 관련 요청 시

4가지 핵심 기준

기준 설명 영향도
가독성 코드를 얼마나 빠르게 이해할 수 있는가 CRITICAL
예측 가능성 함수/컴포넌트가 예상대로 동작하는가 HIGH
응집도 함께 수정될 코드가 함께 있는가 HIGH
결합도 코드 수정 시 영향 범위가 적절한가 MEDIUM

규칙 목록

가독성 (Readability) – 8개 규칙

맥락 줄이기

규칙 ID 규칙 상세
readability-context-separate-code-paths 같이 실행되지 않는 코드 분리하기 상세
readability-context-abstract-implementation 구현 상세 추상화하기 상세
readability-context-split-by-logic-type 로직 종류에 따라 함수 쪼개기 상세

이름 붙이기

규칙 ID 규칙 상세
readability-naming-complex-conditions 복잡한 조건에 이름 붙이기 상세
readability-naming-magic-numbers 매직 넘버에 이름 붙이기 상세

위에서 아래로 읽히게 하기

규칙 ID 규칙 상세
readability-flow-reduce-time-travel 시점 이동 줄이기 상세
readability-flow-simplify-ternary 삼항 연산자 단순하게 하기 상세
readability-flow-left-to-right 왼쪽에서 오른쪽으로 읽히게 하기 상세

예측 가능성 (Predictability) – 3개 규칙

규칙 ID 규칙 상세
predictability-unique-names 이름 겹치지 않게 관리하기 상세
predictability-consistent-return-types 같은 종류의 함수는 반환 타입 통일하기 상세
predictability-expose-hidden-logic 숨은 로직 드러내기 상세

응집도 (Cohesion) – 3개 규칙

규칙 ID 규칙 상세
cohesion-colocate-modified-files 함께 수정되는 파일을 같은 디렉토리에 두기 상세
cohesion-eliminate-magic-numbers 매직 넘버 없애기 상세
cohesion-form-structure 폼의 응집도 생각하기 상세

결합도 (Coupling) – 3개 규칙

규칙 ID 규칙 상세
coupling-single-responsibility 책임을 하나씩 관리하기 상세
coupling-allow-duplication 중복 코드 허용하기 상세
coupling-eliminate-props-drilling Props Drilling 지우기 상세

사용 방법

코드 리뷰 시

  1. 위 4가지 기준 순서대로 검토
  2. 위반 사항 발견 시 해당 규칙 파일 참조하여 구체적 피드백 제공
  3. 개선 코드 예시 함께 제시

새 코드 작성 시

  1. 가독성 우선: 맥락 최소화, 명확한 이름
  2. 예측 가능하게: 일관된 패턴 사용
  3. 응집도 고려: 관련 코드 함께 배치
  4. 결합도 낮추기: 책임 분리

트레이드오프

4가지 기준을 모두 만족하기 어려울 때는 트레이드오프 가이드 참조.

일반적인 우선순위: 가독성 > 예측 가능성 > 응집도 > 결합도

ì°¸ê³