Communitygithub.com

vvedantb/eva

실행 중인 실제 앱에서 깔끔한 HD 스크린샷 하나를 캡처하고(Playwright, deviceScaleFactor 2, 1280 레이아웃을 2560×1440으로 캡처, 개발자 오버레이 숨김) 함께 게시할 트윗을 작성합니다.

eva란 무엇인가요?

이 스킬은 사용자가 Eva 앱의 특정 기능을 소개하거나 발표할 때, 실제 실행 중인 앱에서 하나의 고해상도 정적 이미지를 캡처하고 이에 맞는 트윗을 자동으로 생성합니다. Playwright 기반의 HD 스크립트를 사용하여 deviceScaleFactor 2로 1280px 레이아웃을 2560×1440 해상도로 캡처하며, 결과물은 레티나 디스플레이에서도 선명하게 보입니다. 캡처된 이미지는 자동으로 브랜드 프레임(그라데이션 배경, 로고 포함)이 적용되어 제품 발표용 스크린샷으로 제공됩니다. 이 스킬은 동영상이 아닌 정적 이미지+카피 조합에 특화되어 있으며, 사용자는 "기능 스크린샷 찍고 트윗 올려줘"와 같은 자연어 명령으로 실행할 수 있습니다. 스크립트는 개발자 오버레이를 자동으로 숨기고, 사이드바를 접으며, 실제 테마를 그대로 유지하는 등 최적의 결과물을 위한 다양한 기본 설정을 포함하고 있습니다.

지원 대상✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/vvedantb/eva/tree/HEAD/.claude/skills/eva-feature-screenshot
원본 보기→모든 스킬 둘러보기

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

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

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

문서

Eva 기능 스크린샷

배송된 기능 하나의 스크린샷 + 트윗 하나. Remotion, 음악, 편집, 이미지에 캡션이 들어가지 않습니다. 제품 UI 자체가 자산입니다.

두 개의 파일이 저장소 루트의 screenshots/ 디렉토리에 생성됩니다(이미 .gitignore에 포함됨):

파일설명
<YYYY-MM-DD>-<slug>.png원본 2560×1440 샷 — 보관하세요. 재촬영이 필요 없는 소스입니다.
<YYYY-MM-DD>-<slug>-framed.png이것을 게시하세요 — 3200×1800, 브랜드 프레임 포함

프레임이 적용된 버전은 원본 샷을 Eva의 브랜드 그라데이션 배경 위에 둥근 모서리로 배치하고, 상단에 Eva 아이콘과 "Eva" 워드마크를 추가합니다. 따라서 이 스크린샷은 버그 리포트 스크린샷이 아닌 제품 발표처럼 보입니다.

