Develop
Set up skills and AI tooling for Atlassian Design System.
For Atlassians
The skills below are private to Atlassian currently. Atlassians should typically install them into their repository to give agents reusable context. These skills need to be regularly updated (which can be automated, reach out via our Slack channel).
Choose skills for your task
Choose only the skills that fit the task. Click a card for installation details.
atlassian-design-system
Components, tokens, icons, accessibility, and migrations.ui-styling-standard
Styling decisions, Compiled CSS-in-JS, and lint rules.frontend-tech-stack
Approved frontend packages and implementation patterns.add-frontend-offering
Adding reusable frontend offerings to Platform.afm-platform-offerings
Finding reusable Platform components, hooks, and utilities.a11y-foundation
Accessibility decisions with WCAG and Atlassian guidance.design-md
Visual direction for work that should look at home at Atlassian.motion-animation
Motion tokens, transitions, and reduced motion.Install a skill
Install a skill in the repository to share reusable context with every agent working on the project.
Replace <skill-name> with a name from the list above.
npx @atlassian/skills add <skill-name> --universal --yesTo install a skill only for yourself, use the global option instead:
npx @atlassian/skills add <skill-name> --global --universal --yesRun npx @atlassian/skills update --yes regularly to update installed skills. You can automate this
for a repository. Reach out in the Slack channel for
help.
Tell your agent what to use (optional)
For a new repository, optionally add a short instruction to AGENTS.md so agents know which
installed skills to use:
When building UI with the Atlassian Design System, use the `atlassian-design-system` skill for components, tokens, accessibility, and migrations.
When writing styles, use the `ui-styling-standard` skill. Use other installed skills only when they are relevant to the task.Have your agent initialize the Atlassian Design System
For a new repository, ask your agent to read Set up your development environment. It covers installing packages, supported bundlers, and theming before the agent builds UI.
Public tooling
The CLI and MCP server are public. You can use them whether or not you work at Atlassian.
Search with the CLI
Use the Atlassian Design System CLI to search structured content from your terminal. Atlassians
should use atlas ads search. The public CLI supports docs and search.
# Atlassians
atlas ads search button
# Public CLI
npx @atlaskit/ads-cli docs button
npx @atlaskit/ads-cli search spacing --type token --jsonUse --json when passing results to an agent or script. Read the
Atlassian Design System CLI package documentation
for the full command reference.
Add the MCP server
The @atlaskit/ads-mcp package provides the same
structured content through the Model Context Protocol. In an MCP client that uses mcp.json, add:
{
"mcpServers": {
"ads-mcp": {
"url": "https://mcp.atlassian.com/v1/ads/public/mcp"
}
}
}