Menü
새로운 뿌클로드 페이지를 추가합니다. Figma 디자인 분석, 데이터 추가, 브라우저 렌더링 검증을 포함합니다.
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Basierend auf der SOC-Berufsklassifikation
SCC 앱 OTA 배포 + 웹 배포 절차. "OTA 배포해줘", "앱 출시", "웹 배포", "web-deploy", "프로덕션에 올려줘" 같은 명시적 배포 요청 시에만 사용. 배포는 one-way door — 이 skill의 절차를 벗어나 임의로 배포하지 않는다.
Notion에 작성한 콘텐츠를 web.staircrusher.club/articles 정적 페이지로 발행해 검색엔진(SEO) + AI답변엔진(AEO/GEO)에 노출시킨다. "노션 글 발행해줘", "아티클 올려줘", "articles 갱신", "노션 콘텐츠 검색에 걸리게", "article list DB 렌더링" 같은 요청 시 사용. 사람은 Notion에 제목+본문만 쓰고, 이 스킬이 메타데이터(slug/summary/ogImage/tags/faq)를 LLM으로 생성해 DB에 라이트백한 뒤, 결정론적 노드 스크립트로 본문을 HTML로 변환한다. last_edited_time 기반 incremental — 신규/변경/삭제 문서만 처리해 토큰을 아낀다.
React Native 앱에 새 화면을 추가합니다. ScreenLayout, Navigation 등록, SccXxx 컴포넌트 사용을 포함합니다.
SCC 앱 작업 후 검증 절차 + 네이티브(iOS/Android) 코드 규칙. 코드 변경 후 lint/tsc 검증, ios/android 디렉토리 변경 시 Release 빌드 검증, 네이티브 모듈(RCTBridgeModule/ReactContextBaseJavaModule) 작성 규칙을 다룬다. "네이티브 모듈 추가", "iOS 빌드 깨져", "release 빌드 검증", "브릿지 메서드", "CI에서만 빌드 실패", "Bridgeless" 같은 작업/증상 시, 그리고 scc-app 코드 변경을 마무리할 때 사용.
뿌클로드 페이지 개발. 새 venue 추가, 기존 venue 수정, Figma 디자인 반영 시 사용.
| name | bbucle-road-create |
| description | 새로운 뿌클로드 페이지를 추가합니다. Figma 디자인 분석, 데이터 추가, 브라우저 렌더링 검증을 포함합니다. |
Figma MCP로 디자인 분석
- get_screenshot: 전체 페이지 스크린샷
- get_design_context: 각 섹션별 상세 스타일 (nodeId별로 호출)
- get_metadata: 구조 파악
기존 데이터 구조 파악
web/screens/BbucleRoadScreen/config/bbucleRoadData.ts 읽기변경 범위 판단
bbucleRoadData.ts 수정BbucleRoadScreen/sections/ 컴포넌트 수정필수 섹션:
id: 페이지 고유 ID (kebab-case)title: 페이지 제목titleImageUrl, headerBackgroundImageUrl: 이미지 (placeholder 가능)wheelchairUserCommentHtml: 휠체어 사용자 한마디routeSection: 동선정보 (지하철, 콜택시, 자차, 버스 등)ticketInfoSection: 매표 및 입장동선seatViewSection: 좌석 시야nearbyPlacesSection: 근처 맛집reviewSection: 후기ctaFooterSection: CTA 버튼overviewSection: 한눈에 보기web/screens/BbucleRoadScreen/config/bbucleRoadData.ts에 새 항목 추가:
'page-id': {
"id": "page-id",
"title": "휠체어로 ??? 어때?",
// ... 전체 데이터 구조
}
# 각 섹션별 nodeId로 Figma 스크린샷 획득
get_screenshot(nodeId: "<섹션별 nodeId>")
주요 섹션 nodeId 예시 (Figma URL에서 추출):
node-id=XXX:YYYnode-id=XXX:YYYnode-id=XXX:YYYnode-id=XXX:YYYyarn web # Dev 서버 실행
cd web/screens/BbucleRoadScreen/scripts
npx tsx capture-screenshots.ts <pageId> desktop
Claude가 두 이미지를 직접 보고 비교:
get_screenshot 결과)육안으로 확인할 항목:
각 섹션마다 아래 과정 수행:
Figma 스타일 추출
get_design_context로 해당 섹션 nodeId의 상세 스타일 확인현재 데이터/컴포넌트 스타일 확인
bbucleRoadData.ts의 HTML 인라인 스타일 확인.tsx) 스타일 확인1:1 비교표 작성 (MANDATORY)
| 항목 | Figma | 현재 데이터/컴포넌트 | 일치여부 |
|------|-------|---------------------|---------|
| 배지 배경색 | #fff | #0C76F7 | ❌ |
| 배지 테두리 | 1px solid #D8D8DF | 없음 | ❌ |
| ... | ... | ... | ... |
차이점 발견 시 즉시 수정
스크린샷 재캡처 후 재비교 (4-0부터 반복)
| 검증 항목 | 확인 방법 |
|---|---|
| 배경색 | filled (파란 배경) vs outline (흰 배경+테두리) 구분 |
| 테두리 | border 유무 및 색상 (#D8D8DF 등) |
| 텍스트 색상 | 배경과 대비되는 색상 |
| border-radius | 50px (pill) vs 4px/8px/12px |
| padding | px 또는 em 단위 정확히 |
⚠️ 흔한 실수: Figma에서 outline 스타일인데 filled로 구현
| 검증 항목 | 확인 방법 |
|---|---|
| 중첩 구조 | 컴포넌트가 만드는 박스 + 데이터 HTML의 박스 = 이중 래핑 주의 |
| 배경색 | #F7F8FA (연회색) vs #fff (흰색) |
| border-radius | 4px vs 8px vs 12px |
| padding/gap | 정확한 수치 |
⚠️ 흔한 실수: 컴포넌트에서 박스+제목 렌더링 + 데이터 HTML에서도 박스+제목 = 중복
| 검증 항목 | 확인 방법 |
|---|---|
| font-size | px 또는 em 단위 |
| font-weight | 400 (regular) vs 500 (medium) vs 700 (bold) |
| line-height | px 또는 배수 |
| color | hex 코드 정확히 |
| 줄바꿈 위치 | <br> 위치 Figma와 동일 |
| 검증 항목 | 확인 방법 |
|---|---|
| 아이콘 타입 | SUBWAY, CAR, TAXI, BUS 등 |
| 크기 | width, height |
| 색상 | fill color |
sections/*.tsx)scc.page.link/NjHT (KSPO DOME용)인데 TLA에도 그대로 복사됨<a href="..."> 링크 URL을 Figma 디자인과 대조.tsx)의 styled-components 스타일이 Figma와 다를 수 있음NoticeBoxContainer의 배경색이 #FFF9E6 (연노랑)인데 Figma는 #fff + 테두리get_design_context로 Figma 스타일 추출 후 컴포넌트 스타일과 대조wheelchairUserTipHtml이 KSPO DOME 내용("주차장 실시간 혼잡도")인데 TLA에도 그대로 복사됨get_design_context 또는 get_screenshot)gap-8px이 데이터에서 gap: 4px로 잘못 적용됨get_design_context로 정확한 gap, padding, margin 수치 확인gap-[8px]) → 인라인 스타일 (gap: 8px) 변환get_design_context 결과에서 font-weight: 700 또는 Bold 폰트 확인<b> 또는 font-weight: 700 적용| 파일 | 설명 |
|---|---|
web/screens/BbucleRoadScreen/config/bbucleRoadData.ts | 페이지 데이터 |
web/screens/BbucleRoadScreen/index.tsx | 메인 컴포넌트 |
web/screens/BbucleRoadScreen/sections/*.tsx | 섹션 컴포넌트 |
web/screens/BbucleRoadScreen/scripts/capture-screenshots.ts | 스크린샷 캡처 |
<b> 태그 적용yarn lint 통과yarn tsc --noEmit 통과gocheok-skydome, kspo-dome| 도구 | 설명 | 용도 |
|---|---|---|
get_screenshot | 노드의 스크린샷 이미지 반환 | 시각적 비교용 - Claude가 이미지를 직접 볼 수 있음 |
get_design_context | UI 코드/스타일 컨텍스트 | 상세 스타일 수치 추출 (색상, 폰트, 패딩 등) |
get_metadata | 노드 구조 메타데이터 (XML) | 컴포넌트 구조 파악 |
get_variable_defs | 디자인 변수 정의 | 색상/폰트 변수 확인 |
Figma URL에서 node-id 파라미터 추출:
https://figma.com/design/xxx/yyy?node-id=1038-5703
→ nodeId: "1038:5703" (하이픈을 콜론으로 변환)
1. get_screenshot(nodeId: "섹션nodeId") → Figma 이미지
2. capture-screenshots.ts 실행 → 브라우저 이미지
3. 두 이미지를 **시각적으로 직접 비교**
4. 차이점 발견 → get_design_context로 상세 스타일 확인 → 수정
5. 반복
⚠️ 중요: get_screenshot은 이미지를 파일로 저장하지 않음. Claude가 메모리에서 직접 확인.