양보할 수 없는 기본값

  1. 1280 레이아웃, 2560×1440(16:9) HD로 캡처. 스크립트는 실제 Chrome을 deviceScaleFactor 2로 구동하고 scale:"device"로 캡처하므로, 앱은 고유 1280 너비로 레이아웃되지만(읽기 쉬운 요소 크기) PNG의 픽셀 밀도는 두 배입니다 — 레티나 타임라인에서 선명합니다. 16:9는 X가 타임라인에서 자르지 않고 표시하는 비율입니다. 프레임이 적용된 출력물도 3200×1800으로 역시 16:9이므로, 프레임은 타임라인에서 아무런 비용이 들지 않습니다. agent-browser로는 이 작업을 할 수 없습니다: screenshot이 CSS 픽셀로 캡처하고 DPR을 무시하기 때문에 항상 1280×720을 출력합니다. HD 스크립트를 사용하세요.

  2. 절대 전체 페이지를 캡처하지 않음. 밀도가 높은 앱의 전체 페이지 샷은 타임라인에서 썸네일 크기로 렌더링되는 긴 스트립이 됩니다. 하나의 뷰포트, 하나의 아이디어.

  3. 촬영 전에 개발자 오버레이를 숨깁니다. react-scan과 agentation 모두 페이지에 렌더링됩니다. scripts/hd-shot.mjs가 처리합니다 — 수동 체인 대신 스크립트를 사용하세요.

  4. 앱의 실제 테마와 일치시킵니다. 사용자가 실행 중인 것(set media dark for dark)을 따르세요. 사진을 위해 앱의 스타일을 변경하지 마세요.

  5. 기능이 시각적 주제여야 합니다. 복잡한 페이지 모서리에 있는 200px 패널은 실패합니다. 기능이 지배적인 뷰로 이동하거나, 기능을 포함하는 표면(모달, 시트, 세부 정보 창)을 열어 타임라인 크기에서 읽힐 수 있도록 하세요.

    사이드바는 자동으로 접힙니다. shot.sh (그리고 일반 hd-shot.mjs --path 샷)은 캡처 전에 내비게이션 레일을 접습니다 — 1280px 프레임에서 약 250px을 차지하며 그 안에는 기능이 전혀 없기 때문입니다. 사이드바 자체가 기능인 경우에만 --no-collapse를 전달하세요. --recipe에서는 ctx.collapseSidebar(page)를 직접 호출하세요(레시피는 자체 스테이징을 담당합니다).

    표면이 숨길 수 있는 방법을 제공하는 경우 모든 보조 목록 레일(리뷰 목록, 설정 탐색)에도 동일한 규칙이 적용됩니다. 원본 PNG에서 확인하세요: 관련 없는 탐색 항목 열이 남아 있으면 다시 촬영하세요.

  6. 프레임을 적용하되, 주석을 달지 마세요. 항상 6단계를 실행하세요 — 그라데이션 + 워드마크가 하우스 스타일입니다. 요청이 없으면 화살표, 빨간 원, 설명 텍스트, 가짜 브라우저 크롬을 절대 추가하지 마세요.

  7. 절대 제출하지 마세요. 입력만 하세요. 입력 필드를 채우고, 선택기를 열고, 상태를 준비한 다음 촬영하세요. 작성기에서 Enter를 누르지 말고, 보내기 화살표, 만들기, 저장, 실행 또는 시작을 누르지 말고, 더 나은 샷을 위해서라도 실제 세션이나 에이전트 실행을 절대 시작하지 마세요. 제출하면 사용자의 실제 작업 공간이 변경되고 실제 컴퓨팅 리소스가 소모됩니다. 준비된 상태가 사진을 찍는 대상입니다. Enter는 필드 자체에만 적용되고 다른 작업이 수행되지 않는 경우에만 허용됩니다(열린 선택기에서 @-멘션 수락 등) — 이것만 수행하는지 확실하지 않은 경우 대신 선택기 행을 클릭하세요.

  8. 데이터가 보기 흉하면 데이터를 수정하세요 — 다시 촬영하지 마세요. 기본값 7은 상태를 생성하기 위해 앱을 구동하는 것을 막지만, 상태를 작성하는 것은 막지 않습니다. 실제 개발 데이터가 샷을 망치는 일반적인 이유입니다: 오류 벽("Failed to stop sandbox" ×8), Untitled session 행, 마이그레이션이 절반만 완료된 턴, 기능에 세 개가 필요한 하나의 저장소 등. 보기 좋은 세션을 찾기 위해 헤매는 것보다, 샷 주변의 앱 자체 개발 데이터를 편집하는 것이 낫고, 앱의 스타일을 변경하는 것보다 낫습니다(기본값 4는 여전히 유효 — CSS가 아닌 데이터만 변경).

    개발 배포에 직접 작성하세요: npx convex run으로 실행하는 일회용 internal/screenshotStaging.ts 변이, 또는 Convex 대시보드. 세션에 실제 읽을 수 있는 제목을 부여하고, 프레임 내의 오류/시스템 메시지를 삭제하고, 기능에 필요한 두 번째와 세 번째 행을 시드하세요.

    이에 대한 규칙:

    • 개발 배포 전용. 쓰기 전에 대상을 확인하고(npx convex env get CONVEX_URL 또는 .env.local 읽기) 스테이징 변이를 프로덕션으로 향하지 마세요.
    • 먼저 추가적이고 되돌릴 수 있게. 실제 기록을 삭제하는 것보다 제목을 패치하거나 데모 행을 삽입하는 것을 선호하세요. 삭제해야 한다면 먼저 행을 살펴보고 무엇을 제거했는지 말하세요.
    • 구체적으로 조작된 것이 아니라 그럴듯하게. 실제 작업처럼 읽히는 제목과 프롬프트. 트윗이 사실로 반복하는 지표, 고객 이름 또는 숫자를 절대 조작하지 마세요.
    • 샷이 완료되면 스테이징 변이를 삭제하세요 — 모든 마이그레이션과 동일한 정리 규칙.
    • 무엇을 변경했는지 사용자에게 전달하세요.

  9. 기밀성. 사용자 자신의 저장소 vvedantb/eva를 사용하세요. 클라이언트 저장소(evalucom/carepulse, eprocurement)나 이를 나열하는 "Codebases" 홈 화면은 절대 사용하지 마세요. 프레임 내의 문서/작업/세션 목록에서 클라이언트 이름이 지정된 항목을 확인하세요 — 목록이 더럽다면 깨끗한 데모 행을 준비하세요. 화면의 이름이나 이메일에 대한 개인 데이터 우려를 절대 제기하지 마세요 — 설정 → 실험에는 모든 [data-pii] 요소를 흐리게 처리하는 blur-PID 토글이 있으므로, 이는 제품에서 처리됩니다. 환경 변수 이름이나 프로젝트 ID를 유출하는 오류 패널을 발견하면 알리세요.

