Communitygithub.com

plugin87/governance

디자인 시스템의 진화를 관리합니다 — 토큰/컴포넌트에 대한 SemVer, 기여 워크플로, 지원 중단 정책, 변경 사항 전달. 사용자가 컴포넌트나 토큰을 추가/승격/지원 중단하거나, 버전 범위를 결정하거나, 기여 프로세스를 설정하거나, 시스템이 분열되는 것을 방지하려는 경우에 사용하세요.

governance란 무엇인가요?

이 스킬은 디자인 시스템이 일관성을 유지하며 성장할 수 있도록 거버넌스 프레임워크를 제공합니다. SemVer(유의적 버전 관리)를 기반으로 변경 사항을 major(파괴적 변경), minor(추가적 변경), patch(수정)로 분류하고, 각 변경 유형에 맞는 승격 프로세스나 지원 중단 정책을 안내합니다. Claude Code, Cursor, Codex와 같은 AI 에이전트 플랫폼에서 사용할 수 있으며, `workflows/governance.md` 문서를 참조하여 토큰이나 컴포넌트의 추가, 승격, 지원 중단, 제거 과정을 자동화합니다. 또한 `CLAUDE.md`에 파일 참조 맵과 체인지로그를 업데이트하고, 스크립트 검증을 통해 변경 사항의 품질을 보장합니다.

지원 대상✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/plugin87/ux-ui-agent-skills/tree/main/.claude/skills/governance

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

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

문서

스킬: 거버넌스 (Governance)

시스템이 성장함에 따라 일관성을 유지하세요. 버전 관리, 기여, 지원 중단 규칙을 적용합니다.

단계

  1. workflows/governance.md를 읽습니다(SemVer 테이블, 기여 워크플로, 지원 중단 정책, 변경 전달).
  2. 변경 사항을 분류합니다: major(파괴적 — 토큰이나 프로퍼티명 변경/제거, 구조/기본값 변경), minor(추가적 — 새 토큰/컴포넌트/변형/옵셔널 프로퍼티), patch(수정 — 대비/버그/문서/허용 범위 내 값 조정).
  3. 새로운 컴포넌트/토큰: 실제 반복적인 필요(≥ 2곳)를 충족하는지 확인한 후 product → candidate → core로 승격합니다. 전체 품질 기준(.claude/rules/components.md → Component Quality Bar)에 맞게 설계합니다.
  4. 지원 중단: 이유 + 대체 항목 + 제거 버전을 표시; 최소 1 minor 사이클 동안 작동 유지; 마이그레이션 맵(design-systems/crosswalk.md 스타일) 제공; major에서만 제거합니다.
  5. 새 파일을 CLAUDE.md(파일 참조 맵 + 관련 테이블/라우터)에 연결하고 체인지로그 항목을 추가합니다.

검증 (완료 정의)

  • 변경 사항에 SemVer 레벨 및 체인지로그 항목이 있습니다.
  • 제거 사항에 지원 중단 기간, 대체 항목, 마이그레이션 테이블이 있습니다.
  • 새 스펙이 8-상태 + 접근성 + 토큰 매핑 기준을 충족하고 라우터를 통해 접근 가능합니다.
  • python3 scripts/validate_tokens.py가 통과하며, 색상이 변경된 경우 대비를 재확인합니다.

Individual skills in this repo

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

plugin87/design-tokens

Generate, extend, or audit design tokens in DTCG format with the 3-tier architecture (primitive → semantic → component). Use when the user wants a color palette, type scale, spacing/shadow/radius/motion tokens, multi-brand theming, or wants to validate token files. Covers colors, typography, spacing, shadows, borders, breakpoints, motion, gradients, opacity, blur, sizing, states, theming.

plugin87/image-to-code

Turn a reference image, screenshot, or mockup into token-driven, accessible code — infer the design system from the reference (palette, type scale, spacing, radius, layout archetype), map it to the 3-tier tokens, rebuild it, then verify with the kit's gates. Use when the user provides a design/screenshot and wants matching UI code.

plugin87/performance

Optimize UI performance against Core Web Vitals — LCP, INP, CLS — with loading/code-split strategy, layout-shift prevention, and animation performance rules. Use when the user wants to improve speed, fix jank or layout shift, hit Web Vitals budgets, or make a UI feel fast on low-end devices.

plugin87/prototype

Move an idea up the fidelity ladder (content-first → wireframe → low-fi → high-fi → code) with a validation plan at each level, plus user-journey mapping and usability-testing scripts. Use when the user wants to prototype, wireframe, map a user flow, or plan/run usability testing.

plugin87/redesign

Upgrade an existing website or app to premium quality without breaking functionality — audit the current design, identify generic/AI tells, then apply taste and system rules surgically. Use when the user wants to improve, modernize, polish, or "make better" an existing UI/codebase.

plugin87/token-build

Set up or run the token build pipeline — transform the DTCG tokens/*.json (source of truth) into platform artifacts (CSS variables, Tailwind @theme, JS/TS, iOS Asset Catalog, Android, Compose) with Style Dictionary / Tokens Studio / W3C DTCG export. Use when the user wants to generate platform theme files from tokens, wire token CI, or multi-platform token output.

plugin87/ux-writing

Write or review UI copy — buttons, errors, empty states, microcopy, notifications, labels — using the voice & tone system (clear, concise, useful, human, honest) with the what→why→how error formula and inclusive-language rules. Use when the user needs interface copy, error messages, empty-state text, or a copy review.

관련 스킬