메뉴
Use when designing or reviewing web UI, implementing forms/buttons/inputs, fixing visual hierarchy issues, creating color systems, building layouts, or when interface feels cluttered, hard to read, or users don't know what to click.
기본적으로 소스를 먼저 확인하는 Prompt가 선택됩니다. 직접 명령으로 전환하거나 로컬 사본을 다운로드할 수도 있습니다.
설치 여부를 결정하기 전에 SKILL.md와 SkillsMP에 표시된 보조 파일을 읽어 보세요.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
직접 명령은 검토 Prompt를 거치지 않습니다. 실행하기 전에 소스를 확인하세요.
npx skills add https://github.com/ratacat/claude-skills --skill web-interface-design명령은 한 줄로 유지됩니다. 복사하기 전에 가로로 스크롤해 전체 내용을 확인하세요.
로컬 사본을 원하시나요? SkillsMP에서 현재 제공할 수 있는 파일을 다운로드하세요.
Run comprehensive agent-native architecture review with scored principles
Use this agent when reviewing code to ensure features are agent-native - that any action a user can take, an agent can also take, and anything a user can see, an agent can see. This enforces the principle that agents should have parity with users in capability and context. <example>Context: The user added a new feature to their application.\nuser: "I just implemented a new email filtering feature"\nassistant: "I'll use the agent-native-reviewer to verify this feature is accessible to agents"\n<commentary>New features need agent-native review to ensure agents can also filter emails, not just humans through UI.</commentary></example><example>Context: The user created a new UI workflow.\nuser: "I added a multi-step wizard for creating reports"\nassistant: "Let me check if this workflow is agent-native using the agent-native-reviewer"\n<commentary>UI workflows often miss agent accessibility - the reviewer checks for API/tool equivalents.</commentary></example>
Use this agent when you need to create or update README files following the Ankane-style template for Ruby gems. This includes writing concise documentation with imperative voice, keeping sentences under 15 words, organizing sections in the standard order (Installation, Quick Start, Usage, etc.), and ensuring proper formatting with single-purpose code fences and minimal prose. Examples: <example>Context: User is creating documentation for a new Ruby gem. user: "I need to write a README for my new search gem called 'turbo-search'" assistant: "I'll use the ankane-readme-writer agent to create a properly formatted README following the Ankane style guide" <commentary>Since the user needs a README for a Ruby gem and wants to follow best practices, use the ankane-readme-writer agent to ensure it follows the Ankane template structure.</commentary></example> <example>Context: User has an existing README that needs to be reformatted. user: "Can you update my gem's README to follow the Ankane style?" assistant: "Let...
SKILL.md 표시 중
SOC 직업 분류 기준
| name | web-interface-design |
| description | Use when designing or reviewing web UI, implementing forms/buttons/inputs, fixing visual hierarchy issues, creating color systems, building layouts, or when interface feels cluttered, hard to read, or users don't know what to click. |
Design exists to separate the primary from the secondary. Users should instantly recognize what matters. Good interface design is invisible—users accomplish goals without noticing the interface.
This skill orchestrates domain-specific reference files. Read only what you need for the task.
| Task | Load Reference |
|---|---|
| Font sizes, line spacing, heading hierarchy, vertical rhythm | references/typography.md |
| Input fields, validation, checkboxes, radios, selects, textareas | references/forms-and-inputs.md |
| Button hierarchy, sizing, states, CTAs, ghost buttons | references/buttons.md |
| Color palettes, dark mode, tints/shades, state colors | references/color-systems.md |
| Navigation, cards, tabs, accordions, modals, tables, toasts | references/ui-components.md |
| Grids, spacing scales, responsive patterns, whitespace | references/layout-and-spacing.md |
| Focus techniques, hierarchy principles, action pyramid | references/visual-hierarchy.md |
| Contrast ratios, focus states, screen readers, WCAG | references/accessibility.md |
| CSS implementation patterns, variables, common styles | references/css-patterns.md |
What's the problem?
├─ Text hard to read, spacing feels off → typography.md
├─ Form not working well, validation issues → forms-and-inputs.md
├─ Users don't know what to click → buttons.md OR visual-hierarchy.md
├─ Colors look wrong, dark mode broken → color-systems.md
├─ Need nav/cards/tabs/modals/tables → ui-components.md
├─ Spacing inconsistent, layout cramped → layout-and-spacing.md
├─ Everything competes for attention → visual-hierarchy.md
├─ Accessibility audit or contrast issues → accessibility.md
└─ Need CSS implementation → css-patterns.md
4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96
| Level | Use For | Treatment |
|---|---|---|
| Primary | Main action (ONE per view) | Solid fill, high contrast |
| Secondary | Alternative actions | Outlined or subtle fill |
| Tertiary | Minor actions | Text-only or ghost |