개발 스킬

페이지에 포함된 큰 애니메이션 GIF를 점검하고 측정으로 부하를 확인한 뒤, MP4나 WebM으로 변환하고 동영상 태그로 교체하도록 돕습니다.

• GIF가 포함된 페이지의 지연 원인 조사
• 큰 GIF를 MP4나 WebM으로 변환
• 반복 재생 동영상의 재생 속성 검토

툴팁의 보충 정보가 스크린 리더에 전달되는지 점검합니다. 읽기용 이름과 표시를 유발하는 요소의 연결을 확인하고 수정안과 검증 방법을 제시합니다.

• 툴팁의 스크린 리더 출력 확인
• 표시를 유발하는 요소와 설명의 연결 점검
• 공통 툴팁 구성 요소 검토

화면 읽기 프로그램에서 숨긴 영역에 키보드로 접근할 수 있는 링크나 버튼이 남아 있는지 점검합니다. 초점 위치를 알 수 없게 만드는 문제의 수정안과 검증 방법을 제시합니다.

• 숨긴 영역에 남은 조작 요소 점검
• 키보드 이동 중 읽기가 끊기는 원인 조사
• 공통 UI 구성 요소의 접근성 검토

브라우저의 뒤로 및 앞으로 이동 시 메모리에서 페이지를 복원하는 방식을 점검합니다. 복원을 막는 이벤트 처리와 복원 후 오래된 정보가 남는 원인의 수정을 돕습니다.

• 뒤로 및 앞으로 이동이 느린 원인 조사
• 캐시 복원을 막는 처리 확인
• 복원 후 오래된 정보가 남는 오류 수정

대화 상자의 목적이 스크린 리더에 전달되는지 점검합니다. 제목과 레이블 지정 방식을 검토하고, 대상 요소와 수정 후 검증 방법을 안내합니다.

• 모달의 읽기용 이름 점검
• 경고 대화 상자의 레이블 확인
• 공통 대화 상자 구성 요소 검토

CSS 애니메이션에서 렌더링 부담이 큰 속성을 찾아 transform과 opacity를 사용하는 수정을 제안합니다. 화면 너비와 조작 상태별 표시 및 동작 줄이기 설정도 확인합니다.

• 끊기는 애니메이션 점검
• 위치나 크기를 바꾸는 속성 수정
• 동작 줄이기 설정 확인

화면 요소의 역할과 ARIA 속성이 맞는지 점검합니다. 출력 HTML과 상호작용 상태를 살펴보고, 스크린 리더가 의미를 올바르게 이해하도록 속성 삭제나 수정을 안내합니다.

• 공통 컴포넌트의 ARIA 속성을 점검합니다
• 디자인 시스템의 접근성을 확인합니다
• 의도와 다른 읽기 결과를 조사합니다

접이식 아코디언을 키보드와 화면 읽기 프로그램으로 이용할 수 있도록 버튼, 펼침 상태 속성, 제목 구조와 최종 출력된 HTML을 점검하고 수정합니다.

• 접이식 영역의 키보드 조작 확인
• 화면 읽기로 펼침 상태 전달
• 공통 아코디언 컴포넌트 검토

여러 저장 위치의 스킬을 지정한 우선순위로 조사해 목록을 만듭니다. 이름 중복, 선택 결과, 제외 항목과 목록 한도를 확인한 뒤 선택한 스킬의 지시 본문만 읽도록 절차를 정합니다.

• 프로젝트용과 개인용 스킬을 함께 정리할 때
• 활성화 전에 스킬 이름 중복을 확인할 때
• 목록 한도와 제외 항목을 확인할 때

재사용할 에이전트 스킬의 구성과 식별 정보를 검증합니다. 지시, 외부 기능, 실행 시점 등을 구분해 구현에 필요한 최소 조합과 선택 이유를 제시합니다.

• 일상 작업 절차를 스킬로 정리
• SKILL.md 식별 정보 검증
• 지시, 스크립트, 위임의 역할 구분

사람의 명시적 지정, AI 자동 선택, 앱이나 다른 스킬의 호출을 구분하여 스킬 실행 규칙을 설계하고 검증합니다. 선택 근거를 추적할 수 있는 JSON 판정을 반환합니다.

• 명시적 지정과 자동 선택 규칙 분리
• 호출 출처와 호출 연쇄 제한 검증
• 스킬을 선택하지 않는 조건 확인

병합 전에 데이터베이스 구조나 데이터를 바꾸는 마이그레이션 파일을 검토하고, 적용 동작과 롤백 한계, 잠금 및 대용량 데이터의 위험과 판단 근거를 정리합니다.

• 병합 전에 데이터베이스 변경을 검토합니다
• 롤백으로 되돌릴 수 있는 범위를 확인합니다
• 잠금과 대용량 데이터의 영향을 확인합니다

