npx claudepluginhub jh941213/my-cc-harness --plugin ccppThis skill uses the workspace's default tool permissions.
Comprehensive design guide for web and mobile applications. Contains 50+ styles, 97 color palettes, 57 font pairings, 99 UX guidelines, and 25 chart types across 9 technology stacks. Searchable database with priority-based recommendations.
data/charts.csvdata/colors.csvdata/icons.csvdata/landing.csvdata/products.csvdata/prompts.csvdata/react-performance.csvdata/stacks/flutter.csvdata/stacks/html-tailwind.csvdata/stacks/jetpack-compose.csvdata/stacks/nextjs.csvdata/stacks/nuxt-ui.csvdata/stacks/nuxtjs.csvdata/stacks/react-native.csvdata/stacks/react.csvdata/stacks/shadcn.csvdata/stacks/svelte.csvdata/stacks/swiftui.csvdata/stacks/vue.csvdata/styles.csvCompares coding agents like Claude Code and Aider on custom YAML-defined codebase tasks using git worktrees, measuring pass rate, cost, time, and consistency.
Designs and optimizes AI agent action spaces, tool definitions, observation formats, error recovery, and context for higher task completion rates.
Designs, implements, and audits WCAG 2.2 AA accessible UIs for Web (ARIA/HTML5), iOS (SwiftUI traits), and Android (Compose semantics). Audits code for compliance gaps.
Comprehensive design guide for web and mobile applications. Contains 50+ styles, 97 color palettes, 57 font pairings, 99 UX guidelines, and 25 chart types across 9 technology stacks. Searchable database with priority-based recommendations.
Reference these guidelines when:
| Priority | Category | Impact | Domain |
|---|---|---|---|
| 1 | Accessibility | CRITICAL | ux |
| 2 | Touch & Interaction | CRITICAL | ux |
| 3 | Performance | HIGH | ux |
| 4 | Layout & Responsive | HIGH | ux |
| 5 | Typography & Color | MEDIUM | typography, color |
| 6 | Animation | MEDIUM | ux |
| 7 | Style Selection | MEDIUM | style, product |
| 8 | Charts & Data | LOW | chart |
color-contrast - Minimum 4.5:1 ratio for normal textfocus-states - Visible focus rings on interactive elementsalt-text - Descriptive alt text for meaningful imagesaria-labels - aria-label for icon-only buttonskeyboard-nav - Tab order matches visual orderform-labels - Use label with for attributetouch-target-size - Minimum 44x44px touch targetshover-vs-tap - Use click/tap for primary interactionsloading-buttons - Disable button during async operationserror-feedback - Clear error messages near problemcursor-pointer - Add cursor-pointer to clickable elementsimage-optimization - Use WebP, srcset, lazy loadingreduced-motion - Check prefers-reduced-motioncontent-jumping - Reserve space for async contentviewport-meta - width=device-width initial-scale=1readable-font-size - Minimum 16px body text on mobilehorizontal-scroll - Ensure content fits viewport widthz-index-management - Define z-index scale (10, 20, 30, 50)line-height - Use 1.5-1.75 for body textline-length - Limit to 65-75 characters per linefont-pairing - Match heading/body font personalitiesduration-timing - Use 150-300ms for micro-interactionstransform-performance - Use transform/opacity, not width/heightloading-states - Skeleton screens or spinnersstyle-match - Match style to product typeconsistency - Use same style across all pagesno-emoji-icons - Use SVG icons, not emojischart-type - Match chart type to data typecolor-guidance - Use accessible color palettesdata-table - Provide table alternative for accessibilityWhen user requests UI/UX work (design, build, create, implement, review, fix, improve), follow this workflow:
Extract key information from user request:
html-tailwind위 Quick Reference와 아래 데이터를 기반으로 디자인 시스템을 직접 구성합니다:
| 산업 | 추천 스타일 | 색상 톤 | 폰트 성격 |
|---|---|---|---|
| SaaS/Tech | Minimalism, Flat Design | Blue/Purple 계열 | Geometric Sans (Inter, Geist) |
| E-commerce | Clean, Card-based | Warm neutral | Readable (Plus Jakarta Sans) |
| Healthcare | Soft, Trustworthy | Green/Teal 계열 | Humanist Sans (Source Sans) |
| Fintech | Professional, Data-rich | Navy/Gold 계열 | Monospace accent (JetBrains Mono) |
| Beauty/Wellness | Elegant, Soft | Rose/Sage 계열 | Serif accent (Playfair Display) |
| Gaming | Dark, Vibrant | Neon/Dark 계열 | Display (Orbitron, Rajdhani) |
| Education | Friendly, Accessible | Bright primary | Rounded (Nunito, Quicksand) |
| Portfolio | Expressive, Unique | Monochrome + accent | Display mix |
| 조합 | Heading | Body | 분위기 |
|---|---|---|---|
| Modern Pro | Inter | Inter | 깔끔, 프로페셔널 |
| Elegant | Playfair Display | Lato | 고급, 세련 |
| Friendly | Poppins | Open Sans | 친근, 접근성 |
| Bold | Montserrat | Roboto | 강렬, 임팩트 |
| Creative | Space Grotesk | DM Sans | 창의적, 모던 |
| Luxury | Cormorant Garamond | Raleway | 럭셔리, 우아 |
| Stack | 핵심 패턴 |
|---|---|
| html-tailwind | Tailwind utilities, responsive, a11y (DEFAULT) |
| react | State, hooks, performance, patterns |
| nextjs | SSR, routing, images, API routes |
| vue | Composition API, Pinia, Vue Router |
| svelte | Runes, stores, SvelteKit |
| shadcn | shadcn/ui 컴포넌트, 테마, 폼, 패턴 |
shadcn/ui MCP 도구가 사용 가능하면 컴포넌트 검색 및 예시를 활용합니다.
These are frequently overlooked issues that make UI look unprofessional:
| Rule | Do | Don't |
|---|---|---|
| No emoji icons | Use SVG icons (Heroicons, Lucide, Simple Icons) | Use emojis like 🎨 🚀 ⚙️ as UI icons |
| Stable hover states | Use color/opacity transitions on hover | Use scale transforms that shift layout |
| Correct brand logos | Research official SVG from Simple Icons | Guess or use incorrect logo paths |
| Consistent icon sizing | Use fixed viewBox (24x24) with w-6 h-6 | Mix different icon sizes randomly |
| Rule | Do | Don't |
|---|---|---|
| Cursor pointer | Add cursor-pointer to all clickable/hoverable cards | Leave default cursor on interactive elements |
| Hover feedback | Provide visual feedback (color, shadow, border) | No indication element is interactive |
| Smooth transitions | Use transition-colors duration-200 | Instant state changes or too slow (>500ms) |
| Rule | Do | Don't |
|---|---|---|
| Glass card light mode | Use bg-white/80 or higher opacity | Use bg-white/10 (too transparent) |
| Text contrast light | Use #0F172A (slate-900) for text | Use #94A3B8 (slate-400) for body text |
| Muted text light | Use #475569 (slate-600) minimum | Use gray-400 or lighter |
| Border visibility | Use border-gray-200 in light mode | Use border-white/10 (invisible) |
| Rule | Do | Don't |
|---|---|---|
| Floating navbar | Add top-4 left-4 right-4 spacing | Stick navbar to top-0 left-0 right-0 |
| Content padding | Account for fixed navbar height | Let content hide behind fixed elements |
| Consistent max-width | Use same max-w-6xl or max-w-7xl | Mix different container widths |
Before delivering UI code, verify these items:
cursor-pointerprefers-reduced-motion respected