SrRusian/atomic-page-builder

Atomic Page Builder

기존 컴포넌트로 페이지를 구성합니다. 이 스킬은 조합을 담당하고, atomic-design은 생성을 담당합니다.

규칙

수행해야 할 것	수행하지 말아야 할 것
디자인 시스템에서 컴포넌트 가져오기	새로운 원자, 분자 또는 유기체 만들기
디자인 소스(Figma, 명세서, 목업)에서 레이아웃 값 가져오기	그리드, 간격 또는 패딩 추측하기
토큰에서 읽는 범위 지정 스타일 사용하기	하드코딩된 값 사용 (#333, 24px)
반응형 동작을 포함하여 디자인과 정확히 일치시키기	값 반올림 또는 "개선" 추가하기
프로젝트의 컴포넌트 라이브러리만 사용하기	프로젝트가 사용하지 않는 외부 UI 라이브러리 가져오기

atomic-design으로 전환

다음과 같은 경우 atomic-design으로 전환합니다:

• 필요한 원자, 분자 또는 유기체가 존재하지 않는 경우
• 새로운 토큰이 필요한 경우
• 디자인에서 토큰 값이 변경되어 먼저 업데이트해야 하는 경우

작업 흐름

1. 레이아웃 사양 얻기. 디자인 소스(Figma MCP, 명세서, 스크린샷)가 있으면 그리드, 간격, 패딩, 마진 및 중단점을 추출합니다. 없으면 요청하거나 명시적으로 가정을 명시합니다. 페이지별 재정의를 기록합니다.
2. 목록화. 프로젝트에 이미 있는 컴포넌트(원자, 분자, 유기체, 템플릿)와 해당 props를 나열합니다.
3. 갭 분석. 페이지의 각 영역을 기존 컴포넌트에 매핑합니다. 일치하지 않는 항목을 나열합니다.
4. 구성 또는 중단.
   • 모든 항목이 존재함: 사양과 1:1로 일치하도록 페이지를 구성합니다.
   • 누락된 항목이 있음: 중단하고, 갭을 보고한 후 atomic-design으로 전환합니다.
5. 검증. 모바일, 태블릿 및 데스크톱 너비에서 디자인과 비교합니다.

페이지 패턴

/** Dashboard page. Layout from: <design link or node id> */
import { DashboardLayout } from '@/design-system/templates/DashboardLayout';
import { Card } from '@/design-system/molecules/Card';
import { DataTable } from '@/design-system/organisms/DataTable';
import styles from './Dashboard.module.css';

export const Dashboard = () => (
  <DashboardLayout>
    <div className={styles.statsGrid}>
      <Card title="Revenue">$12,450</Card>
    </div>
    <DataTable columns={columns} data={data} />
  </DashboardLayout>
);

.statsGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-4);
}
@media (min-width: 768px) {
  .statsGrid { grid-template-columns: repeat(3, 1fr); gap: var(--spacing-6); }
}

프로젝트에 맞게 가져오기 경로와 스타일링 방식을 조정하세요.

검증

실제 브라우저(playwright-cli)에서 375, 768, 1440px 너비와 라이트/다크 테마로 페이지를 렌더링하고, 콘솔을 읽고 디자인 소스와 비교하세요. 또한 제목 순서, 랜드마크, 키보드 흐름, 로딩, 빈 상태 및 오류 상태를 확인하세요.

함께 사용

필요사항	스킬 또는 도구
누락된 컴포넌트 또는 토큰	atomic-design (필수 도우미)
페이지 수준 비평 또는 다듬기	impeccable
접근성 감사	fixing-accessibility, design:accessibility-review
페이지 메타데이터, 제목, Open Graph	fixing-metadata
엔지니어링에 전달	design:design-handoff

추가 규칙

• 템플릿의 슬롯에서 구성하고, 컴포넌트 내부에 접근하거나 스타일을 재정의하지 마세요.
• 페이지별 스타일은 레이아웃(그리드, 간격, 배치)으로 제한되며, 시각적인 것은 컴포넌트 또는 토큰에 속합니다.
• 컴포넌트를 복사하여 수정하지 말고, atomic-design을 통해 변형을 요청하세요.
• 페이지를 확인할 때 실제 대표 콘텐츠(긴 이름, 빈 목록, 오류)를 전달하세요.
• 문서 제목을 설정하고 페이지당 하나의 h1을 설정하세요.
• 페이지 파일은 구성 및 데이터 연결만 포함하며, 재사용 가능한 UI 로직은 포함하지 않습니다.

참조

파일	읽어야 할 때
references/design-source-extraction.md	레이아웃 값 추출 및 페이지 사양 작성 시
references/inventory-and-gaps.md	컴포넌트 목록화 및 갭 찾기 시
references/composition-patterns.md	레이아웃, 슬롯, 데이터 상태, 가져오기 순서 관련

출력 체크리스트

• 레이아웃 값이 디자인 소스에서 나왔으며, 추측이 아님
• 반응형 동작이 디자인과 일치
• 모든 가져오기가 프로젝트의 디자인 시스템에서 이루어짐
• 하드코딩된 값이 0개
• 새로운 컴포넌트가 0개
• 디자인 링크가 페이지 파일에 문서화됨