architecting-components
Defines rules for Atomic Design and separating logic from UI. Use when creating new components in the src directory.
Best use case
architecting-components is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Defines rules for Atomic Design and separating logic from UI. Use when creating new components in the src directory.
Teams using architecting-components should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/architecting-components/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How architecting-components Compares
| Feature / Agent | architecting-components | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Defines rules for Atomic Design and separating logic from UI. Use when creating new components in the src directory.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# Component Design Architecture ## When to use this skill - Structuring the `components/` directory. - Deciding where to place logic (Server vs Client). ## Folder Structure - `components/ui/`: Base shadcn/custom elements (Buttons, Inputs). - `components/shared/`: Reusable across multiple pages (Navbar, Footer). - `components/features/`: Complex logic-heavy components (TourCard, BookingForm). ## Design Rules - **Dumb UI**: Pure presentational components with props. - **Smart Logic**: Components or Server Pages that fetch data or handle state. - **Colocation**: Keep test files and local styles near the component. ## Instructions - **RSC First**: Use Server Components for data fetching. Use `'use client'` only when Interactivity (hooks, event listeners) is needed.
Related Skills
pcf-code-components
Understanding code components structure and implementation Triggers on: **/*.{ts,tsx,js,json,xml,pcfproj,csproj}
Next.js App Router & Server Components
Build Next.js 15 applications using App Router, Server Components, Client Components, Server Actions, and streaming. Apply when creating pages, handling data fetching, implementing routes, or optimizing performance.
hig-components-system
Apple HIG guidance for system experience components: widgets, live activities, notifications, complications, home screen quick actions, top shelf, watch faces, app clips, and app shortcuts.
hig-components-status
Apple HIG guidance for status and progress UI components including progress indicators, status bars, and activity rings.
hig-components-search
Apple HIG guidance for navigation-related components including search fields, page controls, and path controls.
hig-components-menus
Apple HIG guidance for menu and button components including menus, context menus, dock menus, edit menus, the menu bar, toolbars, action buttons, pop-up buttons, pull-down buttons, disclosure...
hig-components-layout
Apple Human Interface Guidelines for layout and navigation components.
hig-components-dialogs
Apple HIG guidance for presentation components including alerts, action sheets, popovers, sheets, and digit entry views.
hig-components-content
Apple Human Interface Guidelines for content display components.
assembling-components
Assembles component outputs from AI Design Components skills into unified, production-ready component systems with validated token integration, proper import chains, and framework-specific scaffolding. Use as the capstone skill after running theming, layout, dashboard, data-viz, or feedback skills to wire components into working React/Next.js, Python, or Rust projects.
App Components
Your approach to handling app components. Use this skill when working on files where app components comes into play.
architecting-networks
Design cloud network architectures with VPC patterns, subnet strategies, zero trust principles, and hybrid connectivity. Use when planning VPC topology, implementing multi-cloud networking, or establishing secure network segmentation for cloud workloads.