Community이미지github.com

kubai087/kubai-icons

생성된 기능 아이콘 세트. 호버 시 변형되는 동적 버전(SVG + JS)과 정적 SVG 파일을 제공합니다. Lumno 북마크 폴더 아이콘의 구조(뒷판, 내용, 앞판 레이어, 외곽선, 단일 주색 기반 색상 구성, 두 개의 키프레임 애니메이션, 색상 팔레트 전환)를 따릅니다. 아이콘, 기능 아이콘, 동적 아이콘, 정적 SVG 아이콘, 아이콘 세트, hover 효과가 있는 아이콘을 만들거나 기존 세트에 새 아이콘을 추가할 때 사용합니다.

kubai-icons란 무엇인가요?

Kubai Icons는 웹 및 애플리케이션 UI에서 사용할 수 있는 기능 아이콘 세트를 생성, 관리, 배포하기 위한 종합적인 도구입니다. 이 스킬은 아이콘 디자인 및 렌더링 엔진(engine.js), 다양한 예제 아이콘(icons.js), 데모 페이지(app.js, index.html), 자동 검사 스크립트(check.mjs), 정적 SVG 내보내기 스크립트(export.mjs)를 포함한 완전한 구현체를 제공합니다. 핵심 설계 원칙은 프로젝트 루트의 PROMPT.md에 명확히 정의되어 있으며, 디자인 규칙(외곽선, 두 가지 상태 키프레임 애니메이션, 팔레트 기반 색상 등)을 강제합니다. 사용자는 동적(SVG + JS, hover 시 형태 변형) 또는 정적(독립 실행형 .svg, 애니메이션 없음) 아이콘을 생성하도록 선택할 수 있습니다. 이 워크플로우는 신규 세트 생성, 기존 세트 확장, 'kubai-icons' 오픈소스 저장소에 기여 등 다양한 시나리오를 지원합니다. 자동 검사 도구는 아이콘이 모든 규칙을 준수하는지 확인하며(정적 및 호버 상태에 대한 시각적 스크린샷 포함), 다양한 크기(24px, 28px), 모든 색상 팔레트, 다중 키프레임 프레임에서 아이콘을 검증합니다. 정적 내보내기는 색상 팔레트 선택, 사용자 정의 강조 색상, 상태(정적/호버), 패딩 및 크기를 지원합니다. 이 스킬은 Claude Code, Cursor, Codex와 같은 AI 에이전트용으로 설계되었으며, Node 18+, Chrome(무인 모드), 일관된 디자인을 위한 PROMPT.md 규칙 엄격 준수가 필요합니다.

지원 대상✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/kubai087/kubai-icons/tree/HEAD

Installed? Explore more 이미지 skills: steipete/songsee, affaan-m/frontend-design, mattpocock/improve-codebase-architecture · View all 6 →

원본 보기→모든 스킬 둘러보기

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

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

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

문서

Kubai Icons

이 스킬은 완전한 구현체(엔진, 예제 아이콘 세트, 데모 페이지, 자동 검사 스크립트, 정적 내보내기 스크립트)를 제공합니다. 사용자의 역할은 규칙에 따라 새 아이콘을 작성하는 것이지 엔진을 재작성하는 것이 아닙니다.

포함된 내용

  • PROMPT.md: 모든 디자인 규칙. 각 항목은 필수 요구사항입니다. 작업을 시작하기 전에 전체를 반드시 읽어야 합니다.
  • src/engine.js: 엔진. 색상 추론, 외곽선 마스크, 그라데이션이 있는 두께, 그림자 및 내부 발광 필터, 보간 애니메이션, 색상 팔레트를 포함합니다. 그대로 재사용하고 수정하지 마십시오.
  • src/icons.js: 예제 아이콘. 새 아이콘은 동일한 형식으로 추가합니다.
  • src/app.js, index.html: 데모 페이지. ORDER가 표시할 아이콘과 순서를 결정합니다.
  • scripts/check.mjs: 자동 검사 스크립트. 무인 Chrome에서 정적, 호버, 호버 중간 프레임, 24px, 28px, 모든 팔레트의 스크린샷을 캡처하고 각 페이지의 스크립트 오류를 읽습니다. 임시 파일은 출력 디렉토리에 저장되며 실행 후 자동으로 정리됩니다.
  • scripts/export.mjs: 정적 내보내기. 아이콘을 스크립트 및 스타일시트에 의존하지 않는 독립 실행형 SVG 파일로 렌더링합니다. 팔레트, 강조 색상, 정적 또는 호버 상태를 지정할 수 있습니다.

