무료GitHub에 공개

mk-ui-design-system

Design UI components/design systems, review visual design, check accessibility. Triggers: design system, color palette, font pairing, WCAG check. Data-driven: palettes, fonts, UX guidelines.

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

ngocsangyem/MeowKit

설치 방법 보기

포함된 파일(10)

SKILL.md3.0 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/packages/mewkit/src/migrate/modules/codex/root/.agents/skills/mk-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는 내용의 안전성을 보증하지 않습니다. 설치하기 전에 내용을 확인하세요.