Does it include TypeScript support?

Yes, all provided patterns and component templates are fully typed with TypeScript to ensure type safety across the design system.

What frameworks does this Atomic Design skill support?

This skill provides specific implementation patterns and directory structures for React, Vue 3 (Composition API), and Angular (Standalone and Module-based).

Is this skill suitable for mobile development?

While focused on web frameworks, the Atomic Design principles and hierarchy logic provided can be easily adapted for React Native and Flutter projects.

How does it handle project organization?

It implements the classic Atomic hierarchy (Atoms, Molecules, Organisms, Templates, Pages) and uses barrel exports to simplify component imports.

Can I use this for Storybook documentation?

Yes, the skill includes templates for Storybook story files and documentation patterns to help visualize and test your components in isolation.

Atomic Design System Integration

Name: Atomic Design System Integration
Author: TheBushidoCollective

byTheBushidoCollective

•

デザインツール

Implements standardized Atomic Design patterns across React, Vue, and Angular to build scalable, modular component libraries.

This skill equips Claude with specialized knowledge of Atomic Design methodology, enabling the automated generation of consistent, hierarchical component architectures. It provides framework-specific boilerplate for React (Hooks/TSX), Vue (SFC/Composables), and Angular (Modules/Standalone), ensuring best practices for barrel exports, design tokens, and component testing. It is specifically designed for developers and architects who need to establish or maintain enterprise-grade design systems with a clear separation of concerns between atoms, molecules, organisms, templates, and pages.

主な機能

01Pre-configured TypeScript templates for props, hooks, and context

02Implementation of barrel export patterns for optimized module resolution

03Automated component scaffolding following the Atomic hierarchy

04Storybook integration patterns for visual documentation and testing

05Framework-specific directory structure generation for React, Vue, and Angular

0697 GitHub stars

ユースケース

01Bootstrapping a new enterprise-scale design system with a consistent folder structure

02Standardizing component creation workflows across multi-framework development teams

03Refactoring existing monolithic UI code into a modular Atomic Design architecture

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