← 도구 생태계 디자인 · AI 워크플로

beautify-github-readme

저장소 README를 그 프로젝트다운 한 장으로 다시 짜주는 에이전트 스킬. 시각은 SVG, 내용은 마크다운으로 층을 나눠서, 페이지 전체를 이미지로 굽지 않고도 디자인된 첫 화면을 만듭니다. 전체 개편·에셋만 제작·읽기 전용 감사 세 모드로 나뉘어 있고 커밋·푸시는 승인 없이는 하지 않습니다.

oil-oil MIT · 오픈소스 에이전트 스킬 (Claude Code·Codex 등) ★ 1.5k ⭐ 별 주기
디자인AI 워크플로

🔍 에디터 리뷰

cmore가 저장소를 직접 열어보고 써본 뒤 남긴 사용기입니다. 광고·협찬이 아닙니다. 검증일: 2026-07-26 기준의 기록이며, 도구는 계속 바뀝니다.

우리 저장소 두 개(lazy-starter-kit, fixen)에 실제로 돌려봤습니다. 설치는 npx skills add 한 줄이고 .agents/skills/ 아래에 풀리면서 Claude Code용 심링크까지 걸립니다. 값어치는 예쁜 템플릿이 아니라 규칙에 있어요. 히어로는 배너가 아니라 프로젝트의 진짜 재료(실제 출력·실측·다이어그램)를 실어야 하고, viewBox 1200 기준으로 필수 텍스트는 20단위 이상, 900px 렌더와 360px 모바일에서 읽히는지 확인하라고 못을 박습니다. 그 기준으로 다시 보니 우리 배너 두 개가 다 문제였습니다. fixen 배너는 핑크·블루 방사형 글로우에 그림자를 얹은 전형적인 AI 슬롭이었고(우리가 lab/ai-slop에서 직접 정리한 그 클리셰), lazy-starter-kit 배너는 2400px 래스터인데 정작 설치 명령어가 오른쪽에서 잘려 있었어요. 동봉된 audit_readme.py는 우리 README에서 빈 alt 6개와 아이콘 SVG의 title 누락 3개를 바로 잡아냈습니다. 다시 만든 히어로는 fixen은 채팅 답변 끝에 붙는 교정 한 줄(이 도구의 시그니처)을, lazy-starter-kit은 커밋마다 6개 플랫폼에서 설치→검증→제거를 돌리는 CI 실측을 첫 화면에 올렸습니다.솔직히: 이 스킬은 디자인을 대신 그려주지 않습니다. SVG는 에이전트가 좌표까지 직접 손으로 짜는 거라 결과 품질은 결국 모델과 사람 눈에 달려 있고, 감사 스크립트도 이미지 참조·alt·title 정도만 볼 뿐 카피와 정보 순서는 못 봅니다. GIF 모션 경로는 Pillow에 rsvg-convert·ffmpeg까지 따로 깔아야 하고, 우리 경우 npm 패키지 페이지는 SVG를 안 띄워서 PNG 렌더본을 같이 두는 우회가 필요했습니다.

설치하기

아직 개발환경(터미널·Git·Node 등)이 없다면 lazy-starter-kit으로 먼저 준비하고 오세요.

스킬만 설치하는 물건이라 별도 실행 파일이 없습니다. 에이전트에게 '이 저장소를 beautify-github-readme로 손봐줘'라고 시키는 방식이고, 범위(전체 README / 에셋만 / 감사만)를 먼저 말해주면 왕복이 줄어듭니다. GIF 생성만 python3 Pillow + rsvg-convert + ffmpeg가 필요합니다.

터미널에서
npx skills add oil-oil/beautify-github-readme
에이전트에게 (설치 없이)
Install this Skill: https://github.com/oil-oil/beautify-github-readme
beautify-github-readme은(는) cmore.dev와 무관한 외부 프로젝트입니다. 소개와 리뷰는 "이런 게 있어요" 안내이지 보증이 아니며, 설치·사용에 대한 판단과 책임은 사용자에게 있습니다.