Code skills

Eight 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

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

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() (exception: approximate skeleton-loader placeholders standing in for dynamic runtime values stay hardcoded; static skeleton text that mirrors a real t() call must still use 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

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

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.

i18n: Static translatable text in skeleton JSX (labels, headings, button text, placeholders) must use t() or <Trans>, the same call the real component uses, so the skeleton width matches the revealed text exactly. Only approximate placeholders standing in for dynamic runtime values (content from API data where the real value is unknown at render time) stay hardcoded.

Accessibility: Put aria-hidden on the skeleton root element so assistive technology skips the decorative placeholders. The region that will receive the content must either carry aria-busy="true" while loading or include a visually-hidden role="status" live region so screen-reader users know content is on the way.

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

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

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

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 it can be added to the skill in GAIA itself.

Source: .claude/skills/eslint-fixes/SKILL.md.

Accessibility Fixes

Resolve specific axe-core accessibility violations in your project. Covers the common rule failures: color-contrast, label, image-alt, button-name, link-name, region, landmark-one-main, heading-order, and the aria-* family. The fix patterns reach for the project’s semantic Tailwind tokens and Form/* components, so corrections hold in both light and dark mode. General accessibility guidance lives in the accessibility rule; this skill handles the concrete fix once a violation is reported.

Triggers when an axe rule id appears in test output from test/a11y.ts (Vitest), .playwright/a11y.ts (Playwright), or the code-review-audit agent’s accessibility bucket.

Example phrasing: “fix the color-contrast violation on the status badge”, “axe says this button has no accessible name”, “resolve the heading-order error”.

Source: .claude/skills/a11y-fixes/SKILL.md.