Menu
새로운 뿌클로드 페이지를 추가합니다. Figma 디자인 분석, 데이터 추가, 브라우저 렌더링 검증을 포함합니다.
Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.
Baseado na classificação ocupacional SOC
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가 메모리에서 직접 확인.