一键导入
toss-frontend-fundamentals
토스 Frontend Fundamentals 기반 코드 품질 가이드. 코드 리뷰, 새 코드 작성, 리팩토링 시 4가지 기준(가독성, 예측 가능성, 응집도, 결합도)으로 피드백 제공. 프론트엔드 코드 품질, 클린 코드, 코드 개선 요청 시 활성화.
用 Codex 或 Claude 帮你安装 复制这段 Prompt,粘贴到 Codex、Claude 或其他助手里,让它检查 Skill 页面并帮你完成安装。
菜单
토스 Frontend Fundamentals 기반 코드 품질 가이드. 코드 리뷰, 새 코드 작성, 리팩토링 시 4가지 기준(가독성, 예측 가능성, 응집도, 결합도)으로 피드백 제공. 프론트엔드 코드 품질, 클린 코드, 코드 개선 요청 시 활성화.
用 Codex 或 Claude 帮你安装 复制这段 Prompt,粘贴到 Codex、Claude 或其他助手里,让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
devops 모노레포의 servers/ 하위에 새로운 서버 프로젝트를 스캐폴딩하는 스킬. TypeScript + Express + pnpm workspace 기반의 표준 아키텍처를 즉시 생성. 새 서버 추가, 서버 프로젝트 생성, 서버 보일러플레이트, scaffold, 새 서비스 셋업 요청 시 반드시 이 스킬을 활성화. "새 서버 만들어줘", "서버 추가해줘", "boilerplate 만들어줘" 같은 요청에도 적극적으로 트리거.
devops 모노레포에서 PR을 생성하는 스킬. PR 제목을 feat/chore/refactor/fix/docs 등의 prefix와 함께 수정된 서버명을 [server] 형식으로 명시하고, description에는 상세 작업 목록을 bullet point로 작성. PR 작성, PR 생성, 풀 리퀘스트 만들기, GitHub PR, gh pr create 관련 요청 시 반드시 이 스킬을 활성화.
| name | toss-frontend-fundamentals |
| description | 토스 Frontend Fundamentals 기반 코드 품질 가이드. 코드 리뷰, 새 코드 작성, 리팩토링 시 4가지 기준(가독성, 예측 가능성, 응집도, 결합도)으로 피드백 제공. 프론트엔드 코드 품질, 클린 코드, 코드 개선 요청 시 활성화. |
| license | MIT |
| metadata | {"author":"toss","version":"1.0","source":"https://frontend-fundamentals.com"} |
"좋은 프론트엔드 코드는 변경하기 쉬운 코드다"
| 기준 | 설명 | 영향도 |
|---|---|---|
| 가독성 | 코드를 얼마나 빠르게 이해할 수 있는가 | CRITICAL |
| 예측 가능성 | 함수/컴포넌트가 예상대로 동작하는가 | HIGH |
| 응집도 | 함께 수정될 코드가 함께 있는가 | HIGH |
| 결합도 | 코드 수정 시 영향 범위가 적절한가 | MEDIUM |
맥락 줄이기
| 규칙 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 | 왼쪽에서 오른쪽으로 읽히게 하기 | 상세 |
| 규칙 ID | 규칙 | 상세 |
|---|---|---|
predictability-unique-names | 이름 겹치지 않게 관리하기 | 상세 |
predictability-consistent-return-types | 같은 종류의 함수는 반환 타입 통일하기 | 상세 |
predictability-expose-hidden-logic | 숨은 로직 드러내기 | 상세 |
| 규칙 ID | 규칙 | 상세 |
|---|---|---|
cohesion-colocate-modified-files | 함께 수정되는 파일을 같은 디렉토리에 두기 | 상세 |
cohesion-eliminate-magic-numbers | 매직 넘버 없애기 | 상세 |
cohesion-form-structure | 폼의 응집도 생각하기 | 상세 |
| 규칙 ID | 규칙 | 상세 |
|---|---|---|
coupling-single-responsibility | 책임을 하나씩 관리하기 | 상세 |
coupling-allow-duplication | 중복 코드 허용하기 | 상세 |
coupling-eliminate-props-drilling | Props Drilling 지우기 | 상세 |
4가지 기준을 모두 만족하기 어려울 때는 트레이드오프 가이드 참조.
일반적인 우선순위: 가독성 > 예측 가능성 > 응집도 > 결합도