Skills

예시 체험

중3 과학 — 전기 에너지 복습 퀴즈 페이지 점검하고 고치기

꾸민 수업 예시 직접 생성 — 에이전트 제작 새 창에서 크게 보기

선생님이 입력한 내용

중학교 3학년 과학 '전기 에너지' 단원을 마친 뒤, 학생들이 교실이나 집에서 휴대폰으로 풀 복습 퀴즈 페이지를 선생님이 직접 만들었다. 수업에 쓰기 전에 화면의 접근성·글자·색 문제를 점검하고 고치고 싶은 상황이다.

중학교 3학년 과학 '전기 에너지' 단원 복습용으로 온라인 퀴즈 페이지(quiz.html)를 급하게 만들었어요. 학생들이 휴대폰으로도 풀 수 있었으면 합니다. 접근성, 레이아웃, 문구, 글자 크기, 색, 마감까지 점검해서 고칠 점을 알려 주세요. 문제가 있으면 고친 코드도 함께 보여 주세요.

나온 결과

도메인 점검 결과: 접근성 5건 · 레이아웃 2건 · 글쓰기 1건 · 타이포그래피 1건 · 색상 2건 · UI 마감 2건 HIGH 예: 본문 색 #9AA0A6이 흰 바탕에서 2.64:1로 4.5:1에 못 미침 → #1F2937(14.68:1). HIGH 예: 고정 너비 480px가 320px 화면에서 가로 스크롤을 만듦 → max-width: 480px로 바꿈. HIGH 예: 아이콘만 있는 닫기 버튼에 접근 가능한 이름이 없음 → aria-label="퀴즈 닫기" 추가. 판정: Block — 점검 전 HIGH 9건, 고친 페이지에서 반영 확인.

직접 해 보기 — 3단계

1. Claude Code 같은 AI 에이전트에 저장소 안내대로 이 스킬 모음을 설치한다. npx skills add jakubkrehel/skills 로도 넣을 수 있다.
2. 점검할 HTML 파일을 프로젝트에 두고, 학년·과목·단원과 '무엇을 점검할지'를 적은 문장을 붙여 넣는다. 위 문장을 바꿔 써도 된다.
3. 나온 리포트의 발견 사항 표에서 위치(file:line), 현재 값, 고친 값을 확인하고, 고친 코드를 파일에 반영한 뒤 320px 폭과 확대 상태에서 다시 점검한다.

수업 상황은 이해를 돕기 위해 꾸민 예시입니다. 만든 방법: opencode (DeepSeek) + 이 스킬 (better-interface) · 확인일 2026-10-16. 이 스킬은 화면(UI)을 점검하고 고치는 스킬이라 결과가 그림 문서로 바로 나오지는 않는다. 점검 결과는 점검 범위·도메인 커버리지·발견 사항 표·판정이 담긴 텍스트 리포트로 나온다. 그림은 그 리포트를 HTML로 옮겨 찍고, 같은 화면 오른쪽에 고친 페이지를 그대로 띄운 것이다. 점검과 수정은 스킬의 절차(도메인 스킬을 정해진 순서로 불러오기, 경로:줄 근거 달기, 320px 폭과 확대에서 넘침 확인)를 그대로 따라 실제로 수행했다. 발견 사항 표의 대비 값은 색 값에서 계산해 측정한 수치다. 화면 낭독기로 실제 낭독을 들어 보는 확인은 이 환경에 낭독기가 없어 하지 못했고(Not verified), 접근 가능한 이름·역할·상태는 소스로만 확인했다. 퀴즈 문항 속 숫자(100 W, 5시간, 0.5 kWh 등)는 수업 내용으로 꾸민 수업 예시 값이며 학생 성적 같은 실제 측정값이 아니다. 선생님이 그대로 쓸 때는 문항 내용·정답·단원 성취기준을 직접 확인해야 한다. 회사명·점수·순위·효과 보장 문구는 쓰지 않았다.

써 보려면

1. 저장소 jakubkrehel/skills를 엽니다.
2. 설치가 필요합니다. 절차는 저장소 안내를 따릅니다.
3. 이 기록에는 API 키가 필요하지 않다고 되어 있습니다.

출처

스타 수와 라이선스는 공식 저장소 기준이며, 일일 검증이 다시 확인합니다. 정보 정정 요청

라이선스