skills.rest
JackSmack1971
JackSmack1971COMMUNITY
Explore all skills by this author →
GitHub

design-frontend-component

Compose React frontend components using Atomic Design hierarchy.

Updated Dec 31, 2025
Search Tags:#frontend#react#atomic design#component design#ui architecture
One-click install
npx skills add https://github.com/JackSmack1971/claude-code-learning-flywheel --skill design-frontend-component
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-frontend-component
Source: https://github.com/JackSmack1971/claude-code-learning-flywheel/tree/main/.claude/skills/design-frontend-component
Command: npx skills add https://github.com/JackSmack1971/claude-code-learning-flywheel --skill design-frontend-component

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps frontend teams avoid Prop Drilling and monolithic components by advocating a disciplined composition approach (Atoms, Molecules, Organisms) and Atomic Design.

Core Features & Use Cases

  • Atomic Design Hierarchy: ATOMS, MOLECULES, ORGANISMS, TEMPLATES, PAGES
  • State & Props Discipline: clear data flow and maintainability
  • Use Case: Build a Button Atom, a SearchBar Molecule, and a Header Organism to compose complex UIs with predictable behavior

Quick Start

  • Create an Atom (Button.tsx) and a Molecule (SearchBar.tsx) to illustrate basic composition.
  • Assemble an Organism (Header) from atoms and molecules for a reusable UI section.
  • Integrate with state management patterns to avoid prop drilling and improve testability.