before-and-after은(는) 무엇을 하나요?
웹 페이지 또는 요소의 이전/이후 스크린샷을 캡처하여 시각적 비교를 수행합니다. 사용자가 "이전과 이후 촬영", "스크린샷 비교", "시각적 차이", "PR 스크린샷", "이전과 새로움 비교"를 요청하거나 UI 변경 사항을 문서화해야 할 때 사용합니다. 두 개의 URL (file://, http://, https://) 또는 두 개의 이미지 경로를 허용합니다.
웹 페이지 또는 요소의 이전/이후 스크린샷을 캡처하여 시각적 비교를 수행합니다. 사용자가 "이전과 이후 촬영", "스크린샷 비교", "시각적 차이", "PR 스크린샷", "이전과 새로움 비교"를 요청하거나 UI 변경 사항을 문서화해야 할 때 사용합니다. 두 개의 URL (file://, http://, https://) 또는 두 개의 이미지 경로를 허용합니다.
이 기능은 웹 페이지 또는 특정 요소의 이전/이후 상태에 대한 스크린샷을 캡처하여 시각적 비교를 쉽게 수행할 수 있도록 해주는 AI 에이전트 기술입니다. 개발자가 UI 변경 사항을 문서화하거나, 코드 리뷰 시 시각적 차이점을 강조하거나, A/B 테스트 결과를 시각적으로 비교해야 할 때 매우 유용합니다. Vercel, Cursor, Codex와 같은 플랫폼에서 사용할 수 있으며, 두 개의 URL(로컬 파일, HTTP, HTTPS) 또는 두 개의 이미지 경로를 입력으로 받아들입니다. 사용자가 'before and after', 'screenshot comparison', 'visual diff' 등의 명령을 내릴 때 작동하며, SKILL.md 문서에 따라 정확히 동작합니다.
npx skills add https://github.com/vercel-labs/before-and-after/tree/main/skills/before-and-afterInstalled? Explore more 이미지 skills: steipete/songsee, affaan-m/frontend-design, mattpocock/improve-codebase-architecture · View all 6 →
웹 페이지 또는 요소의 이전/이후 스크린샷을 캡처하여 시각적 비교를 수행합니다. 사용자가 "이전과 이후 촬영", "스크린샷 비교", "시각적 차이", "PR 스크린샷", "이전과 새로움 비교"를 요청하거나 UI 변경 사항을 문서화해야 할 때 사용합니다. 두 개의 URL (file://, http://, https://) 또는 두 개의 이미지 경로를 허용합니다.
Generate spectrograms and feature-panel visualizations from audio with the songsee CLI.
Create distinctive, production-grade frontend interfaces with high design quality. Use when the user asks to build web components, pages, or applications and the visual direction matters as much as the code quality.
Scan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.
Add documentation for a new AI provider — usage docs, env vars, Docker config, image resources.
Tests in real browsers via Chrome DevTools MCP. Use when building or debugging anything that runs in a browser. Use when you need to inspect the DOM, capture console errors, analyze network requests, profile performance, or verify visual output with real runtime data. Requires the chrome-devtools MCP server to be configured.
This skill should be used when the user wants to visualize data. It intelligently selects the most suitable chart type from 26 available options, extracts parameters based on detailed specifications, and generates a chart image using a JavaScript script.