원클릭으로 Manus에서 모든 스킬 실행

ui-ux-design

스타0

포크0

업데이트2026년 3월 4일 16:57

Design and implement UI/UX changes using existing components and Tailwind tokens; ensure accessibility. EXCLUSIVE to ui-ux-designer agent.

설치

Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.

Manus에서 실행

출처

htooayelwinict

htooayelwinict/claude-config

GitHub 저장소 열기 Creator 저장소 보기

다운로드

Manus에서 실행

UI/UX Design

Exclusive to: ui-ux-designer agent

📚 Context7 (Memory) — Up-to-Date Docs

Lookup latest component patterns and accessibility guidelines:

mcp_context7_resolve-library-id(libraryName="shadcn-ui", query="dialog modal")
mcp_context7_query-docs(libraryId="/shadcn-ui/ui", query="accessible form patterns")

🖼️ Visual Verification (Web Apps)

After UI implementation, capture and analyze:

Screenshot & Analyze

mcp_playwright_browser_navigate(url="http://localhost:8000/[page]")
mcp_playwright_browser_take_screenshot(filename="ui-check.png")

mcp_zai-mcp-server_analyze_image(
  image_path="ui-check.png",
  prompt="Check this UI for: design consistency, spacing, alignment, accessibility"
)

Responsive Verification

mcp_playwright_browser_resize(width=375, height=812)   # Mobile
mcp_playwright_browser_resize(width=768, height=1024)  # Tablet  
mcp_playwright_browser_resize(width=1920, height=1080) # Desktop

Instructions

Audit existing UI for patterns to follow
Use existing shadcn/ui components (see component map below)
Follow Tailwind design tokens, avoid custom CSS
Ensure accessibility (keyboard, labels, contrast)
Test responsive behavior (mobile + desktop)

shadcn/ui Component Map

Need	Component
Button	`<Button>`
Input	`<Input>`
Select	`<Select>`
Modal	`<Dialog>`
Dropdown	`<DropdownMenu>`
Toast	`<Toast>`
Card	`<Card>`
Alert	`<Alert>`

Design Tokens

Colors

text-foreground           // Primary text
text-muted-foreground     // Secondary text
bg-background             // Page background
bg-muted                  // Subtle background
border-border             // Default borders

Spacing

p-1 (4px)  p-2 (8px)  p-4 (16px)  p-6 (24px)  p-8 (32px)

Responsive Breakpoints

Prefix	Width	Device
`sm:`	640px	Phone
`md:`	768px	Tablet
`lg:`	1024px	Laptop
`xl:`	1280px	Desktop

Accessibility Checklist (WCAG 2.1)

Forms

Inputs have <Label> with htmlFor
Errors linked with aria-describedby
Invalid state with aria-invalid

Interactive

Keyboard accessible
Focus states visible
Logical focus order

Content

Images have alt text
4.5:1 color contrast

Form Pattern

<Label htmlFor="name">Name</Label>
<Input
    id="name"
    aria-invalid={!!errors.name}
    aria-describedby={errors.name ? 'name-error' : undefined}
/>
{errors.name && (
    <p id="name-error" className="text-sm text-destructive">
        {errors.name}
    </p>
)}

Rules

✅ Use existing components and tokens
✅ Follow docs/code-standards.md
✅ Implement loading/error states
❌ Don't create new colors/fonts
❌ Don't use inline styles
❌ Don't skip mobile responsiveness

Examples

"Improve a form's validation UX"
"Adjust layout for readability"

이 저장소의 다른 Skills

같은 저장소

brainstorming

htooayelwinict/claude-config

Brainstorm and advise on technical decisions using structured process and MCP helpers. EXCLUSIVE to brainstormer agent. Does NOT implement — only advises.

2026-03-040

bugfix-and-debug

htooayelwinict/claude-config

Diagnose errors and failing tests in Laravel + React + Python applications. Use when encountering bugs, exceptions, stack traces, 500 errors, TypeErrors, failing tests, or unexpected behavior. EXCLUSIVE to debugger agent.

2026-03-040

code-review-checklist

htooayelwinict/claude-config

Review code changes for correctness, security, performance, and maintainability. Use for PR reviews, code audits, pre-merge checks, or quality validation of Laravel + React + Python code. EXCLUSIVE to reviewer agent.

