Atlassian Design System

Name: Atlassian Design System
Availability: InStock
Author: GeneralJerel

Implement React-based Atlassian Design System UIs with design tokens and reusable patterns.

Updated Mar 23, 2026

Search Tags:#ui #accessibility #react #tokens #atlassian #design-system

Ready to run

npx skills add https://github.com/GeneralJerel/awesome-style-refs --skill atlassian-design-system

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: Atlassian Design System
Source: https://github.com/GeneralJerel/awesome-style-refs/tree/main/skills/atlassian-design
Command: npx skills add https://github.com/GeneralJerel/awesome-style-refs --skill atlassian-design-system

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The Atlassian Design System Skill standardizes and accelerates the creation of collaborative, enterprise-grade user interfaces by providing a React-based system, design tokens, and a library of reusable patterns aligned with Jira, Confluence, and Trello.

Core Features & Use Cases

Consistent UI patterns and tokens for theming, spacing, and elevation across products.
Ready-made components for dynamic tables, flags, inline editing, modals, and hierarchical navigation to support workflow-heavy apps.
Use cases include building project management dashboards, issue trackers, knowledge bases, and team collaboration tools with accessible, scalable UI.

Quick Start

Install the Atlassian Design System in a React project and begin prototyping a Jira-like dashboard using the provided components.

Frequently Asked Questions about Atlassian Design System

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I build a Jira-like project management dashboard in React?▼

Build a Jira-like dashboard in React by applying this system's ready-made patterns for dynamic tables, flags, and modals. It supplies design tokens for theming and accessible components to standardize enterprise-grade collaboration interfaces.

What are design tokens and how do they handle UI theming?▼

Design tokens are variables that manage UI theming, spacing, and elevation consistently across products. They allow developers to standardize visual styles and maintain accessible, scalable interfaces across enterprise applications.

Can I use Atlassian design patterns for issue trackers and wikis?▼

Yes, these Atlassian design patterns support issue trackers and wikis. The React-based system provides components for inline editing, hierarchical tree views, and modals specifically tailored for workflow-heavy team collaboration applications.

What is the best way to structure accessible enterprise collaboration UIs?▼

The best way to structure accessible enterprise collaboration UIs is using a React-based design system with standardized tokens. It guides developers through component usage and accessibility patterns for scalable team collaboration tools.

Do I need React to implement these workflow-heavy UI patterns?▼

Yes, you need React to implement these workflow-heavy UI patterns. The design system is React-based, supplying components for dynamic tables, inline editing, and hierarchical navigation designed for enterprise-grade team applications.