Claude skills

Skills are short instructions with reference files that teach Claude how this project works — its architecture, its rules, its components. The team works with them every day; they are public, so anyone can read them, reuse them or load them into their own Claude.

How to use them

Claude Code loads them by itself in a clone of this repository (from .claude/skills). Elsewhere, unpack a skill's ZIP into your project's .claude/skills/ or into ~/.claude/skills/.
claude.ai: download a skill's ZIP and upload it in Settings → Capabilities → Skills (one ZIP per skill).
Any chat: paste the raw file's address, e.g. https://www.atlasoftodaysworld.org/skills/atlas-accessibility/SKILL.md, and ask Claude to follow it.

Download all skills (ZIP)

Admin user

Admin (CMS)
atlas-admin · Frontend, Admin user, Editor
How the Atlas of Today's World administration works and how to extend it - admin layout and menu (admin-nav.ts, adminRoutes), the permission model (roles x sections x v/c/e/d, the database decides), page structure, forms, destructive actions (confirm vs undo), drafts, revisions, previews and scheduled publishing, the Maps & charts editor, plus a short guide for editors. Use when building or changing an admin screen, menu item, permission check, admin form or workflow, or when an editor asks how to do something in the admin.
Content and editorial quality
atlas-content · Editor, Admin user
How to write, source, illustrate and publish content in the Atlas of Today's World encyclopedia — regions, global issues, countries, topics with subtopics, news, timelines, FAQ, key-fact cards, site pages and UI texts. Use when drafting or editing any text in the admin, checking a draft before approval, citing sources, adding photos or credits, choosing a title or URL, scheduling a publication or fixing an error.

Backend

Architecture
atlas-architecture · Frontend, Backend, Release
The binding architecture of Atlas of Today's World (Next.js 16, React 19, Supabase, Vercel) - stack, folder layers, the feature file pattern, ESLint layer rules, data flow, caching and static/ISR rules, ADRs and the 10 non-negotiable rules. Use it before any change to code, the database (migrations, RLS, functions), sign-in and permissions, the admin, tests or CI, and when reviewing a PR.
Backend
atlas-backend · Backend
How Atlas talks to Supabase - the three clients, public queries vs editorial reads, must/rowsOf, the Server Action pattern (formAction, idAction, affected, updateTag), RPCs for content state, migrations (naming, expand-only, grants, RLS per command, FK indexes, CHECK limits), DB tests on PGlite, type generation, rate limits and webhooks. Use when adding a table, column, policy, RPC, migration, Server Action or query, or when a DB test fails.
No duplicates
atlas-dedup · Frontend, Backend
The dedup principle of Atlas - every visual pattern, constant, data definition and helper exists once. Covers where to search before building, rule of three vs the wrong abstraction, the inventory of shared helpers and components, the CI tools (jscpd, knip, ESLint bans) and how to remove dead code safely. Use before creating any component, hook, helper, constant or type, when copying code, and when deleting or moving code.
Security and privacy
atlas-security · Backend, Frontend, Release
Security and GDPR rules for Atlas - sign-in (getUser, invitations, 2FA), permissions, Server Actions as public endpoints, HTML sanitizing, safe URLs and redirects, the embed allowlist, CSP and headers, Turnstile, rate limits, secrets, GitHub Actions hardening, dependencies, uploads, logging, and personal data (minimisation, retention, export and deletion, cookie-less analytics, newsletter consent). Use when touching auth, roles, forms, HTML, URLs, embeds, headers, env vars, workflows, uploads or any personal data.
Testing and release
atlas-testing-release · Release, Frontend, Backend
How Atlas is tested and shipped - the test layers (unit, DB on PGlite, Playwright e2e, smoke, Storybook, Lighthouse), which command to run when, CI jobs and required checks, nightly full tests, PR previews, the migrate-dev and deploy flows, checking production after a deploy, commits, backups, uptime and incidents. Use when writing tests, opening or merging a PR, changing a workflow, deploying, or when production looks wrong.

Designer

