AgentSkillsCN

atomic-organism

创建或重构 React ORGANISM（由 Molecule/ATOM 组合而成的有意义的 UI 区块）。可用于导航栏、产品网格、评论列表、表单、对话框等。ORGANISM 可接收数据与回调函数，但应确保跨页面的可复用性。

SKILL.md
--- frontmatter
name: atomic-organism
description: Create or refactor a React ORGANISM (a meaningful UI section composed of molecules/atoms). Use for nav bars, product grids, comment lists, forms, dialogs, etc. Organisms may accept data and callbacks but should remain reusable across pages.
argument-hint: "[ComponentName] [optional: brief intent]"

Atomic Design: ORGANISM (React Functional Components)

You are creating an ORGANISM: a larger section of UI composed of molecules and atoms.

Hard rules

  1. •Functional components only.
  2. •Data boundary:
    • •Organisms can accept data via props and emit events via callbacks.
    • •Avoid direct fetching inside the organism unless the project explicitly uses component-level fetching patterns (if so, isolate it and justify).
  3. •Dependency discipline:
    • •Organisms may import molecules/atoms and shared utilities.
    • •Avoid importing page-level modules or routing concerns.
  4. •State:
    • •Local state for UI coordination is fine (open/close, selected tab).
    • •Prefer lifting state up when it becomes cross-organism/page relevant.
  5. •Testability:
    • •Prefer pure props-driven behavior; inject dependencies via props.
    • •Use stable selectors (role, labelText) rather than brittle test IDs unless necessary.

Output expectations

  • •Provide:
    1. •Component.tsx
    2. •Component.test.tsx (behavior-driven)
    3. •Component.stories.tsx (mock data variants)

Recommended folder conventions

  • •src/components/organisms/<ComponentName>/...

Organism checklist

  • • Clear props contract (data in, events out)
  • • No routing/global singleton coupling unless standard for the repo
  • • Uses semantic landmarks where appropriate (nav, main, section, headings)