skills.rest
GeneralJerel
GeneralJerelCOMMUNITY
Explore all skills by this author →
GitHub

Atlassian Design System

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
One-click install
npx skills add https://github.com/GeneralJerel/awesome-style-refs --skill atlassian-design-system
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
nickstradnickstrad

tailwind-design-system

Build scalable design systems with Tailwind CSS and design tokens.

Community
Intermediate
silvarojasdiegoarturo91silvarojasdiegoarturo91

triage

Classify project issues into categories and manage their statuses.

Community
Intermediate
anicca-labsanicca-labs

data-fetching

Fetch and mutate data in Expo apps using React Query with Supabase.

Official
Intermediate
saajunaidsaajunaid

ui-styling-patterns

Build accessible, responsive UIs with Tailwind CSS and shadcn/ui components.

Community
Intermediate