OWID Grapher Development

Development assistant for Our World In Data's Grapher platform - a monorepo containing interactive data visualization tools, website rendering, and CMS pipeline.

Overview

This skill helps you work with the OWID Grapher codebase, which includes:

Codebase Structure

**Key directories (dependency order):**

Common Commands

**Type checking and linting:**

```bash

yarn typecheck

yarn testLintChanged

yarn testPrettierChanged

yarn fixPrettierChanged

```

**Testing:**

```bash

yarn test run --reporter dot # Unit tests (vitest)

make dbtest # Database and API tests

```

**Database:**

```bash

make migrate # Apply migrations

yarn query "QUERY TEXT" # Run read-only queries (production)

yarn query -s "QUERY TEXT" # Query staging database for current branch

```

**Before committing large changes:**

```bash

yarn fixPrettierChanged > /dev/null 2>&1 && yarn typecheck

```

Code Style Guidelines

1. **Strings:** Use double quotes, not single quotes

2. **Types:** Always define function param and return types; reuse shared type definitions

3. **Avoid `any`:** Only use with explicit permission

4. **MobX patterns (Grapher/Admin):**

- Use class-based components with TC-39 stage 3 decorators

- Only decorate `@computed` and `@action` properties

- Observable props go in `makeObservable()` call in constructor, NOT decorated with `@observable`

- `makeObservable` must list all observable props but NOT computed/action ones

5. **CSS:**

- Use named style classes in separate `.scss` files

- Follow BEM conventions

- Avoid inline styles unless component already uses them

- Entry points: `/site/owid.scss` (site), `/packages/@ourworldindata/grapher/src/core/grapher.scss` (grapher)

Database Work

**Always check database documentation before queries or migrations:**

**Workflow:**

1. List available tables: check `db/docs/` directory

2. Read relevant `.yml` files for table structure

3. Test queries with `yarn query` before writing code

4. Use `yarn query -s` for staging database (matches current git branch)

Additional Documentation

**Google Docs CMS Pipeline:**

**Git Commits:**

Technology Stack

Development Workflow

1. **Before starting:** Understand which directories/packages are involved

2. **Database changes:** Check `db/docs/`, test queries, write migrations

3. **Code changes:** Follow style guide, add types, avoid `any`

4. **Testing:** Run relevant tests (`yarn test`, `make dbtest`)

5. **Before commit:** Run prettier + typecheck, fix all errors

6. **Commit:** Follow commit message guidelines in `docs/agent-guidelines/commit-messages.md`

Important Notes