code-quality

What this skill does

# 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
```typescript
// 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
```typescript
// 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
```typescript
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
```bash
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
```typescript
// 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
```typescript
// 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