Toss Frontend Fundamentals
"Good frontend code is easy to change code"
When to use this skill
- When requesting a frontend code review
- When writing a new component/function
- When refactoring existing code
- When requesting anything related to "code quality", "clean code", or "improvement"
4 Core Criteria
| Criterion |
Description |
Impact |
| Readability |
How quickly the code can be understood |
CRITICAL |
| Predictability |
Whether functions/components behave as expected |
HIGH |
| Cohesion |
Whether code that is modified together is located together |
HIGH |
| Coupling |
Whether the scope of impact when modifying code is appropriate |
MEDIUM |
Rule list
Readability - 8 rules
Reduce context
| Rule ID |
Rule |
Details |
readability-context-separate-code-paths |
Separate code that does not run together |
Details |
readability-context-abstract-implementation |
Abstract implementation details |
Details |
readability-context-split-by-logic-type |
Split functions by type of logic |
Details |
Naming
| Rule ID |
Rule |
Details |
readability-naming-complex-conditions |
Name complex conditions |
Details |
readability-naming-magic-numbers |
Name magic numbers |
Details |
Make it read from top to bottom
| Rule ID |
Rule |
Details |
readability-flow-reduce-time-travel |
Reduce context switching |
Details |
readability-flow-simplify-ternary |
Simplify ternary operators |
Details |
readability-flow-left-to-right |
Make it read from left to right |
Details |
Predictability - 3 rules
| Rule ID |
Rule |
Details |
predictability-unique-names |
Manage names to avoid collisions |
Details |
predictability-consistent-return-types |
Unify return types for functions of the same kind |
Details |
predictability-expose-hidden-logic |
Expose hidden logic |
Details |
Cohesion - 3 rules
| Rule ID |
Rule |
Details |
cohesion-colocate-modified-files |
Place files that are modified together in the same directory |
Details |
cohesion-eliminate-magic-numbers |
Eliminate magic numbers |
Details |
cohesion-form-structure |
Consider form cohesion |
Details |
Coupling - 3 rules
| Rule ID |
Rule |
Details |
coupling-single-responsibility |
Managing responsibilities one by one |
Details |
coupling-allow-duplication |
Allowing duplicate code |
Details |
coupling-eliminate-props-drilling |
Eliminating Props Drilling |
Details |
How to use
During code review
- Review in the order of the above 4 criteria
- When a violation is found, refer to the relevant rule file and provide specific feedback
- Also present an example of improved code
When writing new code
- Readability first: minimize context, clear names
- Make it predictable: use consistent patterns
- Consider cohesion: place related code together
- Lower coupling: separate responsibilities
Trade-offs
When it is difficult to satisfy all 4 criteria, trade-off guide refer to.
General priority: Readability > Predictability > Cohesion > Coupling
Reference