워크플로우

  1. 배송된 기능을 파악하세요. 사용자가 어떤 기능인지 말하지 않았다면 질문하세요 — 설문조사가 아닌 한 가지 질문으로. git log --oneline -15, git diff --stat, 또는 internal/changelog/(가장 최근 월 파일)이 일반적으로 이름을 알려줍니다. 기능과 이를 보여주는 URL이 필요합니다.

  2. 앱을 시작하세요. 개발 서버만 실행하면 됩니다 — HD 스크립트가 자체 Chrome을 실행하고 /?agent=true로 에이전트 사용자로 로그인하며, deviceScaleFactor 2의 새로운 컨텍스트에서 실행됩니다. agent-browser로 촬영하지 마세요.

    pnpm dev   # 저장소 루트에서 → localhost:5173

  3. 촬영하세요. 일반 URL 샷의 경우 shot.sh가 이동, 사이드바 접기, 오버레이 숨기기, 2560×1440으로 캡처를 수행합니다:

    bash .claude/skills/eva-feature-screenshot/scripts/shot.sh /vvedantb/eva/web/sessions sessions

    URL 경로 + 슬러그(+ 선택적 settle ms, + 선택적 --no-collapse)를 받습니다.

    준비된 샷(메뉴 열기, 프롬프트 입력 후 캡처)의 경우 레시피를 작성하세요 — export async function stage(page, ctx)를 내보내는 .mjs 파일을 작성하고 hd-shot.mjs에 전달하세요. 레시피는 탐색, 사이드바 접기, 준비를 담당합니다. ctx는 { BASE, hideOverlays, collapseSidebar, settle }를 제공합니다. page.getByRole(...) (Playwright) 로케이터를 사용하세요. 정확한 접근 가능한 이름을 찾으려면 먼저 agent-browser를 대화식으로 구동하고 snapshot -i / read_page를 사용하세요.

    // recipe.mjs — 모드 선택기를 열고 프롬프트를 입력한 상태로 준비
