What are Atoms in Atomic Design?

Atoms are the basic building blocks of a user interface, such as buttons, inputs, and labels, that cannot be broken down into smaller functional units without losing their meaning.

Does this skill support TypeScript and React?

Yes, the skill provides production-ready React component patterns utilizing TypeScript for strong typing and better developer experience.

Are the components generated by this skill accessible?

Yes, accessibility is built-in from the start, including semantic HTML, ARIA attributes, and focus-visible states for keyboard navigation.

How does this skill handle component styling?

It uses CSS Modules and CSS variables, allowing for scoped styling and easy theme customization to match your specific brand requirements.

Atomic Design Atoms

Name: Atomic Design Atoms
Author: TheBushidoCollective

byTheBushidoCollective

•

Design Tools

Implements fundamental UI building blocks using the Atomic Design methodology to create consistent, accessible, and scalable design systems.

This skill empowers Claude to architect the basic, indivisible elements of a user interface known as Atoms. By providing standardized implementation patterns for buttons, inputs, labels, icons, and avatars, it ensures that your design system's foundation is robust, type-safe, and follows industry best practices. It is ideal for developers starting new frontend projects or expanding existing component libraries who need to maintain strict visual consistency and adherence to Atomic Design principles across their application.

Key Features

01Built-in accessibility (a11y) patterns including ARIA roles and labels

02Modular CSS support using CSS Modules for encapsulated component styling

03Flexible prop-driven customization for variants, sizes, and decorative elements

0474 GitHub stars

05Comprehensive state management for loading, disabled, and error states

06Standardized React and TypeScript implementations for core UI elements

Use Cases

01Bootstrapping a new design system with consistent core components

02Standardizing a legacy UI library to follow Atomic Design principles

03Generating type-safe and accessible React component code efficiently

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add thebushidocollective/han atomic-design-atoms

For use in Claude.ai and ChatGPT

Download Skill