Communitygithub.com

포트폴리오 프로젝트 프리뷰 리더

기존 아카이브 프리뷰 내에서 승인된 긴 형식의 프로젝트 이미지를 순서대로 읽을 수 있는 접근성 있는 포트폴리오 프로젝트 프리뷰 리더를 추가하거나 검토합니다.

포트폴리오 프로젝트 프리뷰 리더란 무엇인가요?

이 스킬은 개발자가 포트폴리오 사이트의 아카이브/다이얼로그 상태 모델 내에서 긴 형식의 프로젝트 이미지, 문서 페이지 또는 단계별 시각적 모듈을 순서대로 보여주는 접근성 있는 프리뷰 리더를 구현하거나 검토할 수 있도록 설계되었습니다. 기존 프리뷰 다이얼로그의 탐색 흐름을 유지하면서 각 페이지나 모듈에 지역화된 레이블을 제공하고, 수직 스크롤 영역을 사용하며, 닫기, Escape, 포커스 복원, 스크롤 잠금, 키보드 동작과 같은 다이얼로그 동작을 보존합니다. 이 스킬은 주로 정적 사이트 생성기(예: Astro, Next.js)로 구축된 개인 포트폴리오 웹사이트에 적합하며, 불필요한 추상화를 도입하지 않고 실제 반복되는 동작만 일반화합니다. 구현 후에는 모든 에셋이 로드되고, 레이블이 제공되며, 프리뷰 작동이 정상이고, 가로 오버플로가 발생하지 않는지 확인하고, 타입, 린트, 프로덕션 빌드 검사를 실행해야 합니다.

지원 대상~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/husheng-web/personal-website-skills/tree/HEAD/skills/portfolio-project-preview-reader

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

문서

포트폴리오 프로젝트 프리뷰 리더은(는) 무엇을 하나요?

승인된 긴 형식의 프로젝트 이미지를 기존 아카이브 프리뷰 내에 표시하여 주변 탐색 흐름을 방해하지 않도록 합니다.

구현 전 확인 사항

아카이브/다이얼로그 상태 모델, 기존 문서 리더 경로, 프로젝트 레지스트리, 소스 에셋 순서 및 모바일 스타일을 검사합니다. 실제 반복되는 동작만 일반화하고, 재사용 가능한 추상화가 정당화되지 않는 경우 일회성 프로젝트 규칙은 지역적으로 유지합니다.

요구 사항

  • 선언된 소스 순서를 유지하고 각 페이지 또는 모듈에 접근 가능한 지역화된 레이블을 제공합니다.
  • 포함된 수직 읽기 영역을 사용하며, 예기치 않게 페이지가 확장되거나 가로 오버플로가 발생하지 않도록 합니다.
  • 프리뷰 다이얼로그에서 이미 지원하는 닫기, Escape, 포커스 복원, 스크롤 잠금 및 키보드 동작을 유지합니다.
  • 게시 가능한 경우에만 상세 페이지로 라우팅하며, 깨졌거나 의미상 중복된 대상을 노출하지 않습니다.

검증

모든 에셋이 로드되고, 정렬된 레이블이 제공되며, 프리뷰 열기/닫기가 작동하고, 리더 너비에 데스크톱 및 모바일 크기에서 가로 오버플로가 없는지 확인합니다. 코드 변경 후 타입, 린트, 프로덕션 빌드 검사를 실행합니다.

Individual skills in this repo

This repo contains 7 individual skills — each has its own dedicated page.

관련 스킬