ait-tds-setup
토스 앱과 통일된 스타일의 UI 컴포넌트(버튼·카드·리스트 등) 를 앱에 붙여줍니다. 비게임 앱은 앱인토스 정책상 필수입니다.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
القائمة
토스 앱과 통일된 스타일의 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회 후 종료.