GitHub 요즘 뜨는직접 실행 · 12회 성공

최악 데이터로 컴포넌트를 깨뜨려 보고서를 쓰는 스킬, break-ui

스킬 15개를 모은 레포에서 break-ui 하나를 직접 12번 실행한 기록과 설치 명령입니다.

기준: 2026-10-22T00:22:44+00:00 · 증가량은 GitHub 트렌딩(Markdown 언어 목록) 이번 주 스타 값

claude-codeskills

emilkowalski/skills

https://github.com/emilkowalski/skills · ⭐ 48,425 · 트렌딩(Markdown 목록) 이번 주 +2,238

원본은 그대로 두고 정상·최악 데이터 화면을 토글로 보여 주며, 깨진 곳과 고치는 법을 보고합니다. 고치기는 요청할 때만 합니다(SKILL.md 기준).

설치 방법

둘 중 하나를 고르면 됩니다(둘 다 빈 임시 HOME에서 시험함). skills CLI는 기본으로 사용 통계를 skills.sh로 보내고 명령 앞에 DISABLE_TELEMETRY=1을 붙이면 끕니다. 12번의 실행은 이 명령이 아니라 skills/break-ui 폴더만 복사해 /break-ui로 불렀습니다(설치가 아니라 직접 실행).

방법 1 · README 명령 (스킬 15개 전체가 대상, 시험은 -y로 15개 모두 설치)

npx skills@latest add emilkowalski/skills

방법 2 · break-ui 하나만 설치 (README에는 없고 skills CLI 문서의 --skill 옵션)

npx skills@latest add emilkowalski/skills --skill break-ui

2026-03-16에 만들어진 레포로(생성 219일) 누적 스타 48,425개이고, 집계 시점의 GitHub 트렌딩(Markdown 언어 목록) 주간 스타 2,238·일간 382, 최근 7일 새 포크 100개 이상입니다(100개까지만 세는 상한이고 7일 스타 증가량은 재지 못했습니다). 컴포넌트 12개로 실행하자 12번 모두 같은 화면을 정상·최악 데이터로 바꿔 보는 토글 페이지와 Part 1~3 보고서가 나왔고, 고치기까지 시킨 2번은 같은 최악 데이터의 고치기 전·후를 나란히 볼 수 있었습니다.

12회성공 실행

12회전체 실행

386초평균 소요

필요 조건

Claude Code(스킬 폴더를 읽는 에이전트. 시험: 2.1.304, 그 밖의 도구에서는 시험하지 않았다)
공식 설치 명령(npx skills@latest add)은 Node.js 22.20 이상(skills CLI 1.7.4 engines)과 git이 필요하다(skills CLI가 레포를 git clone으로 받는다. 1.7.4 소스를 읽어 확인했고 git 없이는 돌려 보지 않았다)
스킬 자체는 Markdown 문서 2개(SKILL.md·CATALOG.md)뿐이라 따로 설치할 실행 환경·API 키가 없다
화면을 찍어 비교하는 단계(Phase 4)는 브라우저 도구가 있을 때만 한다. 없으면 CSS를 읽고 추론했다고 밝히라고 SKILL.md가 적는다(이번 시험은 헤드리스 Chrome을 열어 줌)

README 명령은 레포의 스킬 15개가 대상이고, 시험에서는 -y를 붙여 15개를 모두 설치했다(-y 없는 대화형 화면은 시험하지 않았다). break-ui 하나만 원하면 --skill break-ui를 붙인다(CLI 문서 기준). 대상 없이 /break-ui만 부르면 한 줄 인사만 하고 기다리므로 컴포넌트 경로나 설명을 함께 적는다. 고치기는 '+ fix'나 보고 뒤 'fix all'·'fix 1, 3'으로 따로 요청한다(SKILL.md 기준, 시험은 '+ fix'만 했다). 결과 토글은 개발용이라 배포 페이지에 넣지 말라고 SKILL.md가 적는다.

시험할 때 실제로 실행한 명령

# $T = 시험용 작업 폴더(전체 경로는 생략)
git clone --depth 1 https://github.com/emilkowalski/skills $T/src  (커밋 2d22863, 2026-10-11)
README 공식 명령을 빈 임시 HOME에서 시험: cd $OFF/proj && env -i PATH=/usr/local/bin:/usr/bin:/bin HOME=$OFF/home TMPDIR=$OFF/tmp npm_config_cache=$T/.npm-cache npm_config_prefix=$OFF/.npm-global npm_config_ignore_scripts=true DISABLE_TELEMETRY=1 DO_NOT_TRACK=1 GIT_TERMINAL_PROMPT=0 timeout 300 npx -y skills@1.7.4 add emilkowalski/skills -a claude-code -y  (OFF=/tmp/gitstar-sandbox/emilkowalski__skills/official, GITHUB_TOKEN 없음 → 종료 코드 0, 약 1초, ./.claude/skills/ 아래 스킬 15개(23개 파일, copied) + skills-lock.json. 클론의 skills/와 diff -r 차이 없음(break-ui의 SKILL.md·CATALOG.md sha256도 같음). 임시 HOME은 비어 있었고 진짜 HOME의 ~/.claude/skills·~/.agents·~/.npm/_npx는 바뀌지 않음, evidence/official_install/)
같은 환경에서 break-ui만: timeout 300 npx -y skills@1.7.4 add emilkowalski/skills --skill break-ui -a claude-code -y  ($OFF/proj_one → 종료 코드 0, 'Selected 1 skill: break-ui', ./.claude/skills/break-ui/(SKILL.md·CATALOG.md) + skills-lock.json, 클론과 diff -r 차이 없음, evidence/official_install/one_*)
mkdir -p $SB/.claude/skills && cp -a $T/src/skills/break-ui $SB/.claude/skills/break-ui  (실행마다 새 샌드박스 /tmp/gitstar-sandbox/emilkowalski__skills/runNN, tools/mk_sandbox.sh. 위 --skill break-ui 공식 설치 결과와 같은 위치·같은 파일. 레포의 다른 스킬 14개는 복사하지 않음)
claude -p "/break-ui …" --output-format json --permission-mode acceptEdits --allowedTools Read Glob Grep Write Edit "Bash(python3:*)" "Bash(google-chrome:*)" … --disallowedTools AskUserQuestion WebFetch WebSearch Skill Task Agent "Bash(curl:*)" "Bash(wget:*)" "Bash(npm:*)" "Bash(npx:*)" "Bash(node:*)" "Bash(pip:*)" "Bash(git:*)" "Bash(rm:*)" "Bash(xdg-open:*)" "Bash(open:*)" "Bash(python3 -m webbrowser:*)" … --strict-mcp-config --no-chrome --max-budget-usd 2  (tools/trial.sh → run_once.py --sandbox $SB --timeout 1200. 환경: HOME 그대로, TMPDIR=$SB/.cache/tmp, PATH=$SB/.bin:$PATH(Chrome 래퍼·막이), BROWSER=막이, DISPLAY·WAYLAND_DISPLAY·DBUS_SESSION_BUS_ADDRESS 지움, XDG_RUNTIME_DIR=$SB/.cache/xdg. 입력 파일 실행은 inputs/runNN/을 샌드박스에 먼저 복사)

보안 검토: pass — 레포 29개 파일 가운데 실행 코드가 없다(Markdown 25개 + LICENSE·.gitattributes·.gitignore·빈 .pl). 훅·MCP·플러그인 매니페스트·스크립트·자격 증명 읽기·텔레메트리 0건. break-ui(SKILL.md·CATALOG.md)는 패키지 설치나 외부 접속을 시키지 않고, 저장소 내용은 지시가 아니라 데이터로 다루라는 규칙(Hard Rule 6)과 '보고 먼저, 고치기는 요청할 때만' 규칙(Hard Rule 5)이 있다. 폭 없는 문자는 이모지 결합(ZWJ)과 템플릿 코드 울타리 앞 ZWSP뿐이다. 공식 설치 도구 skills CLI는 기본 사용 통계를 skills.sh로 보내며 DISABLE_TELEMETRY·DO_NOT_TRACK으로 끈다(코드 확인, security_review.md).

써 보니

