game-fe-agent/skills/markup-base/SKILL.md

name, description

name	description
markup-base	화면 설명, 스크린샷, 텍스트 명세를 받아 시멘틱 HTML + Tailwind CSS 기반의 Nuxt SFC 마크업을 생성합니다. 팀 공통 컨벤션(7단계 클래스 순서, ARIA, 반응형)을 자동 적용합니다. 다음 상황에서 반드시 사용하세요: - "이 화면 마크업해줘", "HTML 구조 만들어줘", "퍼블리싱해줘" - 화면 설명이나 스크린샷을 받고 컴포넌트 골격을 잡을 때 - Figma 없이 텍스트 명세나 와이어프레임으로 마크업을 시작할 때

기본 마크업 가이드 (markup-base)

화면 명세 → 시멘틱 HTML + Tailwind → Nuxt .vue SFC 골격을 생성합니다.

언제 사용하는가

• Figma 디자인 없이 화면 명세/스크린샷으로 마크업을 시작할 때
• 신규 페이지/섹션의 기본 구조를 빠르게 잡을 때
• 기존 마크업을 팀 컨벤션에 맞게 리팩토링할 때

입력

• 화면 설명 (텍스트), 와이어프레임 이미지, 또는 스크린샷
• 반응형 분기점 요건 (없으면 Tailwind 기본값 사용: sm 640px / md 768px / lg 1024px)
• 접근성 요건 (없으면 WCAG 2.1 AA 기본 적용)

---

작업 순서

Phase 1: 화면 구조 파악

1. 제공된 화면 명세 또는 이미지를 분석해 레이아웃 영역을 식별한다.
   • 반복 블록 → 컴포넌트 후보 표시
   • 상태가 있는 영역 (로딩, 에러, 빈 상태) 확인
2. 반응형 분기점을 파악한다.
   • 모바일 우선(mobile-first) 여부 확인
   • 중단점별 레이아웃 변화 정리

Phase 2: 시멘틱 구조 설계

1. HTML 시멘틱 태그를 선택한다.

   영역	권장 태그
   페이지 헤더	<header>
   주 내비게이션	<nav aria-label="...">
   주 콘텐츠	<main>
   사이드	<aside>
   콘텐츠 섹션	<section aria-labelledby="...">
   독립 콘텐츠	<article>
   페이지 푸터	<footer>

2. 인터랙션 요소를 식별한다.

   • 버튼: <button type="button"> (폼 외부), <button type="submit"> (폼 내부)
   • 링크: <a href="..."> (페이지 이동), <button> (동작 트리거)

Phase 3: Tailwind 클래스 적용

클래스 순서는 아래 7단계를 따른다:

1. 레이아웃       : flex, grid, block, hidden
2. 크기           : w-*, h-*, max-w-*, min-h-*
3. 여백           : m-*, p-*, gap-*, space-*
4. 배경/보더      : bg-*, border-*, rounded-*, shadow-*
5. 타이포그래피   : text-*, font-*, leading-*, tracking-*
6. 색상           : text-{color}, fill-*, stroke-*
7. 상태/반응형    : hover:, focus:, sm:, md:, lg:

조건부 클래스는 clsx 또는 cn 유틸리티를 사용한다.

Phase 4: ARIA 및 접근성 처리

• 아이콘 전용 버튼: aria-label 필수
• 모달/다이얼로그: role="dialog" aria-modal="true" aria-labelledby="..."
• 로딩 상태: aria-live="polite" 또는 aria-busy="true"
• 이미지: 의미 있는 이미지 alt 텍스트 / 장식용 alt=""
• 폼 레이블: <label for="..."> 또는 aria-label

Phase 5: Nuxt SFC 출력

<script setup lang="ts">
// Props / Emits / 로컬 상태만 포함
</script>

<template>
  <!-- 시멘틱 구조 -->
</template>

• <style>은 Tailwind로 커버 불가한 경우에만 추가
• scoped보다 Tailwind 유틸리티 우선

---

출력 형식

## 마크업: <화면명>

### 구조 개요
- 레이아웃: [설명]
- 반응형 분기: [없음 / sm, md, lg 각각 설명]
- 컴포넌트 분리 후보: [목록]

### 코드
\`\`\`vue
<script setup lang="ts">
...
</script>

<template>
...
</template>
\`\`\`

### 추가 작업 필요 항목
- [ ] 이미지 alt 텍스트 확정 필요
- [ ] 컬러 토큰 디자인 시스템 확인 필요