code-style

Enforce code style and formatting preferences. Use when writing or reviewing code to ensure consistent style.

$ 설치

git clone https://github.com/legacy3/wowlab /tmp/wowlab && cp -r /tmp/wowlab/.claude/skills/code-style ~/.claude/skills/wowlab

// tip: Run this command in your terminal to install the skill


name: code-style description: Enforce code style and formatting preferences. Use when writing or reviewing code to ensure consistent style.

Code Style

Project code style and formatting rules.

Control Flow

Always use brackets for control flow statements. Never single-line without braces.

Wrong

if (condition) return early;

if (x) doSomething();
else doOther();

for (const item of items) process(item);

Right

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

  1. Search hooks/ for existing React hooks
  2. Search utils/ for utility functions
  3. Search atoms/utils/ for Jotai helpers
  4. Check if a service already provides the functionality
  5. 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 // @deprecated and 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, _deprecated suffixes
  • // TODO: remove after migration
  • Unused exports
  • Dead code paths
  • Backwards-compat shims

When Refactoring

  1. Delete the old implementation
  2. Write the new implementation
  3. Update all call sites
  4. 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

{
  value.toLocaleString();
}
{
  new Date(date).toLocaleDateString();
}
{
  `${duration}ms`;
}
{
  (percent * 100).toFixed(1) + "%";
}

Right

import {
  formatInt,
  formatRelativeToNow,
  formatDurationMs,
  formatPercent,
} from "@/lib/format";

{
  formatInt(value);
}
{
  formatRelativeToNow(date);
}
{
  formatDurationMs(duration);
}
{
  formatPercent(percent);
}

Available Formatters

FunctionUse For
formatIntLarge integers with commas
formatCompactAbbreviated numbers (1.2M)
formatPercentPercentages
formatNumberSpell description numbers
formatRelativeToNowRelative time ("2h ago")
formatDateFormatted dates
formatDurationMsMillisecond durations
formatDurationSecondsSecond durations

Instructions

When writing or reviewing code:

  1. Check control flow has brackets
  2. Search for existing utilities before creating new ones
  3. Delete obsolete code, don't deprecate
  4. Remove legacy patterns, don't maintain them
  5. Keep codebase lean - when in doubt, delete
  6. Use @/lib/format for all number/date/duration formatting