AgentSkillsCN

architecting-components

定义原子设计规则，并将逻辑与 UI 分离。当您在 src 目录中创建新组件时，可使用此规则。

SKILL.md
--- frontmatter
name: architecting-components
description: Defines rules for Atomic Design and separating logic from UI. Use when creating new components in the src directory.

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.