rugged-gemini: Skill for Claude Code

TypeScript Idioms and Patterns

TS type system = documentation + test + specification. Encode domain invariants so invalid states are unrepresentable. Lean into the compiler.

Scope: TS-specific type system and language idioms. Quality commands: GEMINI.md § Code Completion Mandate. Logging: @.gemini/skills/logging-and-observability-principles/SKILL.md.

Framework Detection

When working on .ts/.tsx files, detect the project framework from imports and load the corresponding idiom skill:

Import Pattern	Framework	Load Skill
from 'vue', from 'pinia', from 'vue-router', from '@vueuse/*'	Vue 3	@.gemini/skills/vue-idioms/SKILL.md
from 'react', from 'react-dom', from '@reduxjs/*', from 'zustand'	React	@.gemini/skills/react-idioms/SKILL.md
from '@angular/core', from '@angular/*'	Angular	@.gemini/skills/angular-idioms/SKILL.md
from 'next', from 'next/*'	Next.js	@.gemini/skills/nextjs-idioms/SKILL.md

Framework-specific file types (.vue, .jsx) auto-activate their skills directly. This table covers .ts/.tsx files that use framework APIs (composables, hooks, stores, services).

Strict Mode — Non-Negotiable

{
  "compilerOptions": {
    "strict": true,
    "noUncheckedIndexedAccess": true,
    "exactOptionalPropertyTypes": true
  }
}

Never disable per-file without // STRICT-DISABLE: rationale comment.

Type System

1. unknown over any — always:

   // ✅ Forces narrowing
   function parse(data: unknown): User {
       if (!isUser(data)) throw new Error('Invalid user shape');
       return data;
   }
   
   // ❌ Disables type checker
   function parse(data: any): User { return data; }
   

2. readonly for immutability:

   interface TaskState {
       readonly id: string;
       readonly items: readonly Task[];
   }
   
   function process(tasks: readonly Task[]): Summary { ... }
   

3. Discriminated unions for state machines:

   type AsyncState<T> =
       | { status: 'idle' }
       | { status: 'loading' }
       | { status: 'success'; data: T }
       | { status: 'error'; error: Error };
   
   function render(state: AsyncState<User>): string {
       switch (state.status) {
           case 'idle':    return 'Waiting...';
           case 'loading': return 'Loading...';
           case 'success': return state.data.name;
           case 'error':   return state.error.message;
       }
   }