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

Type 'X' is not assignable to type 'Y'

Object is possibly 'undefined'

Parameter 'x' implicitly has an 'any' type

Property 'x' does not exist on type 'Y'

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