layout-analyzer은(는) 무엇을 하나요?
이 스킬은 Claude Code가 웹 페이지와 문서의 레이아웃 구조를 분석하고 시각화할 수 있도록 지원합니다.
개요
layout-analyzer는 개발자와 AI 에이전트가 복잡한 레이아웃을 이해하고, 접근성 문제를 식별하며, 반응형 디자인을 검증할 수 있도록 설계되었습니다. HTML/CSS 구조 분석, 박스 모델 시각화, 그리드/플렉스 레이아웃 파악, 요소 간 관계 및 계층 구조 매핑을 주요 기능으로 제공합니다.
지원 플랫폼
- Claude Code
- Cursor
- Codex
- 기타 AI 코딩 도구
사용 방법
레이아웃 분석을 시작하려면 분석할 웹 페이지의 URL 또는 HTML/CSS 소스 코드를 제공하세요. 스킬은 자동으로 구조를 파싱하고 시각화합니다.
주요 기능
- HTML/CSS 구조 분석: DOM 트리와 CSS 스타일시트를 분석하여 레이아웃 구조를 파악합니다.
- 박스 모델 시각화: 각 요소의 마진, 패딩, 테두리, 콘텐츠 영역을 시각적으로 표시합니다.
- 그리드/플렉스 분석: CSS Grid와 Flexbox 레이아웃의 구조와 아이템 배치를 분석합니다.
- 요소 관계 매핑: 부모-자식 관계, 형제 요소, 중첩 구조를 트리 다이어그램으로 매핑합니다.
예제
레이아웃 분석 시작: https://example.com
주의사항
- 분석 결과는 제공된 소스 코드의 정확성에 따라 달라질 수 있습니다.
- 동적으로 생성된 콘텐츠는 제한적으로 분석될 수 있습니다.
- 외부 리소스(폰트, 이미지 등)는 분석에 포함되지 않을 수 있습니다.