워크플로우

  1. PROMPT.md를 읽습니다.

  2. 전달 형식을 결정합니다. 사용자가 명확히 말하지 않은 경우 먼저 질문합니다:

    • 동적(기본값): SVG + JS, 호버 시 형태 변형, src/engine.js가 페이지에서 실행됩니다. 웹페이지 및 JS를 실행할 수 있는 인터페이스에 적합합니다.
    • 정적: 독립 실행형 .svg 파일, 애니메이션 없음, 디자인 도구, 네이티브 앱, 문서, <img> 등 어디서나 사용할 수 있습니다. 사용자가 "이미지 추출", "SVG 파일", "Figma에 넣기", "앱에서 사용" 등을 언급하면 정적을 의미합니다.
    • 둘 다: 동적으로 만든 후 마지막에 정적 버전을 내보냅니다.

  3. 작업 위치를 결정합니다:

    • 새 세트 생성: 이 스킬의 index.html, src/, scripts/를 대상 위치(새 디렉토리 또는 저장소)에 복사하고 해당 복사본에서 작업합니다. 각 파일 시작 부분의 저작권 표시를 유지합니다. PROMPT.md와 SKILL.md는 스킬에만 남기고 복사하지 마십시오(LICENSE 3조 참조).
    • 기존 세트에 추가: 해당 src/icons.js에 직접 추가합니다.
    • kubai-icons 저장소의 오픈소스 아이콘 라이브러리에 기여: 각 아이콘은 icons/ 아래에 별도 파일로 저장합니다. 형식, 이름, 뱃지는 docs/authoring.md를 참조하고, 자동 검사는 node tools/check.mjs --only 이름 --with folder,mail,download를 사용합니다. 규칙은 여전히 PROMPT.md를 따릅니다.
    • 정적만 필요한 경우: 작업 디렉토리에 복사하여 아이콘을 그리고, 최종적으로 내보낸 SVG만 사용자에게 전달합니다.

  4. 제품 코드를 읽고 기능을 나열합니다. 동적 버전의 경우 각 기능에 대해 "객체 + 호버 동작" 한 문장으로 작성합니다. 정적 버전의 경우 객체만 결정하면 됩니다(PROMPT.md 섹션 1).

  5. 각 아이콘을 작성하기 전에 src/icons.js에서 구조가 가장 유사한 예제를 하나 또는 두 개 찾아 읽고(예: 열리는 것은 편지와 달력, 앞판이 잘리는 것은 다운로드와 업로드, 회전하는 것은 기어와 별표), 그들의 작성 방식을 따릅니다.

  6. src/app.js의 ORDER에 이름을 추가합니다. 사용되지 않는 예제는 ORDER에 넣지 않으면 표시되지 않습니다.

  7. 자동 검사를 실행하고 새 아이콘과 몇몇 기존 아이콘을 함께 확인합니다:

    node scripts/check.mjs --only 새아이콘A,새아이콘B --with 폴더,메일,다운로드

    스크린샷은 check-out/에 저장됩니다. PROMPT.md 섹션 10의 체크리스트를 항목별로 확인합니다. 스크립트에서 오류가 발생하면 먼저 오류를 수정합니다. 반복 동작은 frames.png를 확인합니다. 틈새 확인 시 --scale 3을 추가합니다. 밝은 강조 색상의 마크 확인 시 --accent #F59E0B를 추가하고 모든 아이콘을 동일한 강조 색상으로 변경합니다. --only 없이 실행하면 전체 세트를 검사합니다. 정적 버전의 경우 rest.png, size-24.png, size-28.png, palettes.png만 확인하면 충분합니다.

  8. 모든 검사를 통과할 때까지 수정한 후, README에 언급된 아이콘 수와 데모 페이지의 각 중단점 열 수를 업데이트합니다(열 수는 전체 아이콘 수를 나눌 수 있어야 하며, 중단점은 추가/제거 가능).

  9. 정적 버전이 필요한 경우 사용자가 지정한 디렉토리로 내보내고 사용 중인 팔레트를 알려줍니다:

    node scripts/export.mjs --only 새아이콘A,새아이콘B --palette 컬러 --out 대상디렉토리

    --palette는 이름으로 팔레트를 선택합니다(컬러, 블루그레이, 청자켓, 민트, 라벤더, 살구, 블랙). --accent #hex는 모든 아이콘을 하나의 강조 색상으로 변경합니다. --state hover는 호버가 끝난 상태를 내보냅니다. --size는 픽셀 크기를 설정합니다. --pad는 그림자 여백을 추가합니다. 각 아이콘은 이름.svg 파일로 생성됩니다.

환경

  • Node 18 이상 및 Chrome. 브라우저 경로는 환경 변수 CHROME으로 재정의할 수 있습니다.
  • 모든 검사는 무인 모드로 수행되며, 보이는 창을 열거나 사용 중인 브라우저에 영향을 주지 않습니다.

Copyright (c) 2026 Kubai087. Kubai Icons License에 따라 사용 허가됨; LICENSE 참조.

관련 스킬

steipete/songsee

Generate spectrograms and feature-panel visualizations from audio with the songsee CLI.

community

affaan-m/frontend-design

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.

community

mattpocock/improve-codebase-architecture

Scan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.

community

lobehub/add-provider-doc

Add documentation for a new AI provider — usage docs, env vars, Docker config, image resources.

community

addyosmani/browser-testing-with-devtools

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.

community

bytedance/chart-visualization

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.

community
← More 이미지 skills