Does this skill support modern styling approaches like CSS Modules?

Yes, the templates include specific implementation patterns for CSS Modules to ensure that layout styles are scoped, maintainable, and conflict-free.

How do templates assist with responsive design?

Templates define the underlying grid and layout behavior for different viewports, ensuring that organisms and molecules rearrange themselves consistently across mobile, tablet, and desktop screens.

What is the difference between a Template and a Page in Atomic Design?

Templates define the skeletal structure and component placement using placeholder content, whereas Pages represent specific instances where real data and final content are injected into those templates.

Can I use these templates with frameworks other than React?

While the provided examples use React and TypeScript, the structural principles and layout logic are applicable to any component-based frontend framework like Vue, Svelte, or Angular.

Atomic Design Templates

Name: Atomic Design Templates
Author: TheBushidoCollective

byTheBushidoCollective

•

Design Tools

Generates structured, content-agnostic page layouts based on Atomic Design principles to accelerate frontend development.

The Atomic Design Templates skill empowers developers to build consistent and scalable user interfaces by focusing on the 'Template' level of the Atomic Design methodology. It provides standardized patterns for creating skeletal structures—such as dashboard layouts, marketing landing pages, and authentication flows—that organize organisms and molecules into responsive grid systems without being tied to specific data. This approach ensures design consistency across complex applications and facilitates faster prototyping by defining where content types will appear before actual content is integrated.

Key Features

01Implementation patterns for responsive, content-agnostic page structures

02Best practices for organizing organisms into reusable page shells

03CSS Module patterns for scoped, maintainable layout styling

0466 GitHub stars

05Standardized skeletal layouts for dashboards, e-commerce, and marketing pages

06Pre-configured TypeScript prop interfaces for layout-level components

Use Cases

01Rapidly prototyping the layout of a new administrative dashboard with sidebar and header

02Establishing a consistent structural framework for e-commerce product listings and detail pages

03Creating reusable authentication page shells for login, registration, and password recovery flows

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add thebushidocollective/han atomic-design-templates

For use in Claude.ai and ChatGPT

Download Skill