기본 Skill 2 - react-standard-screen

사용자가 중요하게 생각하는 표준화된 레이아웃은 프롬프트 한 번으로 유지되지 않는다. 기존 컴포넌트와 레이아웃 규칙을 강제로 읽고 재사용하게 만드는 Skill이다.

 

경로 : .agents/skills/react-standard-screen/SKILL.md

 

---
name: react-standard-screen
description: 저장소에 이미 존재하는 표준 레이아웃, 디자인 토큰, 공통 컴포넌트, 훅, API 사용 패턴, 테스트 방식을 사용하여 React TypeScript 화면을 새로 만들거나 기존 화면을 표준화한다. 새로운 화면을 만들거나 기존 화면을 표준화할 때 사용한다. 백엔드만 변경하는 작업이나 데이터베이스만 변경하는 작업에는 사용하지 않는다.
---

# 목적

일회성 레이아웃이나 일관되지 않은 UI 패턴을 새로 만들지 않고 React 화면을 구현한다.

# 필수 확인 자료

코드를 수정하기 전에 다음 내용을 확인한다.

1. 프로젝트 루트의 `AGENTS.md`
2. `frontend/AGENTS.md`
3. `docs/frontend/layout-rules.md`
4. `docs/frontend/component-catalog.md`
5. 이번에 만들거나 수정할 화면과 가장 유사한 기존 기준 화면
6. 이번 요구사항을 처리하는 데 사용할 수 있는 기존 공통 컴포넌트

# 작업 절차

1. 구현하려는 화면의 유형을 확인하고, 가장 유사한 기존 기준 화면을 찾는다.

2. 이번 화면에서 재사용할 기존 공통 컴포넌트 목록을 작성한다.

3. 다음 화면 상태 중 빠진 것이 있는지 확인한다.

   - 최초 상태
   - 로딩 상태
   - 데이터가 없는 상태
   - 정상 처리 상태
   - 입력값 검증 오류 상태
   - 서버 오류 상태
   - 비활성화 상태
   - 읽기 전용 상태
   - 권한 부족 상태가 필요한 경우 해당 상태

4. 코드를 수정하기 전에 짧은 구현 계획을 제시한다.

5. 요구사항을 충족하는 데 필요한 가장 작은 범위만 변경한다.

6. 다음 조건을 모두 충족하지 않는다면 새로운 공통 컴포넌트를 만들지 않는다.

   - 기존 컴포넌트만으로 요구사항을 처리할 수 없다.
   - 새 컴포넌트가 다른 화면에서도 재사용될 가능성이 있다.
   - 새 컴포넌트의 사용 방법과 인터페이스가 문서화된다.
   - 새 컴포넌트의 Storybook Story와 테스트가 추가된다.

7. 프런트엔드 검증 명령을 실행한다.

8. 최종 Git Diff를 검토하여 다음 문제가 없는지 확인한다.

   - 기존 표준과 다른 스타일
   - 기존 공통 컴포넌트와 중복되는 컴포넌트
   - 요청 범위를 벗어난 변경

# UI 규칙

- 기존 디자인 토큰을 사용한다.

- 색상값을 직접 하드코딩하지 않는다.

- 프로젝트에 정의되지 않은 임의의 간격값을 사용하지 않는다.

- 저장소에서 명시적으로 허용하지 않는다면 인라인 스타일을 사용하지 않는다.

- 사용할 수 있는 공통 컴포넌트가 이미 존재하는 경우 화면 내부에 별도의 버튼, 모달, 테이블, 입력창 또는 상태 표시 컴포넌트를 만들지 않는다.

- 공통 레이아웃 컴포넌트를 우회하여 화면을 구성하지 않는다.

- 키보드로 화면을 조작할 수 있는 기능과 눈에 보이는 포커스 표시를 유지한다.

- 라벨과 입력값 검증 메시지는 기존 화면과 일관되게 작성한다.

- TypeScript의 엄격한 타입 검사를 유지한다.

- 타입 오류를 없애기 위한 목적으로 `any`를 사용하지 않는다.

# 검증

`AGENTS.md`에 정의된 검증 명령을 실행한다.

최소한 다음 항목을 검증한다.

- Lint 검사
- TypeScript 타입 검사
- 컴포넌트 테스트
- 관련 Storybook Story
- 운영용 Production Build

# 필수 최종 보고

작업이 끝나면 다음 내용을 보고한다.

1. 기준으로 사용한 기존 화면
2. 재사용한 공통 컴포넌트
3. 새로 만든 컴포넌트와 새로 만든 이유
4. 변경한 파일
5. 실행한 테스트와 명령
6. 기준 화면과 비교하여 아직 남아 있는 시각적 차이 또는 동작 차이

 

 

사용 예시

$react-standard-screen

사용자 조회 화면을 구현해라.

요구사항:
- 사용자명과 부서로 검색할 수 있어야 한다.
- 검색 결과를 테이블로 표시한다.
- 검색 결과가 없으면 안내 메시지를 표시한다.
- 조회 중에는 로딩 상태를 표시한다.
- 서버 오류가 발생하면 오류 메시지를 표시한다.

작업 규칙:
- 기존 표준 검색 화면을 기준으로 사용한다.
- 기존 공통 검색 패널과 데이터 테이블을 재사용한다.
- 새로운 스타일을 임의로 만들지 않는다.
- 코드를 수정하기 전에 기준 화면과 재사용할 컴포넌트를 보고한다.
- 관련 테스트와 프런트엔드 검증 명령을 실행한다.

 

이런 Skill이 있어야 Codex가 화면마다 새로운 버튼, 입력창, 간격, 모달을 마음대로 만드는 문제를 줄일 수 있다.