Css Menu

CSS 증상 사전 (css-menu)

화면이 깨졌다는 호소를 받았을 때, 이 사전으로 증상 → 범인 → 처방을 잇는다. 사용자는 CSS를 모른다고 전제한다. 속성 이름을 되묻지 말고 증상을 받아서 진단하라.

사전을 읽는 법

menu.json이 SSOT다. 항목마다:

• name.ko — 증상 (사용자가 실제로 하는 말)
• aliases — 같은 증상의 다른 표현들
• kind — direct(즉방형) 또는 branch(분기형). 이 구분이 이 사전의 핵심 규율이다
• culprits — 범인 후보, 확률 순
• rx (즉방형) — 한 줄 처방 / branches (분기형) — 갈림길 질문과 갈래별 처방
• ask — 사용자가 복사해 쓰는 요청 문장
• check — 고쳐졌는지 비개발자가 눈으로 확인하는 방법
• components/.html — 깨진 상태와 고친 상태가 나란히 든 실물 데모

유형 규율 — 즉방형과 분기형

즉방형(direct): 상황이 무엇이든 처방이 같은 항목. rx대로 바로 고쳐도 된다.

분기형(branch): 상황에 따라 처방이 갈리는 항목 (한글 줄바꿈, 줄 간격, 팝업 겹침, 마지막 카드 정렬 등). 분기형에서는 절대 바로 고치지 않는다:

1. 먼저 branches의 갈림길 질문으로 어느 상황인지 진단해서 사용자에게 보고한다
2. 어느 범위에 적용할지 확인받는다
3. 그다음 고친다

예: "한글이 끊겨요"에 무조건 word-break: keep-all을 전역으로 깔면, 좁은 표 칸이 뚫린다. 갈림길(제목·본문인가 / 좁은 칸인가 / URL·코드인가)을 먼저 밝히고 범위를 좁혀 적용한다.

모드 1 — 증상 통역

사용자가 증상을 말하면 ("아래가 잘려요", "덜컹거려요", "두 번 눌러야 돼요"):

1. aliases까지 뒤져 가장 가까운 항목을 찾는다
2. 항목의 범인 후보를 사람 말로 알려준다 (속성명은 괄호 보조로만)
3. 즉방형이면 처방을 제시하고, 분기형이면 갈림길 질문부터 던진다

매핑이 애매하면 후보 2~3개를 증상 문장으로 제시하고 고르게 한다.

모드 2 — 코드 진단·수정

프로젝트 코드에 접근할 수 있다면:

1. 증상에 해당하는 항목의 culprits를 체크리스트로 삼아 실제 코드에서 범인을 찾는다
2. 찾은 범인을 사용자에게 먼저 보고한다 ("이 카드에 overflow hidden이 걸려 있어서 메뉴가 잘렸어요")
3. 즉방형은 바로 고치고, 분기형은 적용 범위를 확인받고 고친다
4. 고친 뒤 check의 확인 방법을 알려준다 ("이제 창 높이를 바꿔도 가운데면 성공이에요")

모드 3 — 예방 (만들 때부터)

새 화면을 만들 때 이 사전의 상습범들을 미리 피한다:

• 이미지엔 max-width 100%, 목록 간격은 gap, 한글엔 word-break keep-all(넓은 지면 한정)
• 앱형 화면은 스크롤 주인 하나(본문), flex 체인에 min-height 0
• 모바일: 높이 100dvh, 탭 타깃 44px, 입력칸 16px, hover 의존 금지
• 색은 배경+글자 세트로, 다크 모드도 세트째

모드 4 — 확인 코치

수정 후에는 반드시 check를 사용자 언어로 전달한다. "고쳤어요"로 끝내지 말고 "이렇게 해보면 확인돼요"까지가 이 스킬의 완료 조건이다.

금지

• 사용자에게 CSS 속성명을 아느냐고 되묻지 않는다
• 분기형 항목에서 진단 없이 전역 처방을 하지 않는다
• 증상과 무관한 리팩터링을 끼워 넣지 않는다

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: hanmariyang
• Source: hanmariyang/giting-skills
• License: MIT
• Homepage: https://hanmariyang.github.io/giting-skills/

Install and usage instructions live in the source repository linked above.