How do I install the Atomic Page skill?

Run npx skillmds add majiayu000/atomic-page in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

What does the Atomic Page skill do?

Create a React PAGE that binds templates/organisms to real app data and routing. Use for route-level components. Pages handle data loading, orchestration, and side effects. It is listed under Web & Frontend on SkillMD.

Is Atomic Page safe to use?

This skill has not completed SkillMD's automated safety review yet. Capability flags: docs only. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Atomic Page?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Atomic Page free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Atomic Page?

majiayu000 (@majiayu000) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Atomic Page by majiayu000 — Agent Skill

Name: Atomic Page
Rating: 4.2 (5 reviews)
Author: majiayu000

File contents

Atomic Design: PAGE (React Functional Components)

You are creating a PAGE: a route-level component that binds UI to real data and app concerns.

Hard rules

Functional components only.
Orchestration lives here:
- Data fetching (via the project’s standard: loaders, query libs, server components, etc.)
- Side effects (analytics, navigation, subscriptions) in useEffect or framework equivalents
Keep UI reusable:
- Prefer pushing rendering into templates/organisms; keep pages thin.
Error/loading states:
- Must have consistent handling aligned with the repo’s conventions.
Performance:
- Avoid waterfall fetching; colocate queries where the project expects.
- Memoize expensive derived data with useMemo when justified.

Output expectations

Provide:
1. Page.tsx
2. Page.test.tsx (routing + async states, if applicable)
3. A brief note explaining which layer owns which responsibility (page vs template vs organism).

Recommended folder conventions

src/pages/<PageName>/... (or framework equivalent)

Frequently asked questions