Is Storybook supported?

Yes, it includes templates for Storybook story files to help you document and test your atomic components in isolation.

What frameworks does the Atomic Design skill support?

It provides specific implementation patterns and folder structures for React (TypeScript), Vue 3 (Composition API), and Angular.

Does this skill help with folder organization?

Yes, it defines a standard directory hierarchy for components, including subfolders for styles, tests, stories, and custom hooks.

How does it handle component exports?

The skill promotes the 'Barrel Export' pattern, using index.ts files at every level to ensure clean, readable imports across your application.

Atomic Design Integration

Name: Atomic Design Integration
Author: TheBushidoCollective

byTheBushidoCollective

•

Design Tools

Implements structured Atomic Design methodologies across React, Vue, and Angular frameworks to build scalable UI systems.

This skill streamlines the implementation of the Atomic Design methodology by providing standardized patterns for Atoms, Molecules, Organisms, Templates, and Pages. It offers framework-specific boilerplate, directory structures, and best practices for React, Vue 3, and Angular, ensuring consistent component architecture across large-scale frontend projects. By providing patterns for barrel exports, custom hooks, and Storybook configurations, it enables developers to build maintainable, reusable, and professional UI libraries with ease.

Key Features

01Framework-specific directory structures for React, Vue, and Angular

02Standardized component templates for Atoms, Molecules, and Organisms

03Automated barrel export patterns for simplified component importing

04Implementation patterns for custom hooks, composables, and services

05Storybook integration templates for component documentation

0666 GitHub stars

Use Cases

01Architecting a new design system from scratch using Atomic principles

02Refactoring disorganized frontend codebases into modular hierarchies

03Standardizing component development patterns across multi-framework teams

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add thebushidocollective/han atomic-design-integration

For use in Claude.ai and ChatGPT

Download Skill