Stats
Actions
Available In
Tags
Plugin
frontend-fundamentals
Refactor React, TypeScript, and JavaScript code to enforce frontend best practices: improve cohesion by grouping related files and constants, reduce coupling via composition, ensure predictability with unified returns and no side effects, and enhance readability by simplifying conditions and ternaries. Review git branch diffs against these principles.
What's Inside
Skills4
cohesion
/cohesion
Use when 한 기능 수정 시 여러 디렉토리를 건드리거나, 같은 숫자/상수가 여러 파일에 흩어져 있거나, import 경로가 `../../..`처럼 길어질 때
coupling
/coupling
Use when props가 3개 이상 컴포넌트 계층을 통과하거나, 하나의 Hook이 5개 이상 값을 반환하거나, A 수정 시 관련 없는 B가 깨질 때
predictability
/predictability
Use when `getX()`나 `fetchX()`에 숨은 부수 효과가 있거나, 같은 종류의 함수들이 서로 다른 반환 타입을 가지거나, 함수 이름과 실제 동작이 다를 때
readability
/readability
Use when 삼항 연산자가 중첩되거나, 복잡한 조건식 `a && !b || c`가 이름 없이 사용되거나, 동시에 실행되지 않는 코드가 한 컴포넌트에 섞여 있을 때
README
Frontend Fundamentals
Essential principles for frontend development
Frontend Fundamentals (FF) is a growing collection of essential principles for building reliable, maintainable, and accessible frontend applications. It helps you answer common but tricky questions like how to judge code quality, why bundling behaves differently in dev vs. production, how screen readers interpret your UI, and how to debug efficiently.
https://frontend-fundamentals.com/code-quality/en/
🧭 When to Use
- 🦨 When you're unsure about your code but find it hard to explain the issues logically
- 🧯 When you're trying to debug a persistent frontend bug and want to double-check your fundamentals
- 👥 When you're reviewing UI code for accessibility and want concrete do's and don'ts
- 🛠️ When your team is setting shared standards for clean, robust frontend code
📚 Collections
Contributing
Frontend Fundamentals (FF) is a community-driven project to establish standards for writing good code.
If you have a piece of code you're unsure about, post it on the GitHub Discussions page.
The community can provide diverse reviews of your code, helping you and others think critically about what makes good code.
Highly supported cases may even make it into the Frontend Fundamentals documentation. Contribution guidelines will be announced soon.
License
MIT © Viva Republica, Inc. See LICENSE for details.
Stats
Version1.0.0
LanguageTypeScript
Stars1,946
Forks199
Copy clicks16
MaintenanceFair
LicenseMIT
Last Commit
Added
Available In
Safety Signals
Caution
Uses power tools
Uses Bash, Write, or Edit tools