2026-03-040

database-change-management

htooayelwinict/claude-config

Plan and implement safe database schema changes including migrations, indexes, and backfills. Use when creating tables, adding columns, optimizing queries, or managing Eloquent/SQLAlchemy relationships. EXCLUSIVE to database-admin agent.

2026-03-040

devops-infrastructure

htooayelwinict/claude-config

Manage deployment, Docker, CI/CD, server hardening, and infrastructure security. EXCLUSIVE to devops-engineer agent.

2026-03-040

documentation-management

htooayelwinict/claude-config

Keep project documentation accurate when behavior changes. EXCLUSIVE to project-manager agent.

2026-03-040

name	ui-ux-design
description	Design and implement UI/UX changes using existing components and Tailwind tokens; ensure accessibility. EXCLUSIVE to ui-ux-designer agent.
allowed-tools	Read, Edit, Grep, Glob, Write, mcp_codex-bridge, mcp_gemini-bridge, mcp_context7, mcp_playwright, mcp_zread, mcp_web-search-prime, mcp_web-reader, mcp_zai-mcp-server, mcp_open-bridge

UI/UX Design

Exclusive to: ui-ux-designer agent

📚 Context7 (Memory) — Up-to-Date Docs

Lookup latest component patterns and accessibility guidelines:

mcp_context7_resolve-library-id(libraryName="shadcn-ui", query="dialog modal")
mcp_context7_query-docs(libraryId="/shadcn-ui/ui", query="accessible form patterns")

🖼️ Visual Verification (Web Apps)

After UI implementation, capture and analyze:

Screenshot & Analyze

mcp_playwright_browser_navigate(url="http://localhost:8000/[page]")
mcp_playwright_browser_take_screenshot(filename="ui-check.png")

mcp_zai-mcp-server_analyze_image(
  image_path="ui-check.png",
  prompt="Check this UI for: design consistency, spacing, alignment, accessibility"
)

Responsive Verification

mcp_playwright_browser_resize(width=375, height=812)   # Mobile
mcp_playwright_browser_resize(width=768, height=1024)  # Tablet  
mcp_playwright_browser_resize(width=1920, height=1080) # Desktop

Instructions

Audit existing UI for patterns to follow
Use existing shadcn/ui components (see component map below)
Follow Tailwind design tokens, avoid custom CSS
Ensure accessibility (keyboard, labels, contrast)
Test responsive behavior (mobile + desktop)

shadcn/ui Component Map

Need	Component
Button	`<Button>`
Input	`<Input>`
Select	`<Select>`
Modal	`<Dialog>`
Dropdown	`<DropdownMenu>`
Toast	`<Toast>`
Card	`<Card>`
Alert	`<Alert>`

Design Tokens

Colors

text-foreground           // Primary text
text-muted-foreground     // Secondary text
bg-background             // Page background
bg-muted                  // Subtle background
border-border             // Default borders

Spacing

p-1 (4px)  p-2 (8px)  p-4 (16px)  p-6 (24px)  p-8 (32px)

Responsive Breakpoints

Prefix	Width	Device
`sm:`	640px	Phone
`md:`	768px	Tablet
`lg:`	1024px	Laptop
`xl:`	1280px	Desktop

Accessibility Checklist (WCAG 2.1)

Forms

Inputs have <Label> with htmlFor
Errors linked with aria-describedby
Invalid state with aria-invalid

Interactive

Keyboard accessible
Focus states visible
Logical focus order

Content

Images have alt text
4.5:1 color contrast

Form Pattern

<Label htmlFor="name">Name</Label>
<Input
    id="name"
    aria-invalid={!!errors.name}
    aria-describedby={errors.name ? 'name-error' : undefined}
/>
{errors.name && (
    <p id="name-error" className="text-sm text-destructive">
        {errors.name}
    </p>
)}

Rules

✅ Use existing components and tokens
✅ Follow docs/code-standards.md
✅ Implement loading/error states
❌ Don't create new colors/fonts
❌ Don't use inline styles
❌ Don't skip mobile responsiveness

Examples

"Improve a form's validation UX"
"Adjust layout for readability"