Communitygithub.com

jhd3197/AgentSite

개인 또는 스튜디오 포트폴리오 — 굵은 타이포그래피 인트로, 프로젝트 그리드, 사례 연구 링크, 연락처.

AgentSite란 무엇인가요?

이 스킬은 개인 또는 스튜디오 포트폴리오 웹사이트를 생성하는 데 특화되어 있습니다. 방문자가 '이 사람과 일하고 싶다'고 느끼게 하는 것이 핵심 목표이며, 개발자나 디자이너가 자신의 작업을 효과적으로 선보일 수 있도록 도와줍니다. Claude Code, Cursor, Codex 등 다양한 AI 에이전트 플랫폼에서 사용할 수 있으며, SKILL.md 문서에 정의된 구조를 따릅니다. 사이트는 슬림한 내비게이션, 큰 타이포그래피로 강조된 소개 문구, 4-9개의 프로젝트 카드 그리드, 소개, 고객사/보도자료 목록, 그리고 연락처 섹션으로 구성됩니다. 품질 규칙으로는 일관된 타이포그래피 사용, 실제 프로젝트 이름과 역할 표시, 캐러셀이나 패럴랙스 같은 과도한 효과 배제, 그리고 빈 상태를 정직하게 표시하는 것을 강조합니다.

지원 대상~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/jhd3197/AgentSite/tree/HEAD/agentsite/skills/portfolio

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

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

문서

포트폴리오 사이트

방문자가 "이 사람과 일하고 싶다"고 느끼게 만드는 것이 목적인 개인 또는 스튜디오 사이트.

필수 구성 요소

  1. 슬림 내비게이션 — 이름/워드마크, 3-4개의 링크 (작업 / 소개 / 글 / 연락처).
  2. 소개 섹션 — 큰 타이포그래피 문구 (clamp() 디스플레이 크기). 누가 무엇을 위해 하는지 한 문장으로 설명하고, 얇은 메타데이터 스트립 (위치, 가능 여부, 현재 역할)을 포함.
  3. 프로젝트 그리드 — 4-9개의 사례 연구 카드. 각 카드: 커버 이미지 / 색상 블록, 프로젝트 제목, 한 줄 역할, 연도. 호버 시 부드럽게 떠오름. 클릭 시 (모의) 사례 연구 URL로 이동.
  4. 소개 — 짧은 약력 문단 + 사진 또는 서명 마크.
  5. 선정 고객사 / 보도자료 — 절제된 로고 스트립 또는 목록. 실제 자료가 없으면 섹션을 완전히 생략.
  6. 연락처 — 이메일 (mailto), 트위터/링크드인, 캘린더 예약 링크.

품질 규칙

  • 하나의 결정적인 글꼴 스타일. 디스플레이가 세리프면 본문은 산세리프 (또는 반대).
  • 프로젝트 카드: 실제 이름 + 역할. Lorem ipsum 제목 대신 레이블이 있는 플레이스홀더 사용 (예: "[커버 이미지 — 히어로 샷으로 교체]").
  • 캐러셀 금지. 패럴랙스 금지. 자동 재생 비디오 금지.
  • 빈/"더 보기" 상태는 정직하게 표시. 가짜 프로젝트로 그리드를 채우지 않음.

관련 스킬