개발 스킬

Fetch execution traces, records of an agent’s actions, from LangSmith Studio to debug LangChain and LangGraph agents. Inspect errors, tool calls, memory operations, execution times, and token usage, or export records for further review.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Investigating an agent failure
• Checking tool selection and execution order
• Investigating memory storage and recall

새 스킬의 설명과 지침을 작성하는 최소한의 템플릿입니다. 이름과 설명 항목, 지침 삽입 위치만 있으며 구체적인 작업 절차는 비어 있습니다.

• 새 스킬 문서 작성 시작
• 스킬 설명과 사용 조건 초안 작성
• 에이전트에게 줄 지침 작성 준비

Python이나 TypeScript로 AI 에이전트와 외부 서비스를 연결하는 MCP 서버를 설계하고 구현하며, 입력 검증과 오류 처리부터 동작 평가까지 진행합니다.

• 외부 API용 MCP 서버 개발
• 에이전트 작업에 맞는 도구 설계
• 입력 검증과 오류 처리 검토

codegraph에 새 프로그래밍 언어 지원을 추가합니다. 구문 분석 설정, 정보 추출 구현, 테스트와 함께 실제 코드베이스 세 곳에서 품질과 작업량, 비용을 비교합니다.

• codegraph에 새 언어 지원 추가
• 함수와 가져오기 정보 추출 검증
• 실제 코드베이스 세 곳에서 효과 비교

HTML의 `<object>` 요소를 점검하고, 삽입한 콘텐츠를 불러오지 못할 때도 같은 정보를 전달할 수 있도록 대체 텍스트와 콘텐츠를 보완합니다.

• 대체 콘텐츠가 없는 object 요소 확인
• 삽입 콘텐츠의 로딩 실패에 대비
• 대체 콘텐츠의 정보 동등성 점검

Audit web images that are larger than their displayed size and help serve suitable versions for different screens. Review image dimensions, responsive image settings, and Lighthouse findings, then provide updated HTML and steps to verify the changes.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Finding oversized images on mobile pages
• Reviewing srcset and sizes against the actual layout
• Adding image variants for different screen widths

수량이 포함된 화면 문구와 번역 파일을 점검하고, 단수와 복수만으로 구분할 수 없는 언어까지 대상 언어에 맞는 표현을 선택하도록 구현을 개선합니다.

• 다국어 화면의 수량 표시 검토
• 아랍어와 러시아어의 복수형 지원
• 번역 파일과 국제화 설정 점검

외부 글꼴이나 API의 연결 대기 시간을 측정해 원인을 확인합니다. 중요한 대상의 사전 연결을 추가하고 불필요한 설정을 정리해 페이지 로딩 속도 개선을 돕습니다.

• 외부 글꼴과 API 연결 지연을 조사합니다
• head의 사전 연결 설정을 점검합니다
• 불필요한 사전 연결 설정을 정리합니다

페이지 이동 HTML에서 현재 페이지 표시, 이전 및 다음 링크, 키보드 조작을 점검합니다. 화면 낭독기로도 현재 위치와 이동할 곳을 알 수 있도록 구조를 수정합니다.

• 검색 결과의 페이지 이동 점검하기
• 키보드로 페이지 이동 확인하기
• 화면 낭독기용 레이블 개선하기

연결이 끊겼을 때 안내 페이지를 표시하도록 만듭니다. service worker로 미리 저장하고 외부 리소스 의존성과 페이지 표시 조건을 점검합니다.

• PWA에 오프라인 화면 추가
• 연결이 끊겼을 때의 안내 정비
• 오프라인 페이지의 사전 저장 점검

페이지 로딩 시간을 측정하고 3초 미만을 목표로 지연 원인을 조사합니다. 무거운 리소스, 통신, 렌더링 작업을 실측해 지연 로딩과 캐시 등의 개선으로 연결합니다.

• 페이지 표시가 느린 원인 조사
• 무거운 리소스와 렌더링 작업 식별
• 느린 회선에서 표시 성능 확인

CSS의 글자 크기, 너비, 여백에 쓰인 고정 픽셀 값을 점검합니다. 화면 너비와 브라우저 글자 크기 설정에 맞춰 변하는 상대 단위로 바꾸도록 지원합니다.

• 브라우저 글자 크기 설정 지원
• 고정 너비를 유연한 레이아웃으로 변경
• 컴포넌트 내부 여백 단위 검토

화면 너비와 해상도에 맞는 이미지를 제공하도록 srcset과 sizes를 점검합니다. CSS 표시 너비와 비교해 모바일에 지나치게 큰 이미지를 보내는 문제를 찾습니다.

