hierarchy

Defines atomic design-based component hierarchy and usage rules for Pages Router projects.

1|Updated Jan 12, 2026

Search Tags:#hooks #state-management #atomic-design #pages-router #component-hierarchy #ui-structure #react-architecture

Ready to run

npx skills add https://github.com/jorggerojas/next-skeleton-page --skill hierarchy

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: hierarchy
Source: https://github.com/jorggerojas/next-skeleton-page/tree/main/.cursor/skills/hierarchy
Command: npx skills add https://github.com/jorggerojas/next-skeleton-page --skill hierarchy

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Defines a clear, scalable components hierarchy and usage guidelines to improve UI consistency and reusability across pages and components.

Core Features & Use Cases

Atomic Design-driven structure: Page → Organism → Molecule → Atom, guiding where logic and data live
Page ownership of server data: Pages fetch data and pass it to components via props
Clear hooks/store guidelines: Place business logic in Organisms and avoid placing hooks in Atoms

Quick Start

Organize your UI by mapping each pattern to Atom, Molecule, Organism, then compose Pages from these building blocks.

Frequently Asked Questions about hierarchy

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I structure a scalable React component hierarchy using atomic design?▼

A scalable React component hierarchy organizes UI into Pages, Organisms, Molecules, and Atoms. Pages fetch server data and pass it down via props, while Organisms contain business logic and hooks to maintain clear separation of concerns.

Where should I place custom hooks in an atomic design React architecture?▼

In an atomic design architecture, place custom hooks and business logic within Organisms. Avoid putting hooks in Atoms or Molecules to keep presentational components pure and ensure clear separation of concerns between data management and UI rendering.

Can I use atomic design component hierarchy with Next.js Pages Router?▼

Yes, this component hierarchy is designed for projects using the Pages Router. It enforces page data ownership by having Pages fetch server data and pass it to Organisms, Molecules, and Atoms via props for structured UI development.

What is the best way to manage page data ownership in a React component hierarchy?▼

The best way to manage page data ownership is to have Pages fetch server data and pass it down to child components via props. This keeps data fetching centralized at the page level and maintains a clear, scalable separation of concerns.

Why should atoms not contain business logic in a component hierarchy?▼

Atoms should not contain business logic because they are foundational UI building blocks. Keeping them pure ensures maximum reusability across the application, while Organisms handle state management and hook placement for specific feature logic.

How do I organize UI components from atoms to pages in a React project?▼

Organize UI components by mapping each visual pattern to Atoms, Molecules, and Organisms, then compose Pages from these building blocks. This structure dictates where logic lives, ensuring scalable and consistent UI development across pages.