Code Style
Project code style and formatting rules.
Control Flow
Always use brackets for control flow statements. Never single-line without braces.
Wrong
ts
if (condition) return early; if (x) doSomething(); else doOther(); for (const item of items) process(item);
Right
ts
if (condition) {
return early;
}
if (x) {
doSomething();
} else {
doOther();
}
for (const item of items) {
process(item);
}
DRY - Don't Repeat Yourself
Always check for existing utilities before creating new ones.
Before Writing New Code
- •Search
hooks/for existing React hooks - •Search
utils/for utility functions - •Search
atoms/utils/for Jotai helpers - •Check if a service already provides the functionality
- •Look for similar patterns in the codebase
If Similar Code Exists
- •Extend the existing utility
- •Extract common logic into shared function
- •Don't duplicate - refactor
No Backwards Compatibility
Prefer breaking and remaking over maintaining legacy support.
Do
- •Delete obsolete code entirely
- •Rename things to be correct, update all usages
- •Remove deprecated APIs immediately
- •Refactor aggressively when improving
Don't
- •Keep old function signatures "for compatibility"
- •Add
// @deprecatedand leave code around - •Maintain multiple ways to do the same thing
- •Add shims or adapters for old patterns
- •Comment out code "in case we need it"
No Legacy Code
Remove, don't preserve.
Signs of Legacy Code to Remove
- •Commented-out code blocks
- •Functions with
_old,_legacy,_deprecatedsuffixes - •
// TODO: remove after migration - •Unused exports
- •Dead code paths
- •Backwards-compat shims
When Refactoring
- •Delete the old implementation
- •Write the new implementation
- •Update all call sites
- •Don't provide migration period
Code Cleanup Rules
- •Delete unused imports immediately
- •Remove empty files
- •Delete unused variables (not just prefix with
_) - •Remove console.log statements
- •Clean up TODO comments by doing them or removing them
Formatting - Use Utilities
Always use @/lib/format instead of manual formatting.
Wrong
tsx
{
value.toLocaleString();
}
{
new Date(date).toLocaleDateString();
}
{
`${duration}ms`;
}
{
(percent * 100).toFixed(1) + "%";
}
Right
tsx
import {
formatInt,
formatRelativeToNow,
formatDurationMs,
formatPercent,
} from "@/lib/format";
{
formatInt(value);
}
{
formatRelativeToNow(date);
}
{
formatDurationMs(duration);
}
{
formatPercent(percent);
}
Available Formatters
| Function | Use For |
|---|---|
formatInt | Large integers with commas |
formatCompact | Abbreviated numbers (1.2M) |
formatPercent | Percentages |
formatNumber | Spell description numbers |
formatRelativeToNow | Relative time ("2h ago") |
formatDate | Formatted dates |
formatDurationMs | Millisecond durations |
formatDurationSeconds | Second durations |
Instructions
When writing or reviewing code:
- •Check control flow has brackets
- •Search for existing utilities before creating new ones
- •Delete obsolete code, don't deprecate
- •Remove legacy patterns, don't maintain them
- •Keep codebase lean - when in doubt, delete
- •Use
@/lib/formatfor all number/date/duration formatting