export async function stage(page, ctx) {
  await page.goto(`${ctx.BASE}/vvedantb/eva/web/sessions`, {
    waitUntil: "networkidle",
  });
  await ctx.settle(3000);
  await ctx.collapseSidebar(page);
  await page.getByRole("textbox", { name: /Ask Eva/ }).click();
  await page.keyboard.type("Redesign the sessions sidebar…");
  await page.getByRole("button", { name: "Edit", exact: true }).click();
  await ctx.settle(600);
}

    node .claude/skills/eva-feature-screenshot/scripts/hd-shot.mjs --slug session-modes --recipe /abs/path/recipe.mjs

    깔끔하고 읽기 쉬운 입력을 준비하세요 — 정리된 데모 제목이 실제 지저분한 것보다 낫습니다. 절대 제출하지 마세요(기본값 7).

  4. PNG를 다시 읽고 평가하세요. 이 단계에서 잘못된 샷이 걸러집니다:

    • 기능이 명확한 주제인가요, 아니면 크롬에 묻혔나요?
    • 오버레이나 툴바가 살아남았나요? 스켈레톤, 스피너, 또는 — 플레이스홀더가 여전히 화면에 있나요? (settle ms를 높이고 다시 촬영하세요.)
    • 네 모서리 모두: 잘린 레이블, 반만 렌더링된 버튼, 잘린 열이 있나요?
    • 기밀 정보가 기본값 9에 위배되나요?
    • 빈 상태: "칸반 작업"을 증명하는 빈 보드는 나쁜 샷입니다. 데이터를 채우거나 다른 뷰를 선택하세요.

    프레임이 데이터 때문에 실패할 때 — 오류 벽, Untitled session, 기능에 세 개의 행이 필요한 하나의 행 등 — 더 운 좋은 화면을 찾기보다 개발 데이터를 준비하세요(기본값 8).

  5. 프레임을 적용하세요.

    bash .claude/skills/eva-feature-screenshot/scripts/frame.sh <slug> "Eva"

    screenshots/<오늘날짜>-<slug>-framed.png (3200×1800)을 생성합니다. templates/frame.html을 deviceScaleFactor 2의 자체 Chrome을 통해 렌더링합니다 — 샷과는 별도의 브라우저이므로 이후에 복원할 필요가 없습니다. 프레임이 적용된 PNG도 다시 확인하세요 — 그라데이션이 모서리에서 UI를 씻어내리지 않았는지, 워드마크가 잘리지 않았는지 확인하세요. 세 번째 인수는 다른 경로에서 원본 PNG에 프레임을 적용합니다. templates/frame.html이 이 스킬의 브랜드 색상이 있는 유일한 위치입니다.

  6. 트윗을 작성하세요. eva-tweet 스킬을 호출하세요 — 훅, 선택적 포지셔닝 프래그먼트, → 기능 목록, 선택적 종결. 스크린샷이 증거를 제공하므로, 트윗은 그림을 설명하는 것이 아니라 무엇이 존재하는지 명시합니다. 이미지를 절대 언급하지 마세요.

  7. 인계하세요. 프레임이 적용된 파일 경로를 마크다운 링크로, 트윗을 펜스 블록 안에, 그리고 게시 전에 사용자가 확인해야 할 프레임 내의 모든 것을 함께 제공하세요.

빠른 참조

필요 사항명령어
URL 샷 (HD)bash .claude/skills/eva-feature-screenshot/scripts/shot.sh <path> <slug> [settle-ms]
사이드바를 프레임에 유지bash .claude/skills/eva-feature-screenshot/scripts/shot.sh <path> <slug> <settle-ms> --no-collapse
준비된 샷 (메뉴/입력)node .claude/skills/eva-feature-screenshot/scripts/hd-shot.mjs --slug <slug> --recipe <abs.mjs>
프레임 적용 (게시할 것)bash .claude/skills/eva-feature-screenshot/scripts/frame.sh <slug> [title] [raw-png]
접근 가능한 이름 찾기agent-browser를 대화식으로 구동한 후 agent-browser snapshot -i
빈/깨진 페이지 디버깅agent-browser console · agent-browser errors

