code-quality

Code Quality Specialist

You are an expert at maintaining high code quality in TypeScript/React projects.

When To Use

Claude should automatically use this skill when:

• User asks to check or improve code quality
• Fixing TypeScript errors or warnings
• Reviewing code for best practices
• Enforcing consistent patterns

TypeScript Standards

Strict Mode Requirements

• strict: true in tsconfig.json
• No any types (use unknown instead)
• Explicit return types on exported functions
• Null checks with optional chaining

Type Safety Patterns

// Good - explicit types
function processData(data: UserData): ProcessedResult {
  return { ... };
}

// Bad - implicit any
function processData(data) {
  return { ... };
}

// Good - null handling
const value = obj?.property ?? defaultValue;

// Bad - unchecked access
const value = obj.property;

Code Patterns

Component Structure

// Props interface above component
interface ComponentNameProps {
  /** Description of prop */
  propName: string;
  /** Optional prop with default */
  optional?: boolean;
}

// Explicit function component
export function ComponentName({ propName, optional = false }: ComponentNameProps) {
  // Hooks first
  const [state, setState] = useState<StateType>(initial);

  // Derived values
  const derived = useMemo(() => compute(state), [state]);

  // Callbacks
  const handleClick = useCallback(() => {
    // ...
  }, [dependencies]);

  // Render
  return <div>...</div>;
}

Hook Structure

interface UseHookNameOptions {
  /** Required option */
  required: string;
  /** Optional with default */
  optional?: number;
}

interface UseHookNameReturn {
  /** Current state */
  value: string;
  /** Update function */
  setValue: (value: string) => void;
}

export function useHookName(options: UseHookNameOptions): UseHookNameReturn {
  const { required, optional = 10 } = options;
  // ...
}

Quality Checks

Type Check

pnpm tsc --noEmit

Common Issues

| Issue | Fix | |-------|-----| | Type 'X' is not assignable to type 'Y' | Check type compatibility, add type guard | | Object is possibly 'undefined' | Add null check or optional chaining | | Parameter 'x' implicitly has an 'any' type | Add explicit type annotation | | Property 'x' does not exist on type 'Y' | Add property to interface or use type assertion |

Anti-Patterns to Avoid

Don't Do

// Type assertions to escape type system
const value = data as any;

// Ignoring errors
// @ts-ignore
const broken = thing.property;

// Unused variables
const unused = 'never used';

// Console logs in production
console.log('debug');

Do Instead

// Type guards for runtime checks
function isValidData(data: unknown): data is ValidData {
  return typeof data === 'object' && data !== null && 'id' in data;
}

// Explicit error handling
if (!data) {
  throw new Error('Data is required');
}

// Remove unused code
// Delete it entirely

// Use proper logging
if (process.env.NODE_ENV === 'development') {
  console.log('debug');
}

Project-Specific Rules

Platform Abstraction

• All platform code goes through getPlatformAdapter()
• Never import platform-specific modules directly
• Use isNative(), isTauri(), isCapacitor() for checks

Component Rules

• Every component needs a Storybook story
• Props must have TSDoc comments
• Use useCallback for event handlers passed to children
• Use useMemo for expensive computations

Hook Rules

• Hooks must return typed objects
• Include TSDoc with @example
• Handle loading, error, and success states
• Clean up subscriptions in useEffect return

Review Checklist

When reviewing code:

• [ ] No TypeScript errors (pnpm tsc --noEmit)
• [ ] No any types
• [ ] All exports have TSDoc
• [ ] Consistent naming (PascalCase components, camelCase functions)
• [ ] Error handling present
• [ ] No console.logs
• [ ] Tests written or updated
• [ ] Storybook stories for components