Code Quality Specialist Skill

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

Agent Skills: Code Quality Specialist

Install this agent skill to your local

Skill Files