Communitygithub.com

jakubkrehel/variant

현재 작업 중인 컴포넌트의 여러 변형을 빌드하고, 반복하며 하나를 선택할 수 있도록 도와줍니다.

variant란 무엇인가요?

이 스킬은 개발자가 UI 컴포넌트의 여러 변형(variant)을 동시에 생성하고 반복적으로 개선하며 최종 하나를 선택하는 과정을 지원합니다. 주로 React, Vue, Svelte 등 컴포넌트 기반 프레임워크를 사용하는 프로젝트에서 유용하며, Claude Code, Cursor, Codex와 같은 AI 에이전트 플랫폼에서 동작합니다. SKILL.md에 정의된 대로, 이 스킬은 사용자가 원하는 컴포넌트의 목적과 스타일 방향을 명시하면 여러 디자인 변형을 생성하고, 각 변형에 대한 피드백을 바탕으로 코드를 수정하거나 새로운 변형을 추가합니다. 최종적으로 사용자가 선택한 변형의 코드를 프로젝트에 통합할 수 있도록 도와 개발 속도와 창의성을 향상시킵니다.

지원 대상~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/jakubkrehel/skills/tree/main/skills/variant

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

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

문서

variant은(는) 무엇을 하나요?

현재 작업 중인 컴포넌트의 여러 변형을 빌드하고, 반복하며 하나를 선택할 수 있도록 도와줍니다.

설명

이 스킬을 사용하면 동일한 컴포넌트에 대해 다양한 디자인이나 구현 방식을 탐색할 수 있습니다. 각 변형은 독립적으로 생성되며, 필요에 따라 수정하고 비교할 수 있습니다.

사용법

  1. 작업 중인 컴포넌트의 이름과 목적을 입력하세요.
  2. 원하는 변형의 개수와 각 변형의 방향성을 설명하세요.
  3. 스킬이 여러 변형의 코드를 생성하고 표시합니다.
  4. 각 변형에 대해 피드백을 제공하거나 수정을 요청하세요.
  5. 최종적으로 선택한 변형을 프로젝트에 적용합니다.

예시

  • "Button 컴포넌트의 세 가지 변형을 만들어 주세요: 하나는 둥근 모서리, 하나는 각진 모서리, 하나는 아웃라인 스타일로."
  • "Card 컴포넌트의 라이트 모드와 다크 모드 변형을 각각 두 개씩 생성해 주세요."

지원 플랫폼

  • Claude Code
  • Cursor
  • Codex

참고 사항

  • 코드 품질과 일관성을 유지하기 위해 변형 간에 공통 스타일 가이드를 따릅니다.
  • 변형 코드는 별도로 관리되며, 최종 선택 후 통합됩니다.
  • 피드백 반복 과정에서 기존 변형이 업데이트되거나 새로운 변형이 추가될 수 있습니다.

Individual skills in this repo

This repo contains 7 individual skills — each has its own dedicated page.

관련 스킬