OpenSpec 변경의 명세 변경분을 읽어 기존 내용을 보존하면서 기본 명세에 반영합니다. 요구 사항의 추가, 수정, 삭제, 이름 변경을 지원하며 변경을 보관하지 않고 명세를 갱신합니다.

• 변경을 활성 상태로 두고 명세를 갱신합니다
• 기존 요구 사항에 시나리오를 추가합니다
• 선택한 명세 파일만 동기화합니다

구현이 끝난 OpenSpec 변경의 계획 산출물, 작업 완료 상태와 명세 차이를 확인해 보관합니다. 필요하면 기본 명세에 반영하고 저장 위치와 확인 결과를 보고합니다.

• 구현이 끝난 변경 보관
• 보관 전 명세 반영 여부 확인
• 작업 종료 전 미완료 항목 점검

OpenSpec 변경의 기존 계획 문서를 검토하고 새 결정을 반영합니다. 관련 문서의 모순과 누락을 확인하고 승인을 받아 수정하며, 구현 코드는 편집하지 않습니다.

• 기존 계획에 새 결정 반영
• 계획 문서의 모순 확인
• 편집 후 관련 문서의 일관성 점검

여러 OpenSpec 변경을 한꺼번에 보관합니다. 문서와 작업 진행 상황을 확인하고 구현을 근거로 명세 충돌을 정리한 뒤, 명세를 동기화하고 변경별 보관 결과를 보고합니다.

• 완료한 변경을 한꺼번에 보관합니다
• 여러 변경의 명세 충돌을 정리합니다
• 보관 전에 미완료 작업을 확인합니다

OpenSpec에서 구현 전에 필요한 제안서, 명세, 설계, 작업 문서를 한 번에 작성합니다. 기존 코드와 의존 관계를 확인해 구현을 시작할 수 있도록 준비합니다.

• 새 기능의 계획 문서를 한 번에 작성
• 변경 내용을 구현 작업으로 정리
• 누락된 선행 문서 보완

진행 중인 OpenSpec 변경에서 다음에 필요한 계획 문서를 하나씩 작성합니다. 기존 문서와 작성 규칙을 다시 읽고, 누락 파일을 보완하며 진행 상황과 다음 작업을 안내합니다.

• 진행 중인 변경 계획 재개
• 다음 계획 문서 작성
• 중단된 문서의 누락 파일 보완

OpenSpec 프로젝트의 기존 코드와 명세를 살펴보며 대화로 아이디어, 문제, 요구 사항을 정리합니다. 구현 전이나 작업 중에 접근 방식을 비교하고 다음 결정을 내리도록 돕습니다.

• 모호한 기능 아이디어의 범위를 정리합니다
• 기존 프로젝트를 바탕으로 기술을 비교합니다
• 구현이 막혔을 때 설계를 재검토합니다

기능 추가나 버그 수정을 위한 OpenSpec 변경의 기본 틀을 만듭니다. 사용할 작업 흐름과 진행 상태를 확인하고 첫 계획 문서의 템플릿을 제시합니다.

• 새 기능을 위한 변경 시작
• 버그 수정 계획 준비
• 선택한 작업 흐름의 첫 템플릿 확인

원하는 기능이나 수정 사항을 바탕으로 OpenSpec 제안서, 명세 변경분, 설계 문서, 구현 작업을 작성합니다. 기존 코드와 설정을 조사해 구현 전에 검토할 계획을 마련합니다.

• 새 기능의 구현 계획을 작성합니다
• 버그 수정을 구체적인 작업으로 나눕니다
• 명세 변경과 설계를 함께 검토합니다

OpenSpec에 등록된 변경의 명세와 설계를 읽고 미완료 작업을 구현합니다. 완료 표시와 진행 상황을 확인하며, 중단한 구현을 이어서 진행할 수 있습니다.

• 계획한 변경을 구현할 때
• 중단한 구현을 다시 시작할 때
• 완료한 작업과 남은 일을 확인할 때

오디오·이미지·동영상 서비스의 API 규격, 모델 선택, 호출 경로와 입출력 조건을 확인하는 통합 안내서입니다. 서비스별 제약과 작업 재개 방법을 정리해 실제 요청에 사용할 호스트와 모델을 명시하도록 돕습니다.

• 생성에 사용할 API와 모델을 선택할 때
• 오디오·이미지·동영상 입력 조건을 확인할 때
• 대기 중인 생성 작업을 재개할 때

GSAP으로 웹 요소와 SVG에 애니메이션을 넣는 코드 작성과 검토를 돕습니다. 속도 변화, 순차 표시, 화면 너비와 동작 줄이기 설정에 따른 조정을 다룹니다.

• 웹 요소에 등장 효과를 추가할 때
• 여러 요소를 시간차로 움직일 때
• 화면 너비에 따라 동작을 바꿀 때