메뉴
토스 앱과 통일된 스타일의 UI 컴포넌트(버튼·카드·리스트 등) 를 앱에 붙여줍니다. 비게임 앱은 앱인토스 정책상 필수입니다.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
앱인토스 콘솔 등록에 필요한 초기 이미지(로고/가로형 썸네일)/텍스트 리소스를 점검하고, 이미지 자동 생성 옵션 제공. 세로형 스크린샷은 implement 이후 /ait-screenshots 가 담당
앱인토스 미니앱 전체 출시 플로우를 8단계(기획→리소스→스캐폴딩→TDS→구현→스크린샷→검수→빌드)로 순차 실행
앱의 .meta-dashboard.json을 PRD와 소스코드 분석으로 자동 생성합니다.
미니앱 기본 틀(React + Vite + granite)을 세팅하고, PRD 에 맞춰 라우팅/서버 데이터/TDS 를 자동 판단해 설치합니다.
typecheck→lint→ait build 순서로 빌드하고 .ait 번들 용량 검증 및 콘솔 업로드 절차 안내
Claude 스킬·에이전트가 정상 동작할 수 있는 환경인지 점검. 시스템·MCP·에셋 도구·환경변수를 한 번에 확인하고 실패 항목에 대한 해결 가이드를 제공.
| name | ait-tds-setup |
| description | 토스 앱과 통일된 스타일의 UI 컴포넌트(버튼·카드·리스트 등) 를 앱에 붙여줍니다. 비게임 앱은 앱인토스 정책상 필수입니다. |
| argument-hint | |
| mode | automated |
| step | 4 |
| label | 토스 스타일 UI |
| produces | TDS 패키지 + Provider 설정 |
| requires | ["ait-scaffold"] |
| inputs | [] |
| outputs | [{"key":"tdsPackages","type":"config","path":"apps/<appName>/package.json"}] |
| idempotencyKey | ait-tds-setup |
미니앱에 토스 앱과 비슷한 느낌의 버튼·카드·입력창·리스트 를 쉽게 쓸 수 있게 해줍니다.
설치 후에는 <Button>, <Typography>, <List> 같은 준비된 컴포넌트를 바로 꺼내 쓸 수 있어요.
게임 앱은 붙이지 않아도 됩니다 — 자체 스타일/캔버스를 쓰는 경우가 많아요.
Idempotent 체크: package.json 에 @toss/tds-mobile 이 이미 있으면 "이미 설치됨" 로그만 남기고 그대로 종료한다. Provider 래핑 여부만 한 번 더 확인하고, 누락됐으면 그 부분만 추가.
docs/launch-flow/04-tds-setup-guide.md를 읽어서 세팅 가이드를 확인합니다.
패키지 설치 + Provider 래핑 + 컴포넌트 import 테스트 + 타입체크를 순차 수행.
TDS 컴포넌트 사용 예시가 궁금하면 MCP search_tds_web_docs 로 검색 가능.
세팅 검증 체크리스트 점검 후 결과 보고.
설치·Provider 래핑·typecheck 가 끝나면 짧은 완료 보고 한 번만 출력하고 세션을 마무리한다.
형식:
✅ TDS 세팅 완료
설치 패키지: @toss/tds-mobile, @toss/tds-colors, @toss/tds-common
Provider 래핑 확인 / typecheck OK
규칙: 완료 보고 1회 후 종료.