메뉴
Designs page layouts, grid systems, and structural arrangements. Use when creating layouts for pages, sections, or components. Considers responsive design, visual hierarchy, and accessibility.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Checks code for accessibility issues including missing alt text, poor color contrast, missing ARIA labels, keyboard navigation issues, screen reader compatibility, and focus management. Returns structured accessibility issue reports with WCAG compliance information.
Ensures designs meet accessibility requirements including WCAG compliance, color contrast, keyboard navigation, screen reader support, and focus management. Reviews designs for accessibility issues and provides recommendations.
Assesses agent capabilities by analyzing agent files and determining what tasks they can handle. Use when you need to evaluate if an existing agent can handle a task or if a new agent is needed. Reviews agent descriptions, skills, and workflows to determine capability match.
Creates new agent files with complete specifications, following the same format as existing agents. Use when a new agent is needed for tasks that existing agents cannot handle. Generates agent markdown files with name, description, core principles, workflow, and integration details.
Implements API endpoints, routes, controllers, and request/response handling. Use when implementing REST APIs, GraphQL APIs, or other API endpoints. Handles routing, validation, error handling, and response formatting.
Reviews code architecture for design issues including poor separation of concerns, tight coupling, missing abstractions, design pattern violations, scalability concerns, and maintainability issues. Returns structured architecture review reports with improvement suggestions.
| name | layout-designer |
| description | Designs page layouts, grid systems, and structural arrangements. Use when creating layouts for pages, sections, or components. Considers responsive design, visual hierarchy, and accessibility. |
Input: "Design layout for user profile page" Output:
### Layout Structure
**Desktop (1024px+):**
- Container: max-width 1200px, centered
- Grid: 12-column grid system
- Header: Full width, fixed top, height 64px
- Sidebar: 3 columns (left), fixed width 240px
- Main Content: 9 columns (right), flexible width
- Footer: Full width, height 80px
**Tablet (768px - 1023px):**
- Container: max-width 100%, padding 24px
- Grid: Single column
- Header: Full width, height 56px
- Sidebar: Hidden (collapsed into menu)
- Main Content: Full width
- Footer: Full width, height 64px
**Mobile (320px - 767px):**
- Container: Full width, padding 16px
- Grid: Single column
- Header: Full width, height 48px, hamburger menu
- Sidebar: Hidden (drawer menu)
- Main Content: Full width
- Footer: Full width, height 56px
### Visual Hierarchy
1. Header (navigation)
2. Main content area
3. Sidebar (secondary content)
4. Footer (tertiary content)
### Grid System
- 12-column grid
- Gutter: 24px (desktop), 16px (tablet), 12px (mobile)
- Column width: Flexible based on container