Atomic Design Atoms

What it does

This skill generates foundational UI elements, known as "atoms," which are the indivisible building blocks of a design system. Atoms like buttons, inputs, and labels are created with consistent styling and accessibility in mind. The generated code adheres to atomic design principles, promoting reusability and maintainability within digital interfaces. This allows for the creation of a more unified and predictable user experience.

When to use it

• Building a new design system from scratch.
• Creating reusable UI components for consistent styling across an application.
• Generating basic interactive elements (buttons, inputs) or display elements (typography, icons).
• Ensuring accessibility is built into the foundation of your user interface.
• Implementing form atoms like input fields, textareas and select dropdowns

Key capabilities

• Generates a variety of UI atom types including:
  • Buttons (primary, secondary, tertiary, danger)
  • Inputs (text, checkbox, radio, select)
  • Typography (headings, paragraphs, labels)
  • Icons and Images/Avatars
  • Form atoms (input fields, textareas, checkboxes, radio buttons, select dropdowns, labels)
• Supports styling through design tokens.
• Creates accessible UI elements with a11y considerations.
• Provides options for button variants (primary, secondary, tertiary, danger), sizes (sm, md, lg), and loading states.

Example prompts

• "Generate a primary button atom."
• "Create a text input field atom."
• "Show me the code for a radio button atom with a small size."

Tips & gotchas

• This skill generates React components (specifically, .tsx files). You'll need a React development environment to use the generated code.
• The generated atoms are designed to be styled using design tokens; you’ll need to define and integrate these tokens into your project for consistent styling.