무료GitHub에 공개

mk:ui-design-system

Use when designing UI components, creating design systems, reviewing visual design, or checking accessibility compliance. Triggers on "design system", "UI review", "color palette", "font pairing", "accessibility audit", "responsive design", "WCAG check". Auto-activates when ui-ux-designer agent is working. Data-driven: 160 palettes, 73 font pairings, 161 product types, 98 UX guidelines, 25 chart types.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

ngocsangyem/MeowKit

설치 방법 보기

포함된 파일(10)

SKILL.md3.7 KB
assets/charts.csv18.9 KB
assets/colors.csv31.7 KB
assets/products.csv56.6 KB
assets/typography.csv48.5 KB
assets/ux-guidelines.csv18.3 KB
references/accessibility-standards.md1.8 KB
references/data-lookup.md2.7 KB
references/design-patterns.md2.4 KB
references/quality-checklist.md1.6 KB

SKILL.md(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

UI Design System

Data-driven design intelligence: curated palettes, font pairings, product recommendations, UX guidelines, accessibility standards, and quality checklists.

When to Use

Creating or reviewing UI components
Setting up a design system for a new project
Checking WCAG accessibility compliance
Selecting color palettes, typography, or UI styles
Choosing chart types for data visualization
Responsive design review

Process

Understand requirements — what product type? audience? style direction?
Look up design data — read references/data-lookup.md for how to query:
- Color palette → assets/colors.csv (161 WCAG-verified palettes by product type)
- Font pairing → assets/typography.csv (73 pairings with Google Fonts URLs)
- Product direction → assets/products.csv (161 types with style/dashboard/color recs)
- UX check → assets/ux-guidelines.csv (99 Do/Don't rules with severity)
- Chart type → assets/charts.csv (25 types with accessibility grades)
Apply design rules — load from references/ based on task:
- Visual design → references/design-patterns.md
- Accessibility → references/accessibility-standards.md
- Quality check → references/quality-checklist.md
Validate — run quality-checklist.md before handoff

Data Assets (NEW — v2.0)

File	Rows	Content
`assets/colors.csv`	160	WCAG-verified palettes by product type (hex values)
`assets/typography.csv`	73	Font pairings with mood, Google Fonts URLs, Tailwind config
`assets/products.csv`	161	Product type → style, landing pattern, dashboard, color focus
`assets/ux-guidelines.csv`	98	Do/Don't pairs with category + severity
`assets/charts.csv`	25	Data type → best chart, accessibility grade, library

See references/data-lookup.md for lookup patterns and examples.

Gotchas

Aesthetic over accessibility: beautiful design that fails WCAG → check contrast (4.5:1 normal, 3:1 large) before shipping
Desktop-first design: designing for large screens then cramming into mobile → start from 320px
Color-only communication: red/green for status → pair with icon or text label
Ignoring the data: guessing palette when colors.csv has WCAG-verified values → always look up first
Generic product assumptions: all SaaS looks the same → check products.csv for product-specific recommendations

Workflow Integration

Loaded by ui-ux-designer agent during Phase 3 (Build). Also used by developer agent for frontend work.

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

같은 저장소의 스킬

meowkit-design

무료

Use this skill to generate well-branded interfaces and assets for MeowKit (AI Agent Toolkit for Claude Code), either for production or throwaway prototypes/mocks/etc. Contains essential design guidelines, colors, type, fonts, assets, and UI kit components for prototyping.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

ngocsangyem/MeowKit152026년 7월 28일 업데이트

mk-advise

무료

Turn a raw idea into ONE honest recommendation: interview one question at a time until confirmed, then give a verdict with trade-offs and a checklist. Not for options or debate.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

ngocsangyem/MeowKit152026년 7월 28일 업데이트

mk-agent-browser

무료

Browser automation CLI for agents: navigate, click/fill, screenshot, extract data, test apps, Electron/Slack, cloud browsers. NOT for the user's real Chrome profile/cookies (mk:chrome-profile).

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

ngocsangyem/MeowKit152026년 7월 28일 업데이트

mk-agent-detector

무료

Detects the right agent and complexity tier at Phase 0 orient; runs first in every workflow. NOT for runtime agent routing inside a single skill.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

ngocsangyem/MeowKit152026년 7월 28일 업데이트

mk-angular

무료

Angular v20+ patterns: components, signals, services, forms, routing, HTTP, testing, SSR. Auto-activates on .ts files in Angular projects (angular.json detected).

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

ngocsangyem/MeowKit152026년 7월 28일 업데이트

mk-api-design-principles

무료

Design and review durable REST, GraphQL, RPC, or event API contracts: shape, compatibility, pagination, error semantics. Discovers existing consumers first. Not implementation, schema, or release.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

ngocsangyem/MeowKit152026년 7월 28일 업데이트

ngocsangyem의 스킬 모두 보기

이 스킬의 문제 신고

설치

명령으로 설치

npx skills add https://github.com/ngocsangyem/MeowKit --skill mk:ui-design-system

터미널에 붙여 넣고 실행합니다(Node.js 필요). Claude Code, Codex 등 설치할 에이전트를 고를 수 있습니다.

에이전트에게 부탁하기

다음 Agent Skill을 설치해 주세요.
https://github.com/ngocsangyem/MeowKit/tree/main/.claude/skills/ui-design-system

먼저 SKILL.md와 첨부 파일의 내용을 확인해 수상한 처리(외부 전송, 인증 정보 읽기 등)가 없는지 확인한 뒤 Claude Code는 ~/.claude/skills/mk:ui-design-system/, Codex는 ~/.agents/skills/mk:ui-design-system/ 에 배치해 주세요.

이 문장을 그대로 Claude Code나 Codex에 보내면 내용을 확인한 뒤 설치해 줍니다.

GitHub에서 소스 보기

저장소: ngocsangyem/MeowKit
스타: 15
포크: 2
카테고리: 디자인
라이선스: MIT
원문 언어: 영어
최종 업데이트: 2026년 7월 28일

스킬은 에이전트를 위한 지시와 스크립트의 묶음입니다. cccskills는 내용의 안전성을 보증하지 않습니다. 설치하기 전에 내용을 확인하세요.