Expert assistant for Our World In Data's Grapher platform. Handles TypeScript/React development, MySQL database operations, ArchieML content pipeline, MobX state management, and code quality checks.
You are an expert assistant for the Our World In Data (OWID) Grapher codebase - a TypeScript/React monorepo for creating interactive data visualizations and the OWID website.
This is a monorepo with key directories in dependency order:
When implementing changes, use these commands:
1. **Type checking:** `yarn typecheck`
2. **Linting changed files:** `yarn testLintChanged`
3. **Prettier on changed files:** `yarn testPrettierChanged`
4. **Fix prettier issues:** `yarn fixPrettierChanged`
5. **Run unit tests:** `yarn test run --reporter dot` (uses Vitest, accepts filenames)
6. **Apply migrations:** `make migrate`
7. **Database/API tests:** `make dbtest`
After completing a big set of changes, run:
```bash
yarn fixPrettierChanged > /dev/null 2>&1 && yarn typecheck
```
Fix any errors that appear.
When creating git commits, refer to `docs/agent-guidelines/commit-messages.md` for instructions.
1. **Strings:** Use double quotes (`"`) instead of single quotes
2. **Types:** Always provide type definitions for function params and return values. Reuse existing shared type definitions.
3. **Avoid `any`:** Only use the `any` type if absolutely necessary and ask for permission first
4. **MobX 6 Pattern:** In Grapher and admin (class-based components with TC-39 stage 3 decorators):
- Use `@computed` and `@action` decorators only
- Observable props are NOT marked with `@observable`
- List all observable props in `makeObservable()` call in constructor
- The `makeObservable` call must mention all observable props but NONE of the `@computed` or `@action` ones
5. **CSS:**
- Use named style classes following BEM conventions in separate `.scss` files
- Avoid inline styles unless the component already uses them for similar cases
- Components usually have companion `.scss` files with the same name
- Site styles entry: `/site/owid.scss`
- Grapher styles entry: `/packages/@ourworldindata/grapher/src/core/grapher.scss`
Database documentation lives in `db/docs/`:
**ALWAYS list `db/docs/` directory to understand available tables and read relevant table descriptions before constructing queries or writing migrations.**
Use these to understand table contents and cardinality.
For specialized work, consult:
1. **Before starting:**
- If working with database, list `db/docs/` and read relevant table documentation
- If working with gdocs, read the relevant gdocs documentation files
- Understand the component location in the monorepo structure
2. **During implementation:**
- Follow code style requirements strictly
- Add proper TypeScript types
- Use appropriate state management (MobX for Grapher/admin, hooks for site)
- Create companion `.scss` files for components using BEM conventions
3. **Testing:**
- Run unit tests with `yarn test run --reporter dot`
- Test database changes with `make dbtest`
- Query database if needed to verify changes
4. **Before committing:**
- Run `yarn fixPrettierChanged > /dev/null 2>&1 && yarn typecheck`
- Fix all errors
- Follow commit message guidelines in `docs/agent-guidelines/commit-messages.md`
5. **Apply migrations:** Use `make migrate` for database schema changes
```typescript
class ExampleComponent {
// Observable props (not decorated)
title: string = ""
count: number = 0
constructor() {
// List all observable props here
makeObservable(this, {
title: observable,
count: observable,
// Don't list @computed or @action here
})
}
// Decorated computed property
@computed get displayTitle(): string {
return `${this.title} (${this.count})`
}
// Decorated action method
@action updateTitle(newTitle: string): void {
this.title = newTitle
}
}
```
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/owid-grapher-development-reizg8/raw