Accessibility
atlas-accessibility · Designer, Frontend, Everyone
WCAG 2.2 AA for Atlas of Today's World - semantics, keyboard and focus (panels, Esc, dialogs, menus, tabs, the Rail carousel), skip link, touch targets (--touch-min), reduced motion, contrast, the globe and maps with HTML alternatives, accessible forms and errors, screen-reader announcements, and the repo's axe and overflow tests. Use when building or reviewing any UI, adding an interactive control, a dialog, a form, an animation, an image or a map, or when a11y tests fail.
UX (reader experience)
atlas-ux · Designer, Frontend, Editor
How readers move through Atlas of Today's World and what every public screen must give them - globe, panel and full-page navigation, long-form topics with subtopics and timelines, answer-first blocks, loading/empty/error states, support and volunteer calls to action, sharing, URL state and phone behaviour. Use when designing or changing a public page, flow, panel, menu, empty state, call to action, share or filter, or anything a reader clicks.
Visual design
atlas-visual-design · Designer, Frontend
The look of Atlas of Today's World - design tokens in globals.css @theme and src/config/layout.ts, colour roles (dark map layer, light content layer, semantic and red "empty" colours), typography scale, photos and credits, lucide icons, radius, shadow and spacing, and visual variants instead of copies. Use when choosing a colour, font size, icon, image, border, shadow or spacing, adding a token, or styling any new component or page.

Editor

Admin (CMS)
atlas-admin · Frontend, Admin user, Editor
How the Atlas of Today's World administration works and how to extend it - admin layout and menu (admin-nav.ts, adminRoutes), the permission model (roles x sections x v/c/e/d, the database decides), page structure, forms, destructive actions (confirm vs undo), drafts, revisions, previews and scheduled publishing, the Maps & charts editor, plus a short guide for editors. Use when building or changing an admin screen, menu item, permission check, admin form or workflow, or when an editor asks how to do something in the admin.
Content and editorial quality
atlas-content · Editor, Admin user
How to write, source, illustrate and publish content in the Atlas of Today's World encyclopedia — regions, global issues, countries, topics with subtopics, news, timelines, FAQ, key-fact cards, site pages and UI texts. Use when drafting or editing any text in the admin, checking a draft before approval, citing sources, adding photos or credits, choosing a title or URL, scheduling a publication or fixing an error.
GEO (AI answer engines)
atlas-geo · Editor, Frontend
Generative Engine Optimization for the Atlas: being found, understood and cited by ChatGPT, Claude, Perplexity, Copilot and Google AI Overviews. Covers the robots.txt policy for AI bots, llms.txt and llms-full.txt, .md twins, server-rendered text for non-JS crawlers, answer-first writing, quotable sourced facts, entity clarity (Wikidata), honest freshness and geographic signals. Use when writing or templating content, adding a public page type, or changing robots, llms.txt or markdown routes.
Maps, data layers and charts
atlas-maps-data · Maps data, Editor, Frontend
The Atlas globe (MapLibre), its layers, topic badges and status marks, the indicator data layers and their sources, choropleth and colour rules, and the "Maps & charts" visuals (embeds and custom maps). Use when adding or changing a data layer or indicator, colouring the map, touching the globe code, embedding a Datawrapper/Flourish/OWID/World Bank chart, building a custom map, or citing data.
SEO
atlas-seo · Editor, Frontend
How Atlas pages get found and shown in search: titles and descriptions (pageMetadata), canonical URLs, sitemaps and honest lastmod, robots, JSON-LD structured data, redirects on slug changes, real 404s, internal links, image SEO, Search Console, Bing Webmaster and IndexNow. Use when adding a public page, changing metadata, titles, URLs or slugs, sitemap, structured data, dates or authors, or when reviewing search visibility.
UX (reader experience)
atlas-ux · Designer, Frontend, Editor
How readers move through Atlas of Today's World and what every public screen must give them - globe, panel and full-page navigation, long-form topics with subtopics and timelines, answer-first blocks, loading/empty/error states, support and volunteer calls to action, sharing, URL state and phone behaviour. Use when designing or changing a public page, flow, panel, menu, empty state, call to action, share or filter, or anything a reader clicks.

Everyone

Accessibility
atlas-accessibility · Designer, Frontend, Everyone
WCAG 2.2 AA for Atlas of Today's World - semantics, keyboard and focus (panels, Esc, dialogs, menus, tabs, the Rail carousel), skip link, touch targets (--touch-min), reduced motion, contrast, the globe and maps with HTML alternatives, accessible forms and errors, screen-reader announcements, and the repo's axe and overflow tests. Use when building or reviewing any UI, adding an interactive control, a dialog, a form, an animation, an image or a map, or when a11y tests fail.
Start here — skills and roles
atlas-web · Everyone
Index of all Atlas of Today's World skills and which ones each role should load. Use at the start of any task on the Atlas website or its administration (code, design, content, data, release) to pick the right skills, and whenever you are unsure which rules apply.

Frontend