부르는 법: /break-ui 뒤에 컴포넌트 경로나 설명을 붙입니다(대상 없이 /break-ui만 부르면 한 줄 인사만 하고 기다린다고 SKILL.md가 적었고, 시험은 모두 대상을 붙여 불렀습니다). 시험 12번은 모두 슬래시 명령이었고, 컴포넌트 파일을 준 요청이 6번(run01·03·05·07·09·11), 설명만 준 요청이 6번, 영어 요청이 2번(run08·run09), '+ fix'까지 시킨 요청이 2번(run11·run12)입니다. 요청 부분은 슬래시 명령을 포함해 한국어 181~316자, 영어 442~573자이고 컴포넌트가 무엇인지 설명했으며, '+ fix'를 붙이지 않은 10번에는 '고치지는 마'(영어 요청은 Don't fix anything)도 적었습니다. 그 뒤에 시험 때마다 같은 무인 실행용 진행 메모(한국어 1,491자·영어 2,730자: 묻지 말 것·설치된 글꼴만 쓸 것·인터넷 없음·보고서를 파일로도 저장 등)를 붙였습니다.
환경을 적으면 그 상태까지 봅니다: SKILL.md는 컴포넌트가 다크 모드·오른쪽에서 왼쪽 글자(RTL)를 지원할 때 그 상태도 확인하라고 합니다. run06 요청에는 '이 서비스는 다크 모드를 지원한다', run04 요청에는 '아랍어(오른쪽에서 왼쪽) 메시지와 RTL 화면을 지원한다'고 적었고, 모델은 그 상태를 직접 만들어 확인했습니다(run04는 LTR·RTL 단추, run06은 ?theme=dark 주소 값). 지원 여부를 적지 않은 run03에서는 모델이 다크 모드·RTL 화면은 확인하지 않았다고 보고서에 적었습니다. run01은 사이드바 폭 340px, run03은 휴대폰 화면 기준, run07은 정렬이 날짜·금액에 맞는지와 1,000건 넘게 쌓였을 때를 함께 보라고 적었습니다. run03의 입력 파일에는 최대 길이를 적은 스키마 주석이 있었고(시험자가 일부러 적음) 모델은 최악 값을 그 한도(제목 80자·본문 1000자·이름 40자)에 맞췄습니다. 한도를 못 찾으면 '제한 없음'이라고 적고 길지만 그럴듯한 값을 쓰라고 SKILL.md가 말합니다.
만들어 주는 것: 입력 컴포넌트가 있으면 원본은 그대로 두고 'Demo data / Worst case' 분할 토글이 달린 HTML을 따로 만들고(설명만 주면 모델이 컴포넌트를 먼저 만들어 같은 HTML에 넣습니다), 보고서를 씁니다. 토글에는 시험 프롬프트의 지시대로 Empty·One·1,000 rows 같은 상태도 함께 넣었고(SKILL.md는 이 상태들을 따로 다루라고 합니다), run09는 9가지까지 늘렸습니다. 보고서는 Part 1(무엇이 깨졌나: 심각도 Broken·Ugly·Fragile, 최악 값, 증상, 고치는 법과 파일·줄), Part 2(결정할 것), Part 3(버틴 것) 순서이고 12번 모두 세 부분이 나왔습니다. 보고서를 break-report.md 파일로도 저장한 것은 시험 프롬프트가 시켰기 때문입니다. 시험자가 준 입력 컴포넌트는 고치기를 시킨 run11 말고는 그대로였습니다.
고치기: SKILL.md는 보고하고 멈추는 것을 기본으로 하고, 고치기까지 시킨 것은 run11·run12 두 번뿐입니다(나머지 10번은 보고하고 멈췄지만 그 요청에 '고치지는 마'도 적었으므로 말이 없을 때의 기본 동작은 따로 시험하지 않았습니다). run11은 Part 1의 15건을 고치고(#15 서버 검증은 폴더 밖이라 화면 쪽만), 따로 적은 '결정할 것' 4가지는 고치지 않았고, run12는 22건 중 17건을 고치고 1건(긴 파일 이름)은 title만 붙였으며 4건은 결정할 것으로 남겼습니다. 합성의 오른쪽 칸에서 볼 수 있듯 같은 최악 데이터에서 눈에 띄던 깨짐은 사라졌지만, 깨진 곳을 다 고쳐 준다고 말할 수는 없습니다. run11은 아바타 색을 이름으로 정하는 방식으로 바꿔 데모 화면의 아바타 색도 달라졌다고 모델이 밝혔습니다. 'fix all'·'fix 1, 3'은 SKILL.md에 적힌 방법이고 시험하지 않았습니다.
정상 데이터에서도 깨져 있던 것: 입력 컴포넌트 6개(run01·03·05·07·09·11)는 시험자가 흔한 방식(고정 높이·nowrap·이름 첫 글자 이니셜·innerHTML 등)으로 만든 가상 서비스 컴포넌트이고 실제 서비스의 화면이 아닙니다. 나머지 6개는 설명만 주고 모델이 먼저 만든 컴포넌트입니다. 휴대폰 390 폭 캡처의 깨짐은 구분해서 봐야 합니다. run01·run05·run07은 시험자가 만든 입력 레이아웃(사이드바+본문, 고정 폭 카드, 고정 폭 표) 때문에 Demo data 상태도 휴대폰 폭에서 이미 깨져 있고(그래서 run05·run07 합성은 데스크톱 화면입니다), run10은 데모 데이터에서도 필터 칩 줄의 '+3 더 보기'가 휴대폰 폭에서 보이지 않습니다. 그 밖의 휴대폰 깨짐은 스킬이 만든 Worst case 상태에서 생긴 것입니다. 모델도 데모 데이터에서 이미 깨진 곳을 따로 짚었습니다(예: run07은 대출일 정렬 순서가 틀리고, run09는 D-day가 하루 어긋나고, run03은 '18500원'에 천 단위 쉼표가 없다고 보고했습니다).
보고서 건수: Part 1 표에 적은 항목은 12번 합쳐 249줄(실행당 15~30줄, Broken 84·Ugly 108·Fragile 57)입니다. 모델이 쓴 표의 줄 수와 모델이 붙인 심각도이고 실제 버그 수가 아닙니다(SKILL.md 기준 Broken은 읽을 수 없거나 누를 수 없거나 틀린 데이터가 보이는 것, Ugly는 읽히지만 눈에 띄게 어긋난 것, Fragile은 지금은 괜찮지만 현실적인 한 걸음이면 깨지는 것). 일부 항목은 화면으로 확인하지 않고 코드·CSS를 읽고 추론했다고 모델이 스스로 표시했습니다(예: run01은 25건 중 21·22·24·25번).
HTML이 섞인 글: run03의 최악 데이터에는 손님 리뷰 본문에 HTML(<img onerror>)이 섞인 사례가 들어 있고, 원본이 그 글을 innerHTML로 넣기 때문에 Worst case 상태를 열면 짧은 스크립트가 실제로 실행됩니다(그림 대체 글자만 바꾸고 외부 접속은 없습니다). 다른 실행의 XSS 항목은 '이렇게 하면 실행될 수 있다'는 코드 읽기 추론입니다.
토글은 개발용: 'Demo data / Worst case' 토글은 SKILL.md가 개발용 장치라고 적은 것이고 배포 페이지에 넣지 말라고 합니다. 프로젝트가 있으면 개발 전용 스위치(?data=worst 같은 주소 값)나 프로토타입 경로로, 없으면 자체 완결형 HTML 하나로 만든다고 하는데, 이번 12번은 모두 별도 HTML 파일(원본 옆)로 만들었고 프로젝트나 개발 서버에 붙이는 방식은 시험하지 않았습니다.
화면 확인: SKILL.md Phase 4는 브라우저 도구가 있으면 두 상태를 여러 폭(320px·실제 폭·200% 확대 등)에서 찍어 비교하고, 없으면 CSS를 읽고 추론했다고 밝히라고 합니다. 시험에서는 모델에게 시험자가 만든 Chrome 래퍼(헤드리스, 샌드박스 프로필, 닫힌 프록시)만 열어 주었고, 12번 모두 그것으로 화면을 찍거나 DOM을 쟀습니다(12번 합계 320번 호출, 스크린숏 201장). 사용자의 브라우저를 여는 시도는 0번이었습니다. 브라우저 도구가 없는 환경은 시험하지 않았습니다.
비용·시간과 권한 창: claude-opus-5-5, Claude Code 2.1.304로 2026-10-22 09:58~10:33에 2~3개씩 동시에 실행했습니다. 실행 하나에 314.0~562.5초(5.2~9.4분), 1.21~1.89달러가 들었고 12번 합계 17.17달러이며, 12번 모두 비용 상한 2달러(--max-budget-usd 2)에 걸리지 않았습니다. 시험은 답할 사람이 없는 비대화형(claude -p) 실행이라, 권한·셸 안전 검사에 막힌 도구 호출이 12번 중 9번에서 합계 11번 있었습니다(셸 변수 확인 불가 6·중괄호 안 따옴표 3·여러 명령 1·작업 폴더 밖 파일 읽기 1). 모델은 막힌 뒤 같은 일을 python3 스크립트로 옮기거나 명령을 나눠 다시 실행했고(run04는 작업 폴더 밖 파일 읽기를 뺐습니다), 그 밖의 도구 오류는 0번입니다. 대화형 세션에서 어떻게 보이는지는 시험하지 않았습니다.
공식 설치 시험: 12번의 실행과 따로, 빈 임시 HOME에서 두 명령을 skills@1.7.4로 실행해 봤습니다(-a claude-code -y를 덧붙이고 사용 통계는 끔). 방법 1은 묻지 않고 스킬 15개(파일 23개)를 모두, 방법 2는 break-ui(SKILL.md·CATALOG.md) 하나만 ./.claude/skills/ 아래에 복사하고 skills-lock.json을 만들었습니다. 둘 다 종료 코드 0이었고 클론한 레포의 파일과 차이가 없었으며(12번의 실행에 쓴 복사본과 같은 파일입니다), 끝에 CLI가 'Review skills before use; they run with full agent permissions.'(스킬은 에이전트 권한으로 실행되니 쓰기 전에 검토하라)고 알렸습니다. -y 없이 실행하는 대화형 화면과 -g를 주는 전역 설치는 시험하지 않았습니다. npx가 시험 폴더 캐시에 받은 npm 패키지는 skills와 의존 패키지 7개로 약 7MB였고 install 스크립트가 있는 것은 없었습니다. 진짜 HOME의 ~/.claude/skills·~/.agents는 시험 전후 같았습니다(시험과 무관하게 Claude Code의 기본 플러그인 동기화가 마켓플레이스 목록 파일의 갱신 시각을 고쳤고, 사용자가 켜 둔 Chrome이 자기 설정 폴더를 썼습니다). 설치 뒤에 Claude Code에서 /break-ui를 불러 보는 것까지는 하지 않았습니다(12번의 실행은 같은 파일을 복사해 불렀습니다).
시험하지 않은 것: 같은 레포의 다른 스킬 14개(애니메이션·디자인 엔지니어링 등), Claude Code 이외의 도구, 개발 서버가 있는 실제 프로젝트에 토글을 붙이는 방식, 'fix all'·'fix 1, 3'·'data only' 같은 다른 호출, 브라우저 도구가 없을 때의 동작, 대화형 세션, 사람이 결과 페이지를 직접 눌러 보는 사용(토글은 시험자가 스크립트로 눌렀습니다)입니다.
라이선스와 출처: 레포는 Emil Kowalski(GitHub 계정 emilkowalski)의 MIT 라이선스 레포이고, 이 페이지는 레포를 만든 쪽이 아니라 시험자가 직접 돌려 본 기록입니다. 결과물은 모델이 시험 폴더에서 새로 만든 HTML·JS·Markdown과 시험자가 만든 가상 입력 컴포넌트이고 레포의 문서를 복사해 싣지 않았습니다. 이 페이지에는 결과 캡처 PNG와 시험자 녹화 영상만 싣고 결과 HTML과 스킬 문서는 싣지 않았습니다.

결과물 12개

카드 한 장은 실행 한 번의 대표 화면입니다. 합성 PNG는 시험자가 결과 HTML을 헤드리스 Chrome에서 열어 찍은 정지 화면(같은 컴포넌트의 Demo data와 Worst case, 고치기까지 시킨 run11·run12는 고치기 전과 후)과 모델이 쓴 보고서 Part 1의 앞부분을 세로 한 장에 줄여 붙인 것이고, 칸 라벨도 시험자가 붙였습니다(보고서 칸은 글 그대로 찍었고 심각도 칸의 색만 시험자가 입혔습니다). 토글 상태는 시험자가 스크립트로 단추를 눌러 바꾼 것이고, 테두리 카드(run04·05·09·11)는 서로 다른 모양을 보여 주는 대표 결과입니다. run04·run06·run12 카드의 '움직임 영상 보기'를 누르면 시험자가 휴대폰 390 폭에서 토글을 누르며 찍은 화면 녹화(무음, 780×1688, 15.1~16.3초)가 나옵니다. run04는 Demo data → Worst case → RTL → Demo data, run06은 Demo data → Worst case → 다크 모드 → Huge → 라이트 모드 → Demo data, run12는 고치기 전 파일에서 Demo data → Worst case → Empty → 1,000 rows → Demo data입니다. 스킬이나 모델이 만든 영상이 아닙니다. '프롬프트 전문 보기'를 누르면 프롬프트가 펼쳐집니다(요청 뒤에 시험 때마다 붙인 공통 진행 메모가 이어집니다). 화면 속 서비스·단체·인물 이름과 숫자, 이메일은 모두 지어낸 값이고 같은 이름의 실제 곳과 관계가 없으며, 최악 데이터에는 실제 지명이 섞인 곳도 있지만 그 지명의 업체·사업을 가리키지 않습니다. 휴대폰 폭에서 Demo data도 깨져 있는 곳은 run01·05·07·10 캡션에 적었습니다.

run04 · 설명만 주고 가상 통역 동아리 '말벗 사다리'의 단체 대화방 말풍선을 먼저 만들게 한 뒤 깨뜨렸다(RTL 지원 제품이라고 알림). 모델은 데이터 토글(Demo data / Worst case / Empty / One / 1,000 rows) 옆에 LTR·RTL 토글을 따로 달았고, 보고서는 19건(Broken 6·Ugly 10·Fragile 3)이다. 'ㅋ' 40개와 긴 드라이브 주소가 든 말풍선이 화면 밖으로 나가 대화 목록 전체가 가로로 밀리고(RTL에서는 왼쪽 밖), RTL 화면에서는 한국어 메시지의 물음표가 앞으로 가 '?내일 몇 시에 모여요'로 보이며, UTC 날짜로 묶어 한국 시각 0시 20분 메시지가 전날 구분선 아래에 놓인다.
프롬프트 전문 보기
/break-ui 가상 통역 동아리 '말벗 사다리'의 단체 대화방에 들어가는 채팅 말풍선 목록을 먼저 데모 데이터로 만든 뒤 깨뜨려 봐. 내 말풍선은 오른쪽, 다른 사람 말풍선은 왼쪽(아바타·이름·보낸 시각), 날짜 구분선, 안 읽은 사람 수 표시가 있다. 회원 가운데 아랍어를 쓰는 사람이 있어서 이 제품은 아랍어(오른쪽에서 왼쪽) 메시지와 RTL 화면을 지원한다. 데모로 보기 좋게 만든 다음 최악의 데이터로 바꿔 깨지는 곳을 찾아 보고해 줘. 고치지는 마. [시험 진행 메모] - 무인 시험이다. 중간에 묻지 말고 끝까지 진행해. 선택지가 있으면 스스로 하나를 골라 이유를 한 줄로 적고 진행한다. - break-ui 절차를 줄이지 말고 SKILL.md대로 따른다(Phase 1 표면 지도 → CATALOG.md를 읽고 최악 데이터 만들기 → 토글 → 너비·확대·(제품이 지원하면) 다크 모드·RTL로 깨뜨려 보기 → 보고). 시간 제한은 20분이니 범위는 요청한 컴포넌트만큼으로 한다. - 결과는 현재 폴더에 브라우저로 바로 열리는 HTML로 만든다(입력 파일이 있으면 그 옆에). 토글은 SKILL.md대로 'Demo data / Worst case' 이름의 분할 단추로 화면 아래 가운데에 두고, 추가 상태(Empty·One·1,000 rows 등)도 같은 토글에 넣는다. 확인용 스크린숏 같은 임시 파일도 현재 폴더 안에 둔다. 셸 명령은 cd와 셸 변수 없이 현재 폴더 기준 경로나 절대 경로로 실행한다. - 보고서(Part 1~3)는 답변으로 보여 주고, 같은 내용을 현재 폴더의 break-report.md로도 저장한다. - 이 장비에는 인터넷이 없다. 웹 글꼴·외부 이미지·CDN·자리 표시 사진 서비스를 쓰지 않는다. 아바타·사진은 이미지 파일 없이 CSS·SVG 도형이나 이니셜로 그린다. '깨진 이미지 주소' 사례가 필요하면 현재 폴더 안의 없는 파일 경로(예: ./missing-avatar.png)를 쓴다. - 글꼴은 이 장비에 설치된 것만 font-family 이름으로 쓴다: 한글 Noto Sans CJK KR·Noto Serif CJK KR, 아랍어 Noto Sans Arabic·Noto Naskh Arabic, 이모지 Noto Color Emoji, 라틴 문자 Noto Sans·DejaVu Sans 등(fc-list로 확인할 수 있다). - 화면 글자는 한국어로 쓴다(영어는 조금만). 최악 데이터의 비라틴 문자 사례는 한국어·아랍어(오른쪽에서 왼쪽)·이모지·베트남어 같은 발음 기호로 하고, 중국어·한자(일본 한자 포함)는 쓰지 않는다(CATALOG.md의 한자 이름 예시도 쓰지 않는다). 이름·이메일·숫자는 모두 가상이다. CATALOG.md의 예시 이름·이메일을 그대로 베끼지 말고 같은 유형(길이·하이픈·발음 기호·접미사 등)으로 새로 지어 실존 인물과 겹치지 않게 한다. 이메일·주소는 example.com·example.org·.test만 쓰고, 실존 브랜드·로고·사진·인물은 쓰지 않는다. - 화면 확인은 google-chrome --headless=new --screenshot=파일 --window-size=폭,높이 file://경로 로 할 수 있다(인터넷 주소는 열리지 않고, 다른 브라우저나 창을 여는 명령은 없다). 계산·검사에는 python3를 써도 된다. 이 시험에서는 curl·wget·npm·npx·pip·node·git·rm 명령이 막혀 있다. 지울 파일은 그대로 둔다. - 끝나면 만들거나 고친 파일 경로, 토글이 있는 파일과 그 상태 목록을 알려 줘.

run05 · 시험자가 만든 가상 화분 가게 '꽃삽 원예상회' 결제 화면의 주문 요약 카드(HTML+CSS)를 깨뜨렸다. 모델은 원본을 두고 토글 사본 order-summary.break.html(Demo data / Worst case / Empty / One / 1,000 rows)을 만들었고, 보고서는 22건(Broken 6·Ugly 9·Fragile 7)이다. 할인율 7%에서 '-336441.00000000006원'이 그대로 찍히고, 99자 상품명이 카드 밖으로 뻗어 줄 금액을 밀어내며, 무료 배송 기준이 null이면 화물비 35,000원이 '0원'으로 빠져 결제 금액이 그만큼 적게 나오고, '<NEW>' 같은 글자가 태그로 읽혀 사라진다. 주의: 합성은 데스크톱 화면이다. 휴대폰 390 폭에서는 시험자가 만든 입력 카드(왼쪽 폼 + 340px 고정 카드, 미디어 쿼리 없음)가 Demo data 상태에서도 화면 오른쪽 밖으로 걸려 금액과 결제 단추가 잘린다.
프롬프트 전문 보기
/break-ui ./order-summary.html ./order-summary.css — 가상 화분 가게 '꽃삽 원예상회' 결제 화면의 오른쪽 주문 요약 카드를 깨뜨려 봐(데이터는 파일 안 order 객체 → renderSummary). 상품명·옵션·수량·금액·할인·배송비·결제 단추까지 화면에 그려지는 값을 모두 최악으로 바꿔 보고, 무엇이 깨졌는지 보고해 줘. 고치지는 마. [시험 진행 메모] - 무인 시험이다. 중간에 묻지 말고 끝까지 진행해. 선택지가 있으면 스스로 하나를 골라 이유를 한 줄로 적고 진행한다. - break-ui 절차를 줄이지 말고 SKILL.md대로 따른다(Phase 1 표면 지도 → CATALOG.md를 읽고 최악 데이터 만들기 → 토글 → 너비·확대·(제품이 지원하면) 다크 모드·RTL로 깨뜨려 보기 → 보고). 시간 제한은 20분이니 범위는 요청한 컴포넌트만큼으로 한다. - 결과는 현재 폴더에 브라우저로 바로 열리는 HTML로 만든다(입력 파일이 있으면 그 옆에). 토글은 SKILL.md대로 'Demo data / Worst case' 이름의 분할 단추로 화면 아래 가운데에 두고, 추가 상태(Empty·One·1,000 rows 등)도 같은 토글에 넣는다. 확인용 스크린숏 같은 임시 파일도 현재 폴더 안에 둔다. 셸 명령은 cd와 셸 변수 없이 현재 폴더 기준 경로나 절대 경로로 실행한다. - 보고서(Part 1~3)는 답변으로 보여 주고, 같은 내용을 현재 폴더의 break-report.md로도 저장한다. - 이 장비에는 인터넷이 없다. 웹 글꼴·외부 이미지·CDN·자리 표시 사진 서비스를 쓰지 않는다. 아바타·사진은 이미지 파일 없이 CSS·SVG 도형이나 이니셜로 그린다. '깨진 이미지 주소' 사례가 필요하면 현재 폴더 안의 없는 파일 경로(예: ./missing-avatar.png)를 쓴다. - 글꼴은 이 장비에 설치된 것만 font-family 이름으로 쓴다: 한글 Noto Sans CJK KR·Noto Serif CJK KR, 아랍어 Noto Sans Arabic·Noto Naskh Arabic, 이모지 Noto Color Emoji, 라틴 문자 Noto Sans·DejaVu Sans 등(fc-list로 확인할 수 있다). - 화면 글자는 한국어로 쓴다(영어는 조금만). 최악 데이터의 비라틴 문자 사례는 한국어·아랍어(오른쪽에서 왼쪽)·이모지·베트남어 같은 발음 기호로 하고, 중국어·한자(일본 한자 포함)는 쓰지 않는다(CATALOG.md의 한자 이름 예시도 쓰지 않는다). 이름·이메일·숫자는 모두 가상이다. CATALOG.md의 예시 이름·이메일을 그대로 베끼지 말고 같은 유형(길이·하이픈·발음 기호·접미사 등)으로 새로 지어 실존 인물과 겹치지 않게 한다. 이메일·주소는 example.com·example.org·.test만 쓰고, 실존 브랜드·로고·사진·인물은 쓰지 않는다. - 화면 확인은 google-chrome --headless=new --screenshot=파일 --window-size=폭,높이 file://경로 로 할 수 있다(인터넷 주소는 열리지 않고, 다른 브라우저나 창을 여는 명령은 없다). 계산·검사에는 python3를 써도 된다. 이 시험에서는 curl·wget·npm·npx·pip·node·git·rm 명령이 막혀 있다. 지울 파일은 그대로 둔다. - 끝나면 만들거나 고친 파일 경로, 토글이 있는 파일과 그 상태 목록을 알려 줘.

run09 · 영어 요청, 한국어 화면. 시험자가 만든 가상 '주말 목공 교실'의 수업 카드(한 파일)를 깨뜨리게 했다. 모델은 토글 상태를 9가지(Demo data / Worst case / Empty / One / 1,284 enrolled / Past / Other TZ / Missing fields / No price)로 늘렸고, 보고서는 영어로 30건(Broken 16·Ugly 9·Fragile 5)이다. 가격이 null이면 TypeError로 카드가 통째로 비고, 수업 장소의 시간대(timeZone)를 읽지 않아 다른 시간대 지역의 수업이 기기 시각으로 표시되며, 대기 신청이 있으면 '남은 자리 -3석'과 카드 밖으로 뻗는 막대가 나오고, 지난 수업은 'D--3'에 '신청하기'가 그대로 눌린다. 데모 데이터에서도 D-day가 하루 어긋난다(D-4, 달력으로는 D-3).
프롬프트 전문 보기
/break-ui ./class-card.html — this is a class card from a fictional Korean weekend woodworking school, '주말 목공 교실'; its UI copy is Korean. The data comes from the demoClass object in the file (startsAt and endsAt are UTC, and the venue's time zone is in timeZone). Throw the worst realistic data at every value the card renders, including dates, times and time zones, seat counts, and the attendee list. Report what breaks. Don't fix anything. [Test-run notes] - This is an unattended test run. Don't ask me anything; go all the way. If there is a choice to make, pick one yourself, give the reason in one line, and carry on. - Don't shorten the break-ui procedure; follow SKILL.md as written (Phase 1 surface map → read CATALOG.md and build the worst case → toggle → break it at the widths, zoom and, if the product supports them, dark mode and RTL → report). The time limit is 20 minutes, so keep the scope to the component in the brief. - Put the result in the current folder as HTML that opens straight in a browser (next to the input files if there are any). Label the toggle as SKILL.md says, a segmented control named 'Demo data / Worst case' at the bottom center, and put extra states (Empty, One, 1,000 rows, ...) on the same toggle. Keep temporary files such as check screenshots inside the current folder too. Run shell commands without cd and without shell variables, using paths relative to the current folder or absolute paths. - Show the report (Parts 1-3) in your answer and also save the same content as break-report.md in the current folder. - This machine has no internet. Don't use web fonts, external images, CDNs or placeholder-photo services. Draw avatars and photos with CSS/SVG shapes or initials, no image files. If you need a 'broken image URL' case, use a path to a missing file inside the current folder (e.g. ./missing-avatar.png). - Use only fonts installed on this machine, by font-family name: Hangul Noto Sans CJK KR, Noto Serif CJK KR; Arabic Noto Sans Arabic, Noto Naskh Arabic; emoji Noto Color Emoji; Latin Noto Sans, DejaVu Sans and others (check with fc-list). - Keep the on-screen copy in the language the brief gives. For non-Latin worst-case values use Korean, Arabic (right-to-left), emoji and diacritics such as Vietnamese; do not use Chinese characters at all (no hanzi or kanji, so skip the CJK name example in CATALOG.md). All names, emails and numbers are fictional. Don't copy the example names and emails from CATALOG.md verbatim; invent new ones of the same type (length, hyphens, diacritics, suffixes) so they don't match real people. Use only example.com, example.org or .test for emails and URLs, and no real brands, logos, photos or people. - You can look at the page with google-chrome --headless=new --screenshot=FILE --window-size=W,H file://PATH (internet addresses won't open, and there is no command that opens another browser or window). python3 is fine for calculations and checks. curl, wget, npm, npx, pip, node, git and rm are blocked in this test; leave files you would delete where they are. - When done, tell me the paths of the files you created or changed, and which file has the toggle and its states.

run11 · '+ fix'까지 요청한 실행. 시험자가 만든 가상 동네 소식지 '골목 신문'의 댓글 목록(입력 파일 3개)에 최악 데이터를 넣어 15건(Broken 5·Ugly 7·Fragile 3)을 보고하고, 15건을 고치고(#15 서버 검증은 폴더 밖이라 화면 쪽만) 따로 적은 '결정할 것' 4가지는 남겼다. 고치기 전 사본(before-fix/)과 비교하면 같은 최악 데이터에서 찌그러진 아바타가 원으로 돌아오고, 화면 밖으로 밀리던 긴 주소가 줄바꿈되고, 사라졌던 줄바꿈이 살아나고, 이모지 닉네임의 '�' 이니셜이 이모지로 바뀌고, '좋아요 1284'가 '1,284'가 된다.
프롬프트 전문 보기
/break-ui ./comments.html + fix — 가상 동네 소식지 '골목 신문' 기사 아래의 댓글 목록이다(comments.js의 COMMENTS → renderComments, 답글은 한 단계). 최악의 데이터로 깨뜨려 보고 보고서를 쓴 다음, SKILL.md의 '+ fix' 흐름대로 '결정할 것(Decisions for you)'에 넣은 것을 뺀 나머지를 모두 고쳐 줘. 고치기 전과 후를 비교할 수 있게, 고치기 직전 상태(토글은 달렸고 아직 고치지 않은 상태)의 파일들을 before-fix/ 폴더에 복사해 둔 다음 고쳐 줘. [시험 진행 메모] - 무인 시험이다. 중간에 묻지 말고 끝까지 진행해. 선택지가 있으면 스스로 하나를 골라 이유를 한 줄로 적고 진행한다. - break-ui 절차를 줄이지 말고 SKILL.md대로 따른다(Phase 1 표면 지도 → CATALOG.md를 읽고 최악 데이터 만들기 → 토글 → 너비·확대·(제품이 지원하면) 다크 모드·RTL로 깨뜨려 보기 → 보고). 시간 제한은 20분이니 범위는 요청한 컴포넌트만큼으로 한다. - 결과는 현재 폴더에 브라우저로 바로 열리는 HTML로 만든다(입력 파일이 있으면 그 옆에). 토글은 SKILL.md대로 'Demo data / Worst case' 이름의 분할 단추로 화면 아래 가운데에 두고, 추가 상태(Empty·One·1,000 rows 등)도 같은 토글에 넣는다. 확인용 스크린숏 같은 임시 파일도 현재 폴더 안에 둔다. 셸 명령은 cd와 셸 변수 없이 현재 폴더 기준 경로나 절대 경로로 실행한다. - 보고서(Part 1~3)는 답변으로 보여 주고, 같은 내용을 현재 폴더의 break-report.md로도 저장한다. - 이 장비에는 인터넷이 없다. 웹 글꼴·외부 이미지·CDN·자리 표시 사진 서비스를 쓰지 않는다. 아바타·사진은 이미지 파일 없이 CSS·SVG 도형이나 이니셜로 그린다. '깨진 이미지 주소' 사례가 필요하면 현재 폴더 안의 없는 파일 경로(예: ./missing-avatar.png)를 쓴다. - 글꼴은 이 장비에 설치된 것만 font-family 이름으로 쓴다: 한글 Noto Sans CJK KR·Noto Serif CJK KR, 아랍어 Noto Sans Arabic·Noto Naskh Arabic, 이모지 Noto Color Emoji, 라틴 문자 Noto Sans·DejaVu Sans 등(fc-list로 확인할 수 있다). - 화면 글자는 한국어로 쓴다(영어는 조금만). 최악 데이터의 비라틴 문자 사례는 한국어·아랍어(오른쪽에서 왼쪽)·이모지·베트남어 같은 발음 기호로 하고, 중국어·한자(일본 한자 포함)는 쓰지 않는다(CATALOG.md의 한자 이름 예시도 쓰지 않는다). 이름·이메일·숫자는 모두 가상이다. CATALOG.md의 예시 이름·이메일을 그대로 베끼지 말고 같은 유형(길이·하이픈·발음 기호·접미사 등)으로 새로 지어 실존 인물과 겹치지 않게 한다. 이메일·주소는 example.com·example.org·.test만 쓰고, 실존 브랜드·로고·사진·인물은 쓰지 않는다. - 화면 확인은 google-chrome --headless=new --screenshot=파일 --window-size=폭,높이 file://경로 로 할 수 있다(인터넷 주소는 열리지 않고, 다른 브라우저나 창을 여는 명령은 없다). 계산·검사에는 python3를 써도 된다. 이 시험에서는 curl·wget·npm·npx·pip·node·git·rm 명령이 막혀 있다. 지울 파일은 그대로 둔다. - 끝나면 만들거나 고친 파일 경로, 토글이 있는 파일과 그 상태 목록을 알려 줘.

run01 · 시험자가 만든 가상 협업 도구 '물레방아 협업실'의 사이드바 팀원 패널(입력 파일 4개)에 최악 데이터를 넣었다. 모델은 컴포넌트 파일을 고치지 않고 fixture 4개(worst·empty·one·huge)와 'Demo data / Worst case / Empty / One / 1,000 rows' 토글 페이지를 따로 만들었고, 보고서에 25건(Broken 7·Ugly 12·Fragile 6)을 적었다. 이름이 없는 초대자 한 명 때문에 TypeError로 14행 중 13행만 그려지고, 팀원 수 1284가 '1284 / 명'으로 꺾이고, 이모지로 시작하는 이름의 아바타가 '�'가 되고, 접속 기록이 없는 사람은 '20748일 전 접속'으로 나온다. 주의: 합성의 Demo data 칸(휴대폰 390)도 이미 깨져 있다. 시험자가 만든 입력 레이아웃(사이드바 340px + 본문)이라 문서 폭이 398px로 넘치고 3줄 정보가 고정 높이 56px을 넘어 이름과 겹치며, 최악 데이터와 상관없이 생기는 깨짐이다(모델의 보고서 #2도 데모 데이터가 320px에서 겹친다고 적었다).
프롬프트 전문 보기
/break-ui ./team-panel/ — 현재 폴더의 team-panel은 가상 협업 도구 '물레방아 협업실'의 사이드바 팀원 패널이다(사이드바 폭 340px, 데이터는 fixtures/members.demo.js → members.js의 renderMembers). 이 컴포넌트를 최악의 데이터로 깨뜨려 보고 무엇이 깨졌는지 보고해 줘. 고치지는 마. [시험 진행 메모] - 무인 시험이다. 중간에 묻지 말고 끝까지 진행해. 선택지가 있으면 스스로 하나를 골라 이유를 한 줄로 적고 진행한다. - break-ui 절차를 줄이지 말고 SKILL.md대로 따른다(Phase 1 표면 지도 → CATALOG.md를 읽고 최악 데이터 만들기 → 토글 → 너비·확대·(제품이 지원하면) 다크 모드·RTL로 깨뜨려 보기 → 보고). 시간 제한은 20분이니 범위는 요청한 컴포넌트만큼으로 한다. - 결과는 현재 폴더에 브라우저로 바로 열리는 HTML로 만든다(입력 파일이 있으면 그 옆에). 토글은 SKILL.md대로 'Demo data / Worst case' 이름의 분할 단추로 화면 아래 가운데에 두고, 추가 상태(Empty·One·1,000 rows 등)도 같은 토글에 넣는다. 확인용 스크린숏 같은 임시 파일도 현재 폴더 안에 둔다. 셸 명령은 cd와 셸 변수 없이 현재 폴더 기준 경로나 절대 경로로 실행한다. - 보고서(Part 1~3)는 답변으로 보여 주고, 같은 내용을 현재 폴더의 break-report.md로도 저장한다. - 이 장비에는 인터넷이 없다. 웹 글꼴·외부 이미지·CDN·자리 표시 사진 서비스를 쓰지 않는다. 아바타·사진은 이미지 파일 없이 CSS·SVG 도형이나 이니셜로 그린다. '깨진 이미지 주소' 사례가 필요하면 현재 폴더 안의 없는 파일 경로(예: ./missing-avatar.png)를 쓴다. - 글꼴은 이 장비에 설치된 것만 font-family 이름으로 쓴다: 한글 Noto Sans CJK KR·Noto Serif CJK KR, 아랍어 Noto Sans Arabic·Noto Naskh Arabic, 이모지 Noto Color Emoji, 라틴 문자 Noto Sans·DejaVu Sans 등(fc-list로 확인할 수 있다). - 화면 글자는 한국어로 쓴다(영어는 조금만). 최악 데이터의 비라틴 문자 사례는 한국어·아랍어(오른쪽에서 왼쪽)·이모지·베트남어 같은 발음 기호로 하고, 중국어·한자(일본 한자 포함)는 쓰지 않는다(CATALOG.md의 한자 이름 예시도 쓰지 않는다). 이름·이메일·숫자는 모두 가상이다. CATALOG.md의 예시 이름·이메일을 그대로 베끼지 말고 같은 유형(길이·하이픈·발음 기호·접미사 등)으로 새로 지어 실존 인물과 겹치지 않게 한다. 이메일·주소는 example.com·example.org·.test만 쓰고, 실존 브랜드·로고·사진·인물은 쓰지 않는다. - 화면 확인은 google-chrome --headless=new --screenshot=파일 --window-size=폭,높이 file://경로 로 할 수 있다(인터넷 주소는 열리지 않고, 다른 브라우저나 창을 여는 명령은 없다). 계산·검사에는 python3를 써도 된다. 이 시험에서는 curl·wget·npm·npx·pip·node·git·rm 명령이 막혀 있다. 지울 파일은 그대로 둔다. - 끝나면 만들거나 고친 파일 경로, 토글이 있는 파일과 그 상태 목록을 알려 줘.

run02 · 설명만 주고 가상 클라우드 저장소 '책갈피 구름창고'의 요금제 표(카드 3개)를 먼저 데모 데이터로 만들게 한 뒤 깨뜨렸다. 토글은 'Demo data / Worst case / Empty / One / 5 plans / No price' 6가지이고, 보고서는 17건(Broken 5·Ugly 7·Fragile 5)이다. 가격이 null인 요금제 하나로 표 전체가 빈 화면이 되고, 연 49,000원을 12로 나눈 월 가격이 '4,083.333원', 3000GB가 '2.9296875TB'로 나오며, 기능 문구의 '<Ctrl+K>'가 HTML 태그로 읽혀 사라진다.
프롬프트 전문 보기
/break-ui 가상 클라우드 저장소 '책갈피 구름창고'의 요금제 표를 먼저 데모 데이터로 만든 뒤 깨뜨려 봐. 요금제 카드 3개(무료 0원, 개인 월 4,900원, 팀 1인당 월 12,000원)에 요금제 이름·가격·짧은 설명·기능 목록 4~5개·'가장 인기' 배지(개인)·시작하기 단추가 있고, 데스크톱에서는 3열, 좁은 화면에서는 1열이다. 데모 데이터로 보기 좋게 만든 다음 최악의 데이터로 바꿔 깨지는 곳을 찾아 보고해 줘. 고치지는 마. [시험 진행 메모] - 무인 시험이다. 중간에 묻지 말고 끝까지 진행해. 선택지가 있으면 스스로 하나를 골라 이유를 한 줄로 적고 진행한다. - break-ui 절차를 줄이지 말고 SKILL.md대로 따른다(Phase 1 표면 지도 → CATALOG.md를 읽고 최악 데이터 만들기 → 토글 → 너비·확대·(제품이 지원하면) 다크 모드·RTL로 깨뜨려 보기 → 보고). 시간 제한은 20분이니 범위는 요청한 컴포넌트만큼으로 한다. - 결과는 현재 폴더에 브라우저로 바로 열리는 HTML로 만든다(입력 파일이 있으면 그 옆에). 토글은 SKILL.md대로 'Demo data / Worst case' 이름의 분할 단추로 화면 아래 가운데에 두고, 추가 상태(Empty·One·1,000 rows 등)도 같은 토글에 넣는다. 확인용 스크린숏 같은 임시 파일도 현재 폴더 안에 둔다. 셸 명령은 cd와 셸 변수 없이 현재 폴더 기준 경로나 절대 경로로 실행한다. - 보고서(Part 1~3)는 답변으로 보여 주고, 같은 내용을 현재 폴더의 break-report.md로도 저장한다. - 이 장비에는 인터넷이 없다. 웹 글꼴·외부 이미지·CDN·자리 표시 사진 서비스를 쓰지 않는다. 아바타·사진은 이미지 파일 없이 CSS·SVG 도형이나 이니셜로 그린다. '깨진 이미지 주소' 사례가 필요하면 현재 폴더 안의 없는 파일 경로(예: ./missing-avatar.png)를 쓴다. - 글꼴은 이 장비에 설치된 것만 font-family 이름으로 쓴다: 한글 Noto Sans CJK KR·Noto Serif CJK KR, 아랍어 Noto Sans Arabic·Noto Naskh Arabic, 이모지 Noto Color Emoji, 라틴 문자 Noto Sans·DejaVu Sans 등(fc-list로 확인할 수 있다). - 화면 글자는 한국어로 쓴다(영어는 조금만). 최악 데이터의 비라틴 문자 사례는 한국어·아랍어(오른쪽에서 왼쪽)·이모지·베트남어 같은 발음 기호로 하고, 중국어·한자(일본 한자 포함)는 쓰지 않는다(CATALOG.md의 한자 이름 예시도 쓰지 않는다). 이름·이메일·숫자는 모두 가상이다. CATALOG.md의 예시 이름·이메일을 그대로 베끼지 말고 같은 유형(길이·하이픈·발음 기호·접미사 등)으로 새로 지어 실존 인물과 겹치지 않게 한다. 이메일·주소는 example.com·example.org·.test만 쓰고, 실존 브랜드·로고·사진·인물은 쓰지 않는다. - 화면 확인은 google-chrome --headless=new --screenshot=파일 --window-size=폭,높이 file://경로 로 할 수 있다(인터넷 주소는 열리지 않고, 다른 브라우저나 창을 여는 명령은 없다). 계산·검사에는 python3를 써도 된다. 이 시험에서는 curl·wget·npm·npx·pip·node·git·rm 명령이 막혀 있다. 지울 파일은 그대로 둔다. - 끝나면 만들거나 고친 파일 경로, 토글이 있는 파일과 그 상태 목록을 알려 줘.

run03 · 시험자가 만든 가상 반찬가게 '부엌 옆 반찬소' 사장님 앱의 알림 목록(한 파일)을 깨뜨렸다. 모델은 원본을 두고 토글 사본 notifications-break.html(Demo data / Worst case / Empty / One / 1,000 rows)을 만들었고 보고서에 21건(Broken 7·Ugly 11·Fragile 3)을 적었다. 손님 리뷰 원문이 innerHTML로 들어가 페이지 안에서 짧은 스크립트가 실제로 실행되고(그림 대체 글자만 바꾸며 외부 접속은 없음, 사장님 앱의 저장형 XSS로 보고), 고정 높이 520px 목록은 스크롤이 안 돼 1,000건 중 8건만 보이며, 새 알림 종류는 아이콘 자리에 'undefined', 시각이 빠진 알림은 '497953시간 전'으로 나온다.
프롬프트 전문 보기
/break-ui ./notifications.html — 가상 반찬가게 '부엌 옆 반찬소' 사장님 앱의 알림 목록이다(휴대폰 화면 기준, 데이터는 파일 안 notifications 배열 → render). 주문·리뷰·정산·재고 알림에 현실에서 나올 수 있는 가장 나쁜 값을 넣어 깨지는 곳을 찾아 보고해 줘. 고치지는 마. [시험 진행 메모] - 무인 시험이다. 중간에 묻지 말고 끝까지 진행해. 선택지가 있으면 스스로 하나를 골라 이유를 한 줄로 적고 진행한다. - break-ui 절차를 줄이지 말고 SKILL.md대로 따른다(Phase 1 표면 지도 → CATALOG.md를 읽고 최악 데이터 만들기 → 토글 → 너비·확대·(제품이 지원하면) 다크 모드·RTL로 깨뜨려 보기 → 보고). 시간 제한은 20분이니 범위는 요청한 컴포넌트만큼으로 한다. - 결과는 현재 폴더에 브라우저로 바로 열리는 HTML로 만든다(입력 파일이 있으면 그 옆에). 토글은 SKILL.md대로 'Demo data / Worst case' 이름의 분할 단추로 화면 아래 가운데에 두고, 추가 상태(Empty·One·1,000 rows 등)도 같은 토글에 넣는다. 확인용 스크린숏 같은 임시 파일도 현재 폴더 안에 둔다. 셸 명령은 cd와 셸 변수 없이 현재 폴더 기준 경로나 절대 경로로 실행한다. - 보고서(Part 1~3)는 답변으로 보여 주고, 같은 내용을 현재 폴더의 break-report.md로도 저장한다. - 이 장비에는 인터넷이 없다. 웹 글꼴·외부 이미지·CDN·자리 표시 사진 서비스를 쓰지 않는다. 아바타·사진은 이미지 파일 없이 CSS·SVG 도형이나 이니셜로 그린다. '깨진 이미지 주소' 사례가 필요하면 현재 폴더 안의 없는 파일 경로(예: ./missing-avatar.png)를 쓴다. - 글꼴은 이 장비에 설치된 것만 font-family 이름으로 쓴다: 한글 Noto Sans CJK KR·Noto Serif CJK KR, 아랍어 Noto Sans Arabic·Noto Naskh Arabic, 이모지 Noto Color Emoji, 라틴 문자 Noto Sans·DejaVu Sans 등(fc-list로 확인할 수 있다). - 화면 글자는 한국어로 쓴다(영어는 조금만). 최악 데이터의 비라틴 문자 사례는 한국어·아랍어(오른쪽에서 왼쪽)·이모지·베트남어 같은 발음 기호로 하고, 중국어·한자(일본 한자 포함)는 쓰지 않는다(CATALOG.md의 한자 이름 예시도 쓰지 않는다). 이름·이메일·숫자는 모두 가상이다. CATALOG.md의 예시 이름·이메일을 그대로 베끼지 말고 같은 유형(길이·하이픈·발음 기호·접미사 등)으로 새로 지어 실존 인물과 겹치지 않게 한다. 이메일·주소는 example.com·example.org·.test만 쓰고, 실존 브랜드·로고·사진·인물은 쓰지 않는다. - 화면 확인은 google-chrome --headless=new --screenshot=파일 --window-size=폭,높이 file://경로 로 할 수 있다(인터넷 주소는 열리지 않고, 다른 브라우저나 창을 여는 명령은 없다). 계산·검사에는 python3를 써도 된다. 이 시험에서는 curl·wget·npm·npx·pip·node·git·rm 명령이 막혀 있다. 지울 파일은 그대로 둔다. - 끝나면 만들거나 고친 파일 경로, 토글이 있는 파일과 그 상태 목록을 알려 줘.

run06 · 설명만 주고 가상 사진 동호회 '노을 셔터'의 회원 프로필 머리를 먼저 만들게 한 뒤 깨뜨렸다(다크 모드 지원 제품이라고 알림). 토글은 Demo data / Worst case / Empty / One / Huge이고 테마는 ?theme=dark로 바꾼다. 보고서 23건(Broken 6·Ugly 12·Fragile 5). 긴 하이픈 이름과 30자 아이디가 만나면 이름이 'Ga…'로 줄다가 좁은 폭에서는 통째로 사라지고, 깨진 아바타 주소는 라이트 모드에서 흰 표지 위 흰 글씨라 안 보이다가 다크 모드에서는 alt 글자(전체 이름)가 큰 흰 글씨로 아바타 밖에 넘쳐 이름 위에 겹친다. 팔로워 수 '1284503'에는 천 단위 구분이 없다.
프롬프트 전문 보기
/break-ui 가상 사진 동호회 '노을 셔터'의 회원 프로필 머리 부분을 먼저 데모 데이터로 만든 뒤 깨뜨려 봐. 표지 그림, 아바타, 이름, @아이디, 한두 줄 소개, 지역, 개인 링크, 사진·팔로워·팔로잉 수, 팔로우 단추가 들어간다. 이 서비스는 다크 모드를 지원한다. 표지·아바타는 이미지 파일 없이 CSS 그러데이션이나 이니셜로 그린다. 데모로 보기 좋게 만든 다음 최악의 데이터로 바꿔 깨지는 곳을 찾아 보고해 줘. 고치지는 마. [시험 진행 메모] - 무인 시험이다. 중간에 묻지 말고 끝까지 진행해. 선택지가 있으면 스스로 하나를 골라 이유를 한 줄로 적고 진행한다. - break-ui 절차를 줄이지 말고 SKILL.md대로 따른다(Phase 1 표면 지도 → CATALOG.md를 읽고 최악 데이터 만들기 → 토글 → 너비·확대·(제품이 지원하면) 다크 모드·RTL로 깨뜨려 보기 → 보고). 시간 제한은 20분이니 범위는 요청한 컴포넌트만큼으로 한다. - 결과는 현재 폴더에 브라우저로 바로 열리는 HTML로 만든다(입력 파일이 있으면 그 옆에). 토글은 SKILL.md대로 'Demo data / Worst case' 이름의 분할 단추로 화면 아래 가운데에 두고, 추가 상태(Empty·One·1,000 rows 등)도 같은 토글에 넣는다. 확인용 스크린숏 같은 임시 파일도 현재 폴더 안에 둔다. 셸 명령은 cd와 셸 변수 없이 현재 폴더 기준 경로나 절대 경로로 실행한다. - 보고서(Part 1~3)는 답변으로 보여 주고, 같은 내용을 현재 폴더의 break-report.md로도 저장한다. - 이 장비에는 인터넷이 없다. 웹 글꼴·외부 이미지·CDN·자리 표시 사진 서비스를 쓰지 않는다. 아바타·사진은 이미지 파일 없이 CSS·SVG 도형이나 이니셜로 그린다. '깨진 이미지 주소' 사례가 필요하면 현재 폴더 안의 없는 파일 경로(예: ./missing-avatar.png)를 쓴다. - 글꼴은 이 장비에 설치된 것만 font-family 이름으로 쓴다: 한글 Noto Sans CJK KR·Noto Serif CJK KR, 아랍어 Noto Sans Arabic·Noto Naskh Arabic, 이모지 Noto Color Emoji, 라틴 문자 Noto Sans·DejaVu Sans 등(fc-list로 확인할 수 있다). - 화면 글자는 한국어로 쓴다(영어는 조금만). 최악 데이터의 비라틴 문자 사례는 한국어·아랍어(오른쪽에서 왼쪽)·이모지·베트남어 같은 발음 기호로 하고, 중국어·한자(일본 한자 포함)는 쓰지 않는다(CATALOG.md의 한자 이름 예시도 쓰지 않는다). 이름·이메일·숫자는 모두 가상이다. CATALOG.md의 예시 이름·이메일을 그대로 베끼지 말고 같은 유형(길이·하이픈·발음 기호·접미사 등)으로 새로 지어 실존 인물과 겹치지 않게 한다. 이메일·주소는 example.com·example.org·.test만 쓰고, 실존 브랜드·로고·사진·인물은 쓰지 않는다. - 화면 확인은 google-chrome --headless=new --screenshot=파일 --window-size=폭,높이 file://경로 로 할 수 있다(인터넷 주소는 열리지 않고, 다른 브라우저나 창을 여는 명령은 없다). 계산·검사에는 python3를 써도 된다. 이 시험에서는 curl·wget·npm·npx·pip·node·git·rm 명령이 막혀 있다. 지울 파일은 그대로 둔다. - 끝나면 만들거나 고친 파일 경로, 토글이 있는 파일과 그 상태 목록을 알려 줘.

run07 · 시험자가 만든 가상 '산마루 도서관' 관리자 화면의 대출 현황 정렬 표(입력 파일 3개)를 깨뜨렸다. 모델은 원본 렌더러를 그대로 부르는 토글 페이지 loans.break.html과 최악 데이터 loans.worst.js를 만들었고(Demo data / Worst case / Empty / One / 1,284 rows, 주소 ?data=로 바뀜), 보고서는 17건(Broken 7·Ugly 4·Fragile 6)이다. 책 제목 'HTML <table> 태그 완전 정복'이 진짜 표로 그려져 뒤의 행이 모두 제목 칸 안의 작은 표로 빨려 들어가고, 날짜·연체료를 글자로 비교해 정렬하므로 데모 데이터에서도 대출일 순서가 틀리며, 이관 기록의 '1970.1.1'이 진짜 날짜처럼 맨 앞에 온다. 주의: 합성은 데스크톱 화면이다. 휴대폰 폭에서는 시험자가 만든 입력 표(열 폭 합 876px 고정, 카드가 overflow: hidden)가 Demo data 상태에서도 연체료·상태 열이 잘린다.
프롬프트 전문 보기
/break-ui ./loans.html — 가상 '산마루 도서관' 관리자 화면의 대출 현황 표다(loans.demo.js → loans.js, 열 머리를 누르면 정렬). 최악의 데이터로 깨뜨려 보고, 정렬이 값의 종류(날짜·금액)에 맞게 되는지와 대출이 1,000건 넘게 쌓였을 때도 함께 봐 줘. 무엇이 깨졌는지 보고하고 고치지는 마. [시험 진행 메모] - 무인 시험이다. 중간에 묻지 말고 끝까지 진행해. 선택지가 있으면 스스로 하나를 골라 이유를 한 줄로 적고 진행한다. - break-ui 절차를 줄이지 말고 SKILL.md대로 따른다(Phase 1 표면 지도 → CATALOG.md를 읽고 최악 데이터 만들기 → 토글 → 너비·확대·(제품이 지원하면) 다크 모드·RTL로 깨뜨려 보기 → 보고). 시간 제한은 20분이니 범위는 요청한 컴포넌트만큼으로 한다. - 결과는 현재 폴더에 브라우저로 바로 열리는 HTML로 만든다(입력 파일이 있으면 그 옆에). 토글은 SKILL.md대로 'Demo data / Worst case' 이름의 분할 단추로 화면 아래 가운데에 두고, 추가 상태(Empty·One·1,000 rows 등)도 같은 토글에 넣는다. 확인용 스크린숏 같은 임시 파일도 현재 폴더 안에 둔다. 셸 명령은 cd와 셸 변수 없이 현재 폴더 기준 경로나 절대 경로로 실행한다. - 보고서(Part 1~3)는 답변으로 보여 주고, 같은 내용을 현재 폴더의 break-report.md로도 저장한다. - 이 장비에는 인터넷이 없다. 웹 글꼴·외부 이미지·CDN·자리 표시 사진 서비스를 쓰지 않는다. 아바타·사진은 이미지 파일 없이 CSS·SVG 도형이나 이니셜로 그린다. '깨진 이미지 주소' 사례가 필요하면 현재 폴더 안의 없는 파일 경로(예: ./missing-avatar.png)를 쓴다. - 글꼴은 이 장비에 설치된 것만 font-family 이름으로 쓴다: 한글 Noto Sans CJK KR·Noto Serif CJK KR, 아랍어 Noto Sans Arabic·Noto Naskh Arabic, 이모지 Noto Color Emoji, 라틴 문자 Noto Sans·DejaVu Sans 등(fc-list로 확인할 수 있다). - 화면 글자는 한국어로 쓴다(영어는 조금만). 최악 데이터의 비라틴 문자 사례는 한국어·아랍어(오른쪽에서 왼쪽)·이모지·베트남어 같은 발음 기호로 하고, 중국어·한자(일본 한자 포함)는 쓰지 않는다(CATALOG.md의 한자 이름 예시도 쓰지 않는다). 이름·이메일·숫자는 모두 가상이다. CATALOG.md의 예시 이름·이메일을 그대로 베끼지 말고 같은 유형(길이·하이픈·발음 기호·접미사 등)으로 새로 지어 실존 인물과 겹치지 않게 한다. 이메일·주소는 example.com·example.org·.test만 쓰고, 실존 브랜드·로고·사진·인물은 쓰지 않는다. - 화면 확인은 google-chrome --headless=new --screenshot=파일 --window-size=폭,높이 file://경로 로 할 수 있다(인터넷 주소는 열리지 않고, 다른 브라우저나 창을 여는 명령은 없다). 계산·검사에는 python3를 써도 된다. 이 시험에서는 curl·wget·npm·npx·pip·node·git·rm 명령이 막혀 있다. 지울 파일은 그대로 둔다. - 끝나면 만들거나 고친 파일 경로, 토글이 있는 파일과 그 상태 목록을 알려 줘.

run08 · 영어 요청. 가상 중고 악기 장터 '울림 마당(Ullim Madang)'의 상품 카드 목록(화면 영어)을 먼저 데모 데이터로 만들게 한 뒤 깨뜨렸다. 악기 그림은 이미지 파일 없이 SVG로 그렸고, 토글은 Demo data / Worst case / Empty / One / 1,000 rows, 보고서는 영어로 20건(Broken 6·Ugly 9·Fragile 5)이다. 제목의 '<READ DESCRIPTION>'이 태그로 읽혀 사라지고, 판매자가 위치를 숨기면 'undefined · 40m ago', 등록 시각이 1970-01-01이면 '20748d ago', 그림이 없는 악기(해금)는 빈 분홍 칸이 되며, 머리 문구는 '1 listings'로 나온다.
프롬프트 전문 보기
/break-ui Build a product card grid for a fictional second-hand instrument marketplace called '울림 마당' (Ullim Madang) with demo data first, then break it. Each card has a photo area (no image files: draw it with CSS or SVG), item title, condition badge (Like new / Good / Fair), price in KRW, seller name with initials avatar, neighborhood, time listed, and a heart button with a like count. Four columns on desktop, two on a phone. UI copy in English. Make it look right with the demo data, then switch to the worst case, find what breaks and report it. Don't fix anything. [Test-run notes] - This is an unattended test run. Don't ask me anything; go all the way. If there is a choice to make, pick one yourself, give the reason in one line, and carry on. - Don't shorten the break-ui procedure; follow SKILL.md as written (Phase 1 surface map → read CATALOG.md and build the worst case → toggle → break it at the widths, zoom and, if the product supports them, dark mode and RTL → report). The time limit is 20 minutes, so keep the scope to the component in the brief. - Put the result in the current folder as HTML that opens straight in a browser (next to the input files if there are any). Label the toggle as SKILL.md says, a segmented control named 'Demo data / Worst case' at the bottom center, and put extra states (Empty, One, 1,000 rows, ...) on the same toggle. Keep temporary files such as check screenshots inside the current folder too. Run shell commands without cd and without shell variables, using paths relative to the current folder or absolute paths. - Show the report (Parts 1-3) in your answer and also save the same content as break-report.md in the current folder. - This machine has no internet. Don't use web fonts, external images, CDNs or placeholder-photo services. Draw avatars and photos with CSS/SVG shapes or initials, no image files. If you need a 'broken image URL' case, use a path to a missing file inside the current folder (e.g. ./missing-avatar.png). - Use only fonts installed on this machine, by font-family name: Hangul Noto Sans CJK KR, Noto Serif CJK KR; Arabic Noto Sans Arabic, Noto Naskh Arabic; emoji Noto Color Emoji; Latin Noto Sans, DejaVu Sans and others (check with fc-list). - Keep the on-screen copy in the language the brief gives. For non-Latin worst-case values use Korean, Arabic (right-to-left), emoji and diacritics such as Vietnamese; do not use Chinese characters at all (no hanzi or kanji, so skip the CJK name example in CATALOG.md). All names, emails and numbers are fictional. Don't copy the example names and emails from CATALOG.md verbatim; invent new ones of the same type (length, hyphens, diacritics, suffixes) so they don't match real people. Use only example.com, example.org or .test for emails and URLs, and no real brands, logos, photos or people. - You can look at the page with google-chrome --headless=new --screenshot=FILE --window-size=W,H file://PATH (internet addresses won't open, and there is no command that opens another browser or window). python3 is fine for calculations and checks. curl, wget, npm, npx, pip, node, git and rm are blocked in this test; leave files you would delete where they are. - When done, tell me the paths of the files you created or changed, and which file has the toggle and its states.

run10 · 설명만 주고 가상 요리 기록 앱 '레시피 공책'의 태그 칩(목록 위 필터 줄 + 카드 안 태그)을 먼저 만들게 한 뒤 깨뜨렸다. 토글은 Demo data / Worst case / Empty / One / 1,000 rows, 보고서는 18건(Broken 6·Ugly 7·Fragile 5)이다. 태그가 48개면 '+N 더 보기' 단추가 숨은 스크롤 영역 끝으로 밀려 닿을 수 없고, 주소로 복원된 11번째 태그는 '+42' 뒤에 숨어 무엇으로 걸렀는지 안 보이며, 가족 이모지(ZWJ)가 10글자 자르기에 쪼개져 '�'가 되고, 레시피 수 없는 새 태그는 '새 태그undefined', 조리 시간이 없으면 '조리 null분'으로 나온다. 주의: 합성은 데스크톱 화면이다. 휴대폰 390 폭에서는 데모 데이터에서도 필터 칩 줄의 '+3 더 보기'가 보이지 않는다(칩 줄이 가로 스크롤 영역이라 오른쪽이 잘리며, 모델의 보고서 #1이 320·375px에서도 같다고 적었다).
프롬프트 전문 보기
/break-ui 가상 요리 기록 앱 '레시피 공책'의 태그 칩을 먼저 데모 데이터로 만든 뒤 깨뜨려 봐. 레시피 목록 위의 태그 필터 줄(칩마다 레시피 수, 고른 칩 강조, 칩이 많으면 '+N 더 보기')과 레시피 카드 안의 태그 칩 줄, 두 군데다. 데모로 보기 좋게 만든 다음 최악의 데이터로 바꿔 깨지는 곳을 찾아 보고해 줘. 고치지는 마. [시험 진행 메모] - 무인 시험이다. 중간에 묻지 말고 끝까지 진행해. 선택지가 있으면 스스로 하나를 골라 이유를 한 줄로 적고 진행한다. - break-ui 절차를 줄이지 말고 SKILL.md대로 따른다(Phase 1 표면 지도 → CATALOG.md를 읽고 최악 데이터 만들기 → 토글 → 너비·확대·(제품이 지원하면) 다크 모드·RTL로 깨뜨려 보기 → 보고). 시간 제한은 20분이니 범위는 요청한 컴포넌트만큼으로 한다. - 결과는 현재 폴더에 브라우저로 바로 열리는 HTML로 만든다(입력 파일이 있으면 그 옆에). 토글은 SKILL.md대로 'Demo data / Worst case' 이름의 분할 단추로 화면 아래 가운데에 두고, 추가 상태(Empty·One·1,000 rows 등)도 같은 토글에 넣는다. 확인용 스크린숏 같은 임시 파일도 현재 폴더 안에 둔다. 셸 명령은 cd와 셸 변수 없이 현재 폴더 기준 경로나 절대 경로로 실행한다. - 보고서(Part 1~3)는 답변으로 보여 주고, 같은 내용을 현재 폴더의 break-report.md로도 저장한다. - 이 장비에는 인터넷이 없다. 웹 글꼴·외부 이미지·CDN·자리 표시 사진 서비스를 쓰지 않는다. 아바타·사진은 이미지 파일 없이 CSS·SVG 도형이나 이니셜로 그린다. '깨진 이미지 주소' 사례가 필요하면 현재 폴더 안의 없는 파일 경로(예: ./missing-avatar.png)를 쓴다. - 글꼴은 이 장비에 설치된 것만 font-family 이름으로 쓴다: 한글 Noto Sans CJK KR·Noto Serif CJK KR, 아랍어 Noto Sans Arabic·Noto Naskh Arabic, 이모지 Noto Color Emoji, 라틴 문자 Noto Sans·DejaVu Sans 등(fc-list로 확인할 수 있다). - 화면 글자는 한국어로 쓴다(영어는 조금만). 최악 데이터의 비라틴 문자 사례는 한국어·아랍어(오른쪽에서 왼쪽)·이모지·베트남어 같은 발음 기호로 하고, 중국어·한자(일본 한자 포함)는 쓰지 않는다(CATALOG.md의 한자 이름 예시도 쓰지 않는다). 이름·이메일·숫자는 모두 가상이다. CATALOG.md의 예시 이름·이메일을 그대로 베끼지 말고 같은 유형(길이·하이픈·발음 기호·접미사 등)으로 새로 지어 실존 인물과 겹치지 않게 한다. 이메일·주소는 example.com·example.org·.test만 쓰고, 실존 브랜드·로고·사진·인물은 쓰지 않는다. - 화면 확인은 google-chrome --headless=new --screenshot=파일 --window-size=폭,높이 file://경로 로 할 수 있다(인터넷 주소는 열리지 않고, 다른 브라우저나 창을 여는 명령은 없다). 계산·검사에는 python3를 써도 된다. 이 시험에서는 curl·wget·npm·npx·pip·node·git·rm 명령이 막혀 있다. 지울 파일은 그대로 둔다. - 끝나면 만들거나 고친 파일 경로, 토글이 있는 파일과 그 상태 목록을 알려 줘.

run12 · 설명만 주고 가상 설계 사무소 '네모 반듯'의 도면 파일 업로드 목록을 먼저 만들게 한 뒤 깨뜨리고 고치기까지(+ fix) 시켰다. 보고서 22건(Broken 7·Ugly 11·Fragile 4) 가운데 17건을 고치고 1건(긴 파일 이름)은 title만 붙였으며 4건은 결정할 것으로 남겼고, 고치기 전 파일을 따로 남겼다. 같은 최악 데이터에서 패널 밖으로 밀리던 상태 배지·지우기 단추가 돌아오고, '127%' 진행 막대와 '0.0 MB'(812 B)가 '100%'·'812 B'로, '2362.1 MB'가 '2.31 GB'로, 실패 사유와 겹치던 행이 제 높이를 찾는다.
프롬프트 전문 보기
/break-ui 도면 파일 업로드 목록 + fix — 가상 건축 설계 사무소 '네모 반듯'의 도면 파일 업로드 목록을 먼저 데모 데이터로 만든 뒤 깨뜨려 봐. 파일마다 형식 아이콘, 파일 이름, 크기, 진행 막대, 상태(대기·업로드 중·완료·실패), 지우기 단추가 있다. 데모로 보기 좋게 만들고 최악의 데이터로 깨지는 곳을 찾아 보고한 다음, '결정할 것'에 넣은 것을 뺀 나머지를 고쳐 줘. 고치기 전과 후를 비교할 수 있게, 고치기 직전 상태(토글은 달렸고 아직 고치지 않은 상태)의 파일을 이름 끝에 -before-fix를 붙여 따로 저장한 다음 고쳐 줘. [시험 진행 메모] - 무인 시험이다. 중간에 묻지 말고 끝까지 진행해. 선택지가 있으면 스스로 하나를 골라 이유를 한 줄로 적고 진행한다. - break-ui 절차를 줄이지 말고 SKILL.md대로 따른다(Phase 1 표면 지도 → CATALOG.md를 읽고 최악 데이터 만들기 → 토글 → 너비·확대·(제품이 지원하면) 다크 모드·RTL로 깨뜨려 보기 → 보고). 시간 제한은 20분이니 범위는 요청한 컴포넌트만큼으로 한다. - 결과는 현재 폴더에 브라우저로 바로 열리는 HTML로 만든다(입력 파일이 있으면 그 옆에). 토글은 SKILL.md대로 'Demo data / Worst case' 이름의 분할 단추로 화면 아래 가운데에 두고, 추가 상태(Empty·One·1,000 rows 등)도 같은 토글에 넣는다. 확인용 스크린숏 같은 임시 파일도 현재 폴더 안에 둔다. 셸 명령은 cd와 셸 변수 없이 현재 폴더 기준 경로나 절대 경로로 실행한다. - 보고서(Part 1~3)는 답변으로 보여 주고, 같은 내용을 현재 폴더의 break-report.md로도 저장한다. - 이 장비에는 인터넷이 없다. 웹 글꼴·외부 이미지·CDN·자리 표시 사진 서비스를 쓰지 않는다. 아바타·사진은 이미지 파일 없이 CSS·SVG 도형이나 이니셜로 그린다. '깨진 이미지 주소' 사례가 필요하면 현재 폴더 안의 없는 파일 경로(예: ./missing-avatar.png)를 쓴다. - 글꼴은 이 장비에 설치된 것만 font-family 이름으로 쓴다: 한글 Noto Sans CJK KR·Noto Serif CJK KR, 아랍어 Noto Sans Arabic·Noto Naskh Arabic, 이모지 Noto Color Emoji, 라틴 문자 Noto Sans·DejaVu Sans 등(fc-list로 확인할 수 있다). - 화면 글자는 한국어로 쓴다(영어는 조금만). 최악 데이터의 비라틴 문자 사례는 한국어·아랍어(오른쪽에서 왼쪽)·이모지·베트남어 같은 발음 기호로 하고, 중국어·한자(일본 한자 포함)는 쓰지 않는다(CATALOG.md의 한자 이름 예시도 쓰지 않는다). 이름·이메일·숫자는 모두 가상이다. CATALOG.md의 예시 이름·이메일을 그대로 베끼지 말고 같은 유형(길이·하이픈·발음 기호·접미사 등)으로 새로 지어 실존 인물과 겹치지 않게 한다. 이메일·주소는 example.com·example.org·.test만 쓰고, 실존 브랜드·로고·사진·인물은 쓰지 않는다. - 화면 확인은 google-chrome --headless=new --screenshot=파일 --window-size=폭,높이 file://경로 로 할 수 있다(인터넷 주소는 열리지 않고, 다른 브라우저나 창을 여는 명령은 없다). 계산·검사에는 python3를 써도 된다. 이 시험에서는 curl·wget·npm·npx·pip·node·git·rm 명령이 막혀 있다. 지울 파일은 그대로 둔다. - 끝나면 만들거나 고친 파일 경로, 토글이 있는 파일과 그 상태 목록을 알려 줘.