• 글 이미지의 반응형 설정 확인
• 모바일의 과도한 이미지 다운로드 점검
• 카드와 갤러리의 이미지 크기 점검

웹페이지 이미지의 표시 위치에 맞춰 로딩 설정을 점검합니다. 화면 밖 이미지는 지연 로딩하고 첫 화면의 중요 이미지는 우선 로딩하도록 조정하며 크기도 확인합니다.

• 화면 밖 이미지의 지연 로딩 점검
• 히어로 이미지의 로딩 우선순위 확인
• 지연 로딩 이미지의 너비와 높이 지정

고밀도 디스플레이에서 이미지가 흐려지는 원인을 점검합니다. 두 배·세 배 해상도 이미지, HTML과 CSS 지정, 이미지 제공 설정과 로딩 방식을 함께 확인합니다.

• 고밀도 화면의 이미지 흐림을 조사합니다
• 이미지의 srcset 설정을 검토합니다
• CSS 배경 이미지를 고밀도 화면에 맞춥니다

웹페이지의 JPEG가 흐릿한 미리보기에서 점차 선명해지는 형식인지 점검합니다. 파일 크기, 표시 크기와 로딩 방식을 함께 살펴보고 표시 경험을 개선할 수정안을 제시합니다.

• JPEG 로딩 중 표시 모습 점검
• WebP나 AVIF의 대체 JPEG 확인
• CDN이나 빌드 과정의 이미지 제공 설정 확인

웹 페이지 로딩을 측정하고 지연 원인에 맞는 리소스 힌트를 제안합니다. 이미지와 글꼴을 미리 가져오거나 외부 서비스에 사전 연결하도록 설정을 돕습니다.

• 주요 이미지와 글꼴의 사전 로딩 확인
• 외부 서비스 사전 연결 조정
• 다음 화면에서 쓸 파일 미리 가져오기

표시 조건이나 이미지 형식에 따라 이미지를 바꾸는 picture 요소를 점검합니다. 대체 img, 설명과 크기, 형식 속성을 확인하고 수정한 HTML을 제시합니다.

• AVIF와 WebP의 대체 이미지 확인
• picture 요소 순서와 속성 점검
• 이미지 설명과 크기가 빠진 코드 수정

실제 측정으로 페이지 표시 지연의 원인을 확인하고 중요한 이미지와 글꼴의 미리 로드, 외부 서버 사전 연결 등을 적절히 설정해 로딩 개선을 돕습니다.

• 주요 이미지와 글꼴의 표시 지연 조사
• 외부 서비스 사전 연결 검토
• 다음 화면에 필요한 파일 미리 가져오기

이미지와 JavaScript를 포함한 페이지 전체 전송량을 측정하고 로딩이 느린 원인을 확인합니다. 1500KB 미만을 기준으로 이미지와 코드의 용량을 줄입니다.

• 모바일 네트워크의 로딩 지연 조사
• 페이지 전체 용량의 상한 준수 확인
• 큰 이미지와 JavaScript 경량화

웹 앱의 PWA 설치 지원을 점검하고 HTTPS, 설정 파일, 아이콘의 누락 사항을 확인합니다. 오프라인 응답과 앱 시작 주소 설정도 검토합니다.

• PWA 설치 지원 여부 점검
• 설치 안내 추가 전 설정 확인
• 아이콘 크기와 형식 검토

브라우저 기본 스타일로 인한 표시 차이를 줄이도록 CSS 초기화 적용 여부와 로딩 순서를 점검합니다. 화면 너비와 조작 상태를 고려해 구체적인 수정안을 제시합니다.

• 브라우저 사이의 표시 차이 조사
• 새 사이트의 CSS 기초 마련
• CSS 프레임워크의 내장 초기화 확인

페이지의 초기 표시를 막는 CSS와 JavaScript를 조사하고 실측으로 원인을 확인합니다. 로딩 순서와 핵심 스타일 배치를 검토해 표시 지연을 개선합니다.

• 로딩 중 흰 화면이 지속되는 원인 조사
• CSS·JavaScript 로딩 방식 검토
• 초기 표시에 필요한 CSS 직접 삽입

JavaScript를 사용할 수 없을 때도 페이지의 중요한 내용을 읽을 수 있는지 점검합니다. 초기 HTML과 noscript 대체 표시를 확인하고 필요한 수정을 안내합니다.

• JavaScript 비활성화 시 표시를 확인합니다
• JavaScript 의존 기능의 대안을 점검합니다
• 초기 HTML의 중요한 내용을 점검합니다