Accessibility
atlas-accessibility · Designer, Frontend, Everyone
WCAG 2.2 AA for Atlas of Today's World - semantics, keyboard and focus (panels, Esc, dialogs, menus, tabs, the Rail carousel), skip link, touch targets (--touch-min), reduced motion, contrast, the globe and maps with HTML alternatives, accessible forms and errors, screen-reader announcements, and the repo's axe and overflow tests. Use when building or reviewing any UI, adding an interactive control, a dialog, a form, an animation, an image or a map, or when a11y tests fail.
Admin (CMS)
atlas-admin · Frontend, Admin user, Editor
How the Atlas of Today's World administration works and how to extend it - admin layout and menu (admin-nav.ts, adminRoutes), the permission model (roles x sections x v/c/e/d, the database decides), page structure, forms, destructive actions (confirm vs undo), drafts, revisions, previews and scheduled publishing, the Maps & charts editor, plus a short guide for editors. Use when building or changing an admin screen, menu item, permission check, admin form or workflow, or when an editor asks how to do something in the admin.
Architecture
atlas-architecture · Frontend, Backend, Release
The binding architecture of Atlas of Today's World (Next.js 16, React 19, Supabase, Vercel) - stack, folder layers, the feature file pattern, ESLint layer rules, data flow, caching and static/ISR rules, ADRs and the 10 non-negotiable rules. Use it before any change to code, the database (migrations, RLS, functions), sign-in and permissions, the admin, tests or CI, and when reviewing a PR.
DataTable — the one table
atlas-datatable · Frontend
The one table component of Atlas of Today's World (components/data-table/DataTable, ported from TealHub). Use ALWAYS when adding or changing any list/table on the site (admin lists, audit logs, data values, invitations…) — never write a raw <table> or a custom list with filters.
No duplicates
atlas-dedup · Frontend, Backend
The dedup principle of Atlas - every visual pattern, constant, data definition and helper exists once. Covers where to search before building, rule of three vs the wrong abstraction, the inventory of shared helpers and components, the CI tools (jscpd, knip, ESLint bans) and how to remove dead code safely. Use before creating any component, hook, helper, constant or type, when copying code, and when deleting or moving code.
Frontend (React and Next.js)
atlas-frontend · Frontend
How to write UI code in Atlas of Today's World (Next.js 16, React 19, Tailwind 4) - server vs client components, where a component lives, the inventory of ui primitives and Atlas patterns to reuse, cva variants, apiFetch and Server Actions instead of fetch, forms with FormField + Zod + useServerAction, texts via getT/useMessages, URLs from routes.ts, Storybook stories, the client bundle guard and ESLint layer rules. Use when writing or reviewing any .tsx component, page, form, hook or client-side data call.
GEO (AI answer engines)
atlas-geo · Editor, Frontend
Generative Engine Optimization for the Atlas: being found, understood and cited by ChatGPT, Claude, Perplexity, Copilot and Google AI Overviews. Covers the robots.txt policy for AI bots, llms.txt and llms-full.txt, .md twins, server-rendered text for non-JS crawlers, answer-first writing, quotable sourced facts, entity clarity (Wikidata), honest freshness and geographic signals. Use when writing or templating content, adding a public page type, or changing robots, llms.txt or markdown routes.
Maps, data layers and charts
atlas-maps-data · Maps data, Editor, Frontend
The Atlas globe (MapLibre), its layers, topic badges and status marks, the indicator data layers and their sources, choropleth and colour rules, and the "Maps & charts" visuals (embeds and custom maps). Use when adding or changing a data layer or indicator, colouring the map, touching the globe code, embedding a Datawrapper/Flourish/OWID/World Bank chart, building a custom map, or citing data.
Performance
atlas-performance · Frontend, Maps data, Release
Speed rules for the Atlas: Core Web Vitals targets and today's baseline, CDN caching and ISR, images and fonts, client JavaScript budget, the MapLibre globe, long tasks and INP, and how to measure and investigate a regression. Use when changing anything a reader downloads or waits for (pages, components, images, maps, dependencies, caching), when adding a client component or library, or when a page feels slow.
Security and privacy
atlas-security · Backend, Frontend, Release
Security and GDPR rules for Atlas - sign-in (getUser, invitations, 2FA), permissions, Server Actions as public endpoints, HTML sanitizing, safe URLs and redirects, the embed allowlist, CSP and headers, Turnstile, rate limits, secrets, GitHub Actions hardening, dependencies, uploads, logging, and personal data (minimisation, retention, export and deletion, cookie-less analytics, newsletter consent). Use when touching auth, roles, forms, HTML, URLs, embeds, headers, env vars, workflows, uploads or any personal data.
SEO
atlas-seo · Editor, Frontend
How Atlas pages get found and shown in search: titles and descriptions (pageMetadata), canonical URLs, sitemaps and honest lastmod, robots, JSON-LD structured data, redirects on slug changes, real 404s, internal links, image SEO, Search Console, Bing Webmaster and IndexNow. Use when adding a public page, changing metadata, titles, URLs or slugs, sitemap, structured data, dates or authors, or when reviewing search visibility.
Testing and release
atlas-testing-release · Release, Frontend, Backend
How Atlas is tested and shipped - the test layers (unit, DB on PGlite, Playwright e2e, smoke, Storybook, Lighthouse), which command to run when, CI jobs and required checks, nightly full tests, PR previews, the migrate-dev and deploy flows, checking production after a deploy, commits, backups, uptime and incidents. Use when writing tests, opening or merging a PR, changing a workflow, deploying, or when production looks wrong.
UX (reader experience)
atlas-ux · Designer, Frontend, Editor
How readers move through Atlas of Today's World and what every public screen must give them - globe, panel and full-page navigation, long-form topics with subtopics and timelines, answer-first blocks, loading/empty/error states, support and volunteer calls to action, sharing, URL state and phone behaviour. Use when designing or changing a public page, flow, panel, menu, empty state, call to action, share or filter, or anything a reader clicks.
Visual design
atlas-visual-design · Designer, Frontend
The look of Atlas of Today's World - design tokens in globals.css @theme and src/config/layout.ts, colour roles (dark map layer, light content layer, semantic and red "empty" colours), typography scale, photos and credits, lucide icons, radius, shadow and spacing, and visual variants instead of copies. Use when choosing a colour, font size, icon, image, border, shadow or spacing, adding a token, or styling any new component or page.

