Does this skill support TypeScript?

Yes, all patterns provided by this skill include comprehensive TypeScript support, including detailed prop interfaces and React forwardRef implementations.

What are Atomic Design Atoms?

Atoms are the basic building blocks of a user interface, such as buttons, inputs, and labels, that cannot be broken down further without losing their core functionality.

Can I use these patterns with different CSS frameworks?

While the examples use CSS Modules, the architectural patterns are framework-agnostic and can be easily adapted for Tailwind CSS, Styled Components, or Sass.

How does this skill ensure component accessibility?

Each atom pattern is built with a11y in mind, incorporating proper ARIA attributes, focus states, and semantic HTML structures by default.

Atomic Design Atoms

Name: Atomic Design Atoms
Author: TheBushidoCollective

byTheBushidoCollective

•

Design Tools

Constructs foundational, indivisible UI components like buttons and inputs following strict Atomic Design principles.

This skill provides a specialized framework for creating 'Atoms'—the smallest, indivisible building blocks of a professional design system. It offers standardized implementation patterns for essential UI elements such as buttons, inputs, icons, and labels, ensuring they are reusable, stateless, and fully accessible. By automating the creation of these primitive components with best practices for TypeScript and CSS modules, it establishes a consistent foundation for complex interfaces, helping developers maintain design integrity and reduce technical debt from the very first line of frontend code.

Key Features

01Accessibility-first implementation using ARIA roles and semantic HTML

02Standardized patterns for fundamental UI elements like Buttons, Inputs, and Icons

03Integration-ready styles using CSS Modules and design tokens

04TypeScript-ready interfaces for robust prop definitions and type safety

0597 GitHub stars

06Stateless component architecture for maximum reusability across projects

Use Cases

01Standardizing form elements and interactive components for accessibility compliance

02Bootstrapping a new design system with a library of primitive UI components

03Refactoring monolithic frontend code into modular, atomic units

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