Code skills
Seven skills that govern code generation and review. Each one loads automatically when its trigger phrasing matches the conversation. You don’t invoke them by name.
TypeScript
Section titled “TypeScript”Patterns and conventions for TypeScript across the project: camelCase identifiers, type over interface, explicit return types on exported functions, no enums, no switch, max three positional parameters, Zod’s z.literal() over z.enum(), and naming guidance modeled on Apple’s Swift API Design Guidelines.
Triggers when writing or reviewing TypeScript: typing exports, choosing between type and interface, defining Zod schemas, structuring function parameters, naming identifiers, or enforcing patterns like avoiding switch statements and enums.
Example phrasing: “type this Zod schema”, “should this be a type or an interface”, “name this hook better”.
Source: .claude/skills/typescript/SKILL.md.
React Code
Section titled “React Code”Conventions for React components, pages, routes, hooks, and forms. Includes pre-flight gates for useEffect, useCallback, and useState; a form-element check that swaps native <input> for the project’s Form/* components; and a translation gate that requires every user-visible string to come from t(). Covers component extraction thresholds and route/page architecture (app/routes/ thin shells, app/pages/ for UI).
Triggers when writing or reviewing React components, hooks (useEffect, useCallback, useState), event handlers, or component extraction decisions. Also triggers when debugging stale closures, infinite re-renders, or unnecessary re-renders caused by memoization issues.
Example phrasing: “this useEffect is firing twice”, “extract this section into its own component”, “wire up a Conform form for sign-up”.
Source: .claude/skills/react-code/SKILL.md.
Styling
Section titled “Styling”tailwind
Section titled “tailwind”Tailwind conventions: built-in scale first, rem for custom values (never px), twJoin for conditional classes, twMerge for caller-overridable defaults, Record<Variant, string> lookup tables for multi-class variants, role-based @theme token names that survive being prefixed with every utility (bg-, text-, border-, ring-, etc.).
Triggers when writing Tailwind class names, combining conditional classes, building component variants, choosing between twJoin and twMerge, defining @theme tokens, picking between rem and px, or working with responsive breakpoints.
Example phrasing: “this needs a hover variant”, “name this color token”, “should I use twJoin or twMerge here”.
Source: .claude/skills/tailwind/SKILL.md.
Skeleton Loaders
Section titled “Skeleton Loaders”Build skeleton loading states that are pixel-perfect matches of the real content. Uses real HTML elements (<p>, <span>, <h2>, <button>) with the same font classes plus a shared shimmer class for the gradient animation; non-text elements stay as empty <div>s. Includes the 200ms delay pattern that suppresses skeleton flash on fast loads.
Triggers when adding loading states, building skeletons for async data, handling pending loader states in route transitions, implementing the shimmer animation pattern, or preventing layout shift during data fetching.
Example phrasing: “add a skeleton for this profile card”, “the layout jumps when data loads”, “this skeleton flashes on fast loads”.
Source: .claude/skills/skeleton-loaders/SKILL.md.
Test Driven Development
Section titled “Test Driven Development”Based on Matt Pocock’s excellent TDD Skill, tailored for GAIA’s stack and conventions.
Test-driven development with a vertical-slice red-green-refactor loop. Treats horizontal slicing (write all tests first, then all code) as an antipattern. Tests verify behavior through public interfaces, not implementation details. Includes a per-cycle checklist and a planning step that asks for the public interface before writing the first red test.
It is automatically used by Claude when working in GAIA projects.
Triggers when building features or fixing bugs with TDD, mentioning “red-green-refactor”, asking for integration tests, or asking for test-first development.
Example phrasing: “let’s TDD this”, “write a red test for the login flow”, “I want a tracer bullet for the new endpoint”.
Source: .claude/skills/tdd/SKILL.md.
Playwright CLI
Section titled “Playwright CLI”Microsoft’s official Playwright CLI skill for browser automation.
Navigate, click, type, screenshot, manage cookies and storage, run multiple parallel sessions, and read element refs from auto-generated snapshot files.
Triggers when navigating websites, interacting with web pages, filling forms, taking screenshots, testing web applications, or extracting information from web pages.
Example phrasing: “screenshot the staging site at /pricing”, “fill out the signup form on localhost:5173”, “extract the headline text from this URL”.
You can also tell Claude directly to “use playwright for xxx”.
Source: .claude/skills/playwright-cli/SKILL.md.
ESLint Fixes
Section titled “ESLint Fixes”Generally speaking, Claude does the right thing when it encounters ESLint errors. This skill handles some known cases where Claude has resolved specific ESLint errors incorrectly.
If you ever find that Claude is resolving an ESLint error in an undesirable way (e.g. by disabling the rule instead of fixing the underlying issue or making things worse), you can ask Claude directly to improve the eslint-fixes skill to handle that particular ESLint error in a better way. If you do discover one, please consider filing an issue so we can add it to the skill in GAIA itself.
Source: .claude/skills/eslint-fixes/SKILL.md.