Maps data

Maps, data layers and charts
atlas-maps-data · Maps data, Editor, Frontend
The Atlas globe (MapLibre), its layers, topic badges and status marks, the indicator data layers and their sources, choropleth and colour rules, and the "Maps & charts" visuals (embeds and custom maps). Use when adding or changing a data layer or indicator, colouring the map, touching the globe code, embedding a Datawrapper/Flourish/OWID/World Bank chart, building a custom map, or citing data.
Performance
atlas-performance · Frontend, Maps data, Release
Speed rules for the Atlas: Core Web Vitals targets and today's baseline, CDN caching and ISR, images and fonts, client JavaScript budget, the MapLibre globe, long tasks and INP, and how to measure and investigate a regression. Use when changing anything a reader downloads or waits for (pages, components, images, maps, dependencies, caching), when adding a client component or library, or when a page feels slow.

Release

Architecture
atlas-architecture · Frontend, Backend, Release
The binding architecture of Atlas of Today's World (Next.js 16, React 19, Supabase, Vercel) - stack, folder layers, the feature file pattern, ESLint layer rules, data flow, caching and static/ISR rules, ADRs and the 10 non-negotiable rules. Use it before any change to code, the database (migrations, RLS, functions), sign-in and permissions, the admin, tests or CI, and when reviewing a PR.
Performance
atlas-performance · Frontend, Maps data, Release
Speed rules for the Atlas: Core Web Vitals targets and today's baseline, CDN caching and ISR, images and fonts, client JavaScript budget, the MapLibre globe, long tasks and INP, and how to measure and investigate a regression. Use when changing anything a reader downloads or waits for (pages, components, images, maps, dependencies, caching), when adding a client component or library, or when a page feels slow.
Security and privacy
atlas-security · Backend, Frontend, Release
Security and GDPR rules for Atlas - sign-in (getUser, invitations, 2FA), permissions, Server Actions as public endpoints, HTML sanitizing, safe URLs and redirects, the embed allowlist, CSP and headers, Turnstile, rate limits, secrets, GitHub Actions hardening, dependencies, uploads, logging, and personal data (minimisation, retention, export and deletion, cookie-less analytics, newsletter consent). Use when touching auth, roles, forms, HTML, URLs, embeds, headers, env vars, workflows, uploads or any personal data.
Testing and release
atlas-testing-release · Release, Frontend, Backend
How Atlas is tested and shipped - the test layers (unit, DB on PGlite, Playwright e2e, smoke, Storybook, Lighthouse), which command to run when, CI jobs and required checks, nightly full tests, PR previews, the migrate-dev and deploy flows, checking production after a deploy, commits, backups, uptime and incidents. Use when writing tests, opening or merging a PR, changing a workflow, deploying, or when production looks wrong.

Skills are files in the repository, changed by pull request on GitHub; this page shows them as of the last deploy.