Development workflow and guidelines for Our World In Data's Grapher platform - interactive data visualization tool with React, TypeScript, and MySQL
Development assistant for Our World In Data's Grapher platform - a monorepo containing interactive data visualization tools, website rendering, and CMS pipeline.
This skill helps you work with the OWID Grapher codebase, which includes:
**Key directories (dependency order):**
**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
```
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)
**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)
**Google Docs CMS Pipeline:**
**Git Commits:**
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`
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/owid-grapher-development-lqpt7t/raw