Component Spec작성자 Owl-Listener

Component Spec 스킬.

외형만큼 동작도 꼼꼼히 설명해 컴포넌트 하나를 구현할 수 있게 만드세요.

디자인 시스템
명세

소스 검토 · Component SpecSKILL.md

작업 디자인 시스템 산출물 • 구조 및 변형 명세 • 타입, 기본값, 필수 여부를 담은 props 표 • 상태, 동작, 접근성, 사용 규칙 시작하기 전에 컴포넌트의 목적, 시각적 변형, 대상 플랫폼을 제공하세요. 결과물은 구현과 테스트를 위한 명세이며, 구현된 컴포넌트가 아닙니다.

편집 요약 · 검토한 소스 2026-10-07 · 생성된 예시 아님

01 기능 소개

Component Spec: 라이브러리 컴포넌트 하나 명세하기

구조, API, 변형, 상호작용 상태, 접근성, 사용법을 다루는 단일 컴포넌트 계약입니다.

소스 기반 워크플로실행 벤치마크 아님

작업 방식

Component Spec는 단일 design-system 컴포넌트를 정의합니다. 구조, 변형, API 속성, 상호작용 상태, 반응형 동작, 접근성, 사용법을 중심으로 인수인계를 구성하며, 필수 요소와 선택 요소를 명확히 구분합니다.

목적은 디자이너와 개발자 간의 합의입니다. 버튼의 로딩 동작이나 대화상자의 포커스 복귀는 정적인 스크린샷으로 담을 수 없습니다. 그래서 소스는 예시와 엣지 케이스를 요구하며, 더 넓은 문서 템플릿과 여러 컴포넌트에 걸친 패턴은 이 작업의 범위 밖에 둡니다.

예상 산출물

구조 및 변형 명세
타입, 기본값, 필수 여부를 담은 props 표
상태, 동작, 접근성, 사용 규칙

예시 브리프 보기

브리프에서 검토까지

01
컴포넌트 경계 설정
목적, 사용 시점, 필수 요소와 선택 요소를 정의합니다.
02
API와 상태 명세
속성과 변형의 이름을 정한 뒤 기본, 포커스, 비활성, 로딩 및 관련 오류 동작을 설명합니다.
03
상호작용 세부 사항 해결
구현에서 확인할 수 있는 예시와 함께 키보드, 포커스, 반응형, 엣지 케이스 동작을 문서화합니다.

02 활용 상황

사용 시점

컴포넌트의 목적, 시각적 변형, 대상 플랫폼을 제공하세요. 결과물은 구현과 테스트를 위한 명세이며, 구현된 컴포넌트가 아닙니다.

적합한 경우

새 라이브러리 컴포넌트여러 팀이 같은 컨트롤을 각자 다르게 구현하기 전에 사용하세요.
모호한 인수인계변형 간에 무엇이 달라지는지, 상태 전환이 어떻게 동작하는지 명확히 합니다.

확인할 한계

라이브러리 전체가 아님범위는 전체 design-system 아키텍처가 아닌 컴포넌트 하나입니다.
명세는 구현이 아님문서로 작성한 접근성 규칙도 여전히 구현하고 테스트해야 합니다.

준비할 입력

컴포넌트 목적사용자 작업과 관련 컨트롤을 설명하세요.
기존 예시시각적 변형과 현재 동작을 제공하세요.
플랫폼 계약프레임워크, 입력 방식, 접근성 기대치를 명시하세요.

03 핵심 결정

중요한 결정

동작을 최우선으로
상태와 전환이 개발자의 추측이 아닌 인수인계의 일부가 됩니다.
공통 어휘
prop 이름과 구조 레이블이 디자인 결정과 구현을 연결합니다.

04 예시 브리프

집중된 브리프로 시도하기

아래 예시 브리프는 테스트되지 않았습니다. 사용하기 전에 스킬의 설정을 확인하세요.

설정 검토

이 작업의 SKILL.md를 designer-skills 저장소에서 에이전트가 지원하는 스킬 위치에 불러오세요. 진입 파일에는 범용 설치 명령이 정해져 있지 않습니다.

업스트림 소스 파일

https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/design-systems/skills/component-spec/SKILL.md

컴포넌트의 목적, 시각적 변형, 대상 플랫폼을 제공하세요. 결과물은 구현과 테스트를 위한 명세이며, 구현된 컴포넌트가 아닙니다.

산출물 하나로 시작

스킬을 실행하기 전에 이 브리프의 범위, 소스 자료, 제약 조건을 상황에 맞게 조정하세요.

예시 브리프

component-spec를 사용해 비동기 제출 버튼을 문서화하세요. 구조, 크기, props, 포커스, 로딩, 비활성, 오류 동작을 명세하세요. 반복 클릭과 키보드 활성화를 설명하고, 대신 링크를 써야 하는 경우도 포함하세요. 컴포넌트가 이미 구현되었다고 주장하지 마세요.

결과 점검

실제 출력을 다음의 관찰 가능한 기준과 비교해 확인하세요.

속성에 기본값과 필수 여부가 명시되어 있습니다.
관련된 모든 상태에 동작 예시가 있습니다.
키보드와 포커스 기대치를 테스트할 수 있습니다.

OpenDesign은 코딩 에이전트를 위한 로컬 디자인 작업 공간을 제공합니다. 이 목록이 스킬이 번들로 포함되어 있다거나 외부 도구, 자격 증명, 소프트웨어 의존성이 포함되어 있다는 뜻은 아닙니다.

OpenDesign 다운로드 빠른 시작 읽기

05 출처 및 라이선스

소스 및 라이선스

이 페이지는 아래에 링크된 고정 소스 리비전을 설명합니다. 업스트림의 동작과 요구 사항은 바뀔 수 있습니다.

소스 소유자: Owl-Listener
저장소: Owl-Listener/designer-skills
스킬 파일: design-systems/skills/component-spec/SKILL.md
라이선스: MIT
검토한 스냅샷: 2026-10-07 · 9a6930cf84a8

편집 소스 요약

구조, API, 변형, 상호작용 상태, 접근성, 사용법을 다루는 단일 컴포넌트 계약입니다.

링크된 소스를 바탕으로 OpenDesign이 작성한 자체 요약입니다. 저장소 스타는 특정 시점의 인기 지표일 뿐, 스킬 사용량이나 품질 점수가 아닙니다.

06 시작 전 질문

시작 전 질문

프로덕션 코드를 생성하나요?

개발자가 구현할 수 있는 명세를 만드는 것을 목적으로 합니다. 컴포넌트 제작과 테스트는 별도 단계입니다.

접근성도 포함하나요?

네. 역할, 키보드 탐색, 스크린 리더 동작, 포커스 관리가 명시적인 섹션으로 포함됩니다.

패턴 라이브러리와 어떻게 다른가요?

이 스킬은 컴포넌트 하나를 명세하는 반면, 패턴은 더 넓은 문제와 해결 방식의 구성을 설명합니다.

OpenDesign

다음 디자인 반복을 위한 여유를 만드세요.

브리프, 소스 자료, 디자인 작업을 로컬 작업 공간에 함께 보관하세요. 워크플로에 추가하기 전에 스킬 자체의 설정을 확인하세요.

OpenDesign 다운로드 디자인 스킬 둘러보기