Master Brad Frost's Atomic Design methodology (extended with quarks) for building scalable, maintainable component-based user interfaces. This skill covers the core hierarchy, principles, and organization strategies for modern design systems.
Works with
AI-first code editor with Composer
Before installing skills in Cursor, ensure your development environment meets these requirements:
node --versionatomic-design-fundamentalsExecute the skills CLI command in your project's root directory to begin installation:
Fetches atomic-design-fundamentals from thebushidocollective/han and configures it for Cursor.
The CLI shows a list of agents. Use arrow keys and space to select Cursor:
Confirm successful installation by checking the skill directory location:
Restart Cursor to activate atomic-design-fundamentals. Access via /atomic-design-fundamentals in your agent's command palette.
We perform automated surface-level scans (Gen AI Scanner, Socket, Snyk) during installation. These checks detect common vulnerabilities but do not guarantee complete security. Always review skill source code and verify the publisher's reputation before production use.
Skills execute code in your environment. Always review source, verify the publisher, and test in isolation before production.
Submit your Claude Code skill and start earning
Automate repetitive workflows and reduce manual effort
Example
Generate reports, summarize documents, draft communications
Save 3-5 hours per week on routine tasks
Learn new skills, understand complex topics, get expert guidance
Example
Explain concepts, provide examples, suggest learning resources
Accelerate learning and skill development by 2x
Enhance output quality through reviews, suggestions, and refinements
Example
Review drafts, suggest improvements, catch errors
Improve work quality by 30-40% with less effort
2
total installs
2
this week
130
GitHub stars
0
upvotes
Run in your terminal
2
installs
2
this week
130
stars
Master Brad Frost's Atomic Design methodology (extended with quarks) for building scalable, maintainable component-based user interfaces. This skill covers the core hierarchy, principles, and organization strategies for modern design systems.
Atomic Design is a methodology for creating design systems inspired by chemistry. Just as atoms combine to form molecules, which combine to form organisms, UI components follow a similar hierarchical structure. We extend this with quarks - the sub-atomic level of design tokens:
The sub-atomic building blocks - design tokens and primitive values that atoms consume. Quarks are not UI components themselves; they are the raw values that define your design language.
Examples:
Characteristics:
The smallest functional UI units of your interface. Atoms consume quarks for styling but cannot be broken down further without losing meaning.
Examples:
Characteristics:
Combinations of atoms working together as a unit. Molecules have a single responsibility but are composed of multiple atoms.
Examples:
Characteristics:
Complex, standalone sections of an interface. Organisms represent distinct sections that could exist independently.
Examples:
Characteristics:
Page-level layouts that define content structure without actual content. Templates show the skeletal structure of a page.
Examples:
Characteristics:
Specific instances of templates with real, representative content. Pages are what users actually see and interact with.
Examples:
Characteristics:
src/
quarks/ # Design tokens
index.ts
colors.ts
spacing.ts
typography.ts
shadows.ts
borders.ts
components/
atoms/
Button/
Button.tsx
Button.test.tsx
Button.stories.tsx
index.ts
Input/
Label/
Icon/
molecules/
SearchForm/
FormField/
Card/
organisms/
Header/
Footer/
ProductCard/
templates/
MainLayout/
DashboardLayout/
pages/
HomePage/
ProductPage/
src/
quarks/
colors.ts
spacing.ts
typography.ts
components/
atoms/
Button.tsx
Input.tsx
Label.tsx
molecules/
SearchForm.tsx
FormField.tsx
organisms/
Header.tsx
Footer.tsx
templates/
MainLayout.tsx
pages/
HomePage.tsx
src/
quarks/ # Shared design tokens
index.ts
colors.ts
spacing.ts
features/
products/
components/
atoms/
molecules/
organisms/
templates/
pages/
checkout/
components/
atoms/
molecules/
organisms/
shared/
components/
atoms/
molecules/
# PascalCase for component files
Button.tsx
SearchForm.tsx
ProductCard.tsx
# Index files for clean imports
index.ts
# Test files
Button.test.tsx
Button.spec.tsx
# Story files (Storybook)
Button.stories.tsx
// Atoms - simple, descriptive names
Button
Input
Label
Avatar
Icon
// Molecules - action or composition-based names
SearchForm
FormField
MediaObject
NavItem
// Organisms - section or feature-based names
Header
Footer
ProductCard
CommentSection
UserProfile
// Templates - layout-focused names
MainLayout
DashboardLayout
AuthLayout
// Pages - page-specific names
HomePage
ProductDetailPage
CheckoutPage
// src/components/atoms/index.ts
export { Button } from './Button';
export { Input } from './Input';
export { Label } from './Label';
export { Icon } from './Icon';
// src/components/molecules/index.ts
export { SearchForm } from './SearchForm';
export { FormField } from './FormField';
// src/components/index.ts
export * from './atoms';
export * from './molecules';
export * from './organisms';
// Clean imports from barrel files
import { Button, Input, Label } from '@/components/atoms';
import { SearchForm, FormField } from '@/components/molecules';
import { Header, Footer } from '@/components/organisms';
// Or from unified barrel
import { Button, SearchForm, Header } from '@/components';
Quarks -> Used by: Atoms, Molecules, Organisms, Templates, Pages
Atoms -> Used by: Molecules, Organisms, Templates, Pages
Molecules -> Used by: Organisms, Templates, Pages
Organisms -> Used by: Templates, Pages
Templates -> Used by: Pages
Pages -> Not used by other components
// Atom using quarks for styling
import { colors, spacing } from '@/quarks';
const Button = styled.button`
background: ${colors.primary[500]}; {/* Quark */}
padding: ${spacing.md}; {/* Quark */}
`;
// Molecule using atoms only
const SearchForm = () => (
<form>
<Input placeholder="Search..." /> {/* Atom */}
<Button>Search</Button> {/* Atom */}
</form>
);
// Organism using molecules and atoms
const Header = () => (
<header>
<Logo /> {/* Atom */}
<Navigation /> {/* Molecule */}
<SearchForm /> {/* Molecule */}
<UserMenu /> {/* Molecule */}
</header>
);
// Template using organisms
const MainLayout = ({ children }) => (
<div>
<Header /> {/* Organism */}
<main>{children}</main>
<Footer /> {/* Organism */}
Prerequisites
Time Estimate
15-45 minutes depending on use case complexity
Steps
Common Pitfalls
✓ Do
✗ Don't
💡 Pro Tips
✓ Use when
Use when skill capabilities match your task, clear ROI on time saved, and you can validate outputs. Best for repetitive tasks, learning, and quality improvement.
✗ Avoid when
Avoid when task requires deep expertise you can't validate, involves sensitive decisions, or when learning process is more valuable than speed of completion.
anthropics/claude-code
sickn33/antigravity-awesome-skills
leonxlnx/taste-skill
erichowens/some_claude_skills
hyperb1iss/hyperskills
omer-metin/skills-for-antigravity
Solid pick for teams standardizing on skills: atomic-design-fundamentals is focused, and the summary matches what you get after install.
We added atomic-design-fundamentals from the explainx registry; install was straightforward and the SKILL.md answered most questions upfront.
I recommend atomic-design-fundamentals for anyone iterating fast on agent tooling; clear intent and a small, reviewable surface area.
atomic-design-fundamentals has been reliable in day-to-day use. Documentation quality is above average for community skills.
atomic-design-fundamentals reduced setup friction for our internal harness; good balance of opinion and flexibility.
atomic-design-fundamentals is among the better-maintained entries we tried; worth keeping pinned for repeat workflows.
Registry listing for atomic-design-fundamentals matched our evaluation — installs cleanly and behaves as described in the markdown.
atomic-design-fundamentals fits our agent workflows well — practical, well scoped, and easy to wire into existing repos.
Registry listing for atomic-design-fundamentals matched our evaluation — installs cleanly and behaves as described in the markdown.
I recommend atomic-design-fundamentals for anyone iterating fast on agent tooling; clear intent and a small, reviewable surface area.
showing 1-10 of 73