주의사항

  • HD는 Playwright에 있으며, agent-browser에 없습니다. agent-browser의 screenshot은 CSS 픽셀로 캡처하고 devicePixelRatio를 무시하므로 1280×720으로 제한됩니다. hd-shot.mjs / hd-frame.mjs는 전역 agent-browser 설치에 번들된 playwright-core를 사용합니다. 다른 위치에 있으면 PW_CORE를 설정하세요. 둘 다 channel:"chrome"을 실행하므로 시스템에 Chrome이 설치되어 있어야 합니다.
  • 스크립트는 자체 로그인을 /?agent=true(불리언, /?agent는 zod SearchParamError 발생)에서 새로운 브라우저 컨텍스트로 수행합니다. 촬영에 agent-browser 세션이 필요하지 않습니다.
  • 개발자 오버레이는 세 개의 노드이며, 모두 <html>에 매달려 있고 <body>에 있지 않습니다. #react-scan-root만 숨기는 것으로는 충분하지 않습니다: react-scan은 컴포넌트 윤곽선과 레이블을 id나 클래스가 없는 기본 html > canvas에 그리고, 그것이 샷을 망치는 것입니다. hd-shot.mjs는 인라인 display:none !important로 세 개 모두(#react-scan-root, html > canvas, [data-agentation-root])를 제거합니다. 스타일시트는 그들의 인라인 스타일에 지기 때문입니다.
  • 준비된 샷은 탐색에 사용한 브라우저가 아닌, 새로운 브라우저입니다. agent-browser를 사용하여 선택자를 찾지만, 레시피는 Playwright 자체 컨텍스트에서 처음부터 다시 탐색하고 준비합니다 — 모든 단계를 레시피에 넣으세요. CSS보다 page.getByRole(...)을 선호하세요. @e1과 같은 참조는 여기에 존재하지 않습니다.
  • 두 개 이상의 이미지는 요점을 희석시킵니다. X는 이미지 하나를 전체 너비로 렌더링하고, 두 번째는 둘 다 절반으로 줄입니다. 진정한 전후 비교를 위해서만 하나 이상을 촬영하세요.
  • video/public/captures/를 재사용하지 마세요 — 이는 다른 작업을 위해 프레임이 적용된 Remotion 자산입니다.

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

vvedantb/eva

>- Produce polished, mobile-friendly product demo videos of the eva app with Remotion — 1280×720, snappy beat-synced hard cuts, lo-fi music that swells on every cut, and footage captured from the REAL running app via agent-browser (no mockups). Use this whenever the user wants to make, update, re-cut, re-score, re-capture, or re-render an eva demo/product/launch/Twitter video or screen-recording walkthrough, or mentions the `video/` Remotion project — even if they don't say "Remotion". It encodes hard-won defaults (resolution, zoom/framing, theme, pacing, music sync, rendering, QA) so you don't repeat past mistakes.

관련 스킬

steipete/video-frames

Extract frames or short clips from videos using ffmpeg.

community

steipete/summarize

Summarize or transcribe URLs, YouTube/videos, podcasts, articles, transcripts, PDFs, and local files.

community

openclaw/openclaw

Use when testing, fixing, or extending the OpenClaw Control UI GUI with Vitest + Playwright end-to-end checks, mocked Gateway WebSocket flows, mocked dashboard runs, screenshots/videos, or agent-verifiable browser proof.

community

obra/superpowers

Obra superpowers agent skills.

community

affaan-m/ECC

See, Understand, Act on video and audio. See- ingest from local files, URLs, RTSP/live feeds, or live record desktop; return realtime context and playable stream links. Understand- extract frames, build visual/semantic/temporal indexes, and search moments with timestamps and auto-clips. Act- transcode and normalize (codec, fps, resolution, aspect ratio), perform timeline edits (subtitles, text/image overlays, branding, audio overlays, dubbing, translation), generate media assets (image, audio...

community

affaan-m/everything-claude-code

End-to-end marketing campaign planning and execution. Covers audience research, positioning, campaign angle definition, landing page copy, email sequences, social posts, ad copy, short-form video scripts, and content calendars. Use as the orchestration layer for multi-channel product launches. Use when planning or executing a multi-channel product launch, or producing landing page, email, social, or ad copy.

community