القائمة
Domain UI/UX Expert - Enterprise design systems, component architecture, accessibility, icons, and theming integration
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
AI-powered legacy site rebuilding workflow. Captures screenshots, analyzes source code, and generates modern frontend/backend code. Claude Code reads screenshots and writes actual code. Use when rebuilding legacy PHP, WordPress, or similar sites to Next.js, React, or other modern frameworks.
하네스를 구성합니다. 전문 에이전트를 정의하며, 해당 에이전트가 사용할 스킬을 생성하는 메타 스킬. (1) '하네스 구성해줘', '하네스 구축해줘' 요청 시, (2) '하네스 설계', '하네스 엔지니어링' 요청 시, (3) 새로운 도메인/프로젝트에 대한 하네스 기반 자동화 체계를 구축할 때, (4) 하네스 구성을 재구성하거나 확장할 때 사용.
Leader agent role guide for jikime team orchestration. Covers task distribution, plan approval, worker monitoring, and team shutdown. Use when spawned as the leader role in a jikime team.
Reviewer agent role guide for jikime team orchestration. Covers plan review, quality assessment, acceptance criteria validation, and feedback delivery via team inbox. Use when spawned as the reviewer role in a jikime team.
Use this skill when the user asks to "jikime team을 사용해줘", "팀 만들어줘", "에이전트 생성해줘", "멀티 에이전트로 작업해줘", "병렬로 에이전트 실행해줘", "여러 에이전트 조율해줘", "작업을 여러 에이전트에게 분배해줘", "team status 확인해줘", "task 만들어줘", "inbox 확인해줘", or mentions "jikime team", "multi-agent coordination", "spawn agents", "team tasks", "agent inbox", "task board", "team leader", "team worker". Also trigger when the scope of work is large enough to benefit from splitting into parallel subtasks — for example "전체 코드베이스 리팩토링", "여러 기능 동시에 구현", "대규모 분석", "full-stack app 만들어줘". Provides comprehensive guidance for using the jikime team CLI to orchestrate multi-agent teams with task management, messaging, and monitoring.
Claude Code skill for operating as part of a jikime multi-agent team (swarm). Provides command reference, coordination protocols, and role-specific workflows for leader, worker, and reviewer agents. Triggers when the task involves multi-agent coordination, spawning workers, assigning tasks, monitoring team progress, or when the scope exceeds what a single agent can efficiently handle (e.g., "build a full-stack app", "implement multiple features in parallel", "refactor the entire codebase"). Also triggers on keywords: "create a team", "spawn agents", "assign tasks", "team status", "board attach", "agent inbox", "multi-agent", "swarm", "jikime team".
| name | jikime-domain-uiux |
| description | Domain UI/UX Expert - Enterprise design systems, component architecture, accessibility, icons, and theming integration |
| version | 2.0.0 |
| category | domain |
| modularized | true |
| user-invocable | false |
| tags | ["domain","uiux","design-systems","accessibility","components","icons","theming"] |
| updated | "2026-01-11T00:00:00.000Z" |
| status | active |
| allowed-tools | ["Read","Grep","Glob","mcp__context7__resolve-library-id","mcp__context7__get-library-docs"] |
| triggers | {"keywords":["UI/UX","design system","accessibility","WCAG","ARIA","icon","theming","dark mode","design tokens","component library","Radix UI","shadcn","Storybook","Figma","design tokens","Style Dictionary","Lucide","Iconify","responsive design"]} |
| progressive_disclosure | {"enabled":true,"level1_tokens":"~100","level2_tokens":"~2273 - user experience"} |
Core UI/UX Foundation - Enterprise-grade UI/UX foundation integrating design systems (W3C DTCG 2025.10), component architecture (React 19, Vue 3.5), accessibility (WCAG 2.2), icon libraries (200K+ icons), and theming systems.
Unified Capabilities:
When to Use:
Module Organization:
Core Technologies:
Quick Decision Guide:
For design tokens, use modules/design-system-tokens.md with DTCG 2025.10 and Style Dictionary 4.0.
For component patterns, use modules/component-architecture.md with Atomic Design, React 19, and shadcn/ui.
For accessibility, use modules/accessibility-wcag.md with WCAG 2.2, jest-axe, and keyboard navigation.
For icons, use modules/icon-libraries.md with Lucide, React Icons, Tabler, and Iconify.
For theming, use modules/theming-system.md with CSS variables and Theme Provider.
For practical examples, use examples.md with React and Vue implementations.
Step 1: Initialize design tokens by creating a JSON file with DTCG schema URL. Define color tokens with type color and primary 500 value. Define spacing tokens with type dimension and md value of 1rem.
Step 2: Transform tokens with Style Dictionary by installing the package and running the build command.
Step 3: Integrate with components by importing colors and spacing from the tokens directory.
See modules/design-system-tokens.md for complete token architecture.
Step 1: Initialize shadcn/ui by running the init command, then add button, form, and dialog components.
Step 2: Set up Atomic Design structure with atoms directory for Button, Input, and Label components, molecules directory for FormGroup and Card components, and organisms directory for DataTable and Modal components.
Step 3: Implement with accessibility by adding aria-label attributes to interactive elements.
See modules/component-architecture.md for patterns and examples.
Step 1: Choose icon library based on needs. Install lucide-react for general purpose, iconify/react for maximum variety, or tabler/icons-react for dashboard optimization.
Step 2: Implement type-safe icons by importing specific icons and applying className for sizing and color.
See modules/icon-libraries.md for library comparison and optimization.
Step 1: Configure CSS variables in root selector for primary and background colors. Define dark class with inverted values for dark mode.
Step 2: Implement Theme Provider by wrapping the application with attribute set to class and defaultTheme set to system.
See modules/theming-system.md for complete theme system.
Design Token First:
Accessibility by Default:
Component Composition:
Performance Optimization:
Required Practices:
Use design tokens exclusively for all color, spacing, and typography values. Design tokens provide a single source of truth, enabling consistent theming, multi-platform support, and scalable design systems. Hardcoded values create maintenance debt and break theme switching.
Include ARIA labels on all icon-only interactive elements. Screen readers cannot interpret visual icons without text alternatives. Missing ARIA labels violate WCAG 2.2 AA compliance.
Import icons individually rather than using namespace imports. Namespace imports bundle entire libraries, defeating tree-shaking optimization. Bundle sizes increase by 500KB-2MB per icon library.
Test all components in both light and dark modes. Theme switching affects color contrast, readability, and accessibility compliance.
Implement keyboard navigation for all interactive components. Keyboard-only users require Tab, Enter, Escape, and Arrow key support.
Provide visible focus indicators for all focusable elements. Focus indicators communicate current keyboard position for navigation and accessibility.
Use Tailwind utility classes instead of inline styles. Tailwind provides consistent spacing scale, responsive design, and automatic purging for optimal bundle sizes.
Include loading states for all asynchronous operations. Loading states provide feedback during data fetching, preventing user uncertainty.
Skills:
Agents:
Commands:
For detailed module documentation, see the modules directory.
For practical code examples, see examples.md.
For external documentation links, see reference.md.
Official Resources:
Last Updated: 2026-01-23 Status: Production Ready Version: 2.0.0
