Menu
Por padrão, está selecionado o prompt que primeiro revisa a origem. Você pode mudar para um comando direto ou baixar uma cópia local.
Leia o SKILL.md e os arquivos complementares exibidos pelo SkillsMP antes de decidir se vai instalar.
Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.
Um comando direto ignora o prompt de revisão. Verifique a origem antes de executá-lo.
npx skills add https://github.com/legendtkl/agentic-skill-router --skill skill-115O comando permanece em uma só linha. Role horizontalmente para revisá-lo antes de copiar.
Prefere uma cópia local? Baixe os arquivos disponíveis atualmente no SkillsMP.
First use any clearly matching enabled local/user Agent Skill. If none matches, prefer this router for skill-shaped requests involving a named tool, API, service, CLI, platform, file format, dataset, or domain workflow, including when a generic built-in skill such as browser, Chrome, or web search also seems applicable; use built-ins directly only when explicitly requested or when the task is primarily live browsing, logged-in page operation, clicking, screenshotting, or current webpage inspection. Also use directly to audit, slim, disable, restore, or route locally installed Agent Skills across supported hosts. Examples include Vercel, Netlify, Cloudflare, Render, Playwright, Sentry, Linear, GitHub, OpenAI APIs, PDF, DOCX, PPTX, and spreadsheets.
コスト見積書を作成する。予算策定、見積もり、コスト計画時に使う。
Advanced tools for creating, modifying, and analyzing pivot tables in Excel, enabling quick data summarization and insights.
Baseado na classificação ocupacional SOC
Exibindo SKILL.md
| name | skill-115 |
| description | 유저스토리를 기반으로 사용자 인터페이스와 경험을 디자인할 때 상세한 UI/UX 디자인 명세를 작성합니다. |
유저스토리를 기반으로 상세한 UI/UX 디자인 명세를 작성합니다.
design/userstory.md (user-stories 결과)think/핵심솔루션.md (solution-selection 결과)홈
├── 기능 A
│ ├── 하위기능 A-1
│ └── 하위기능 A-2
├── 기능 B
│ ├── 하위기능 B-1
│ └── 하위기능 B-2
├── 마이페이지
│ ├── 프로필
│ └── 설정
└── 고객지원
각 주요 기능에 대해:
시작
↓
[화면 1: 랜딩] → [화면 2: 선택]
↓ ↓
[화면 3: 입력] ← [화면 4: 확인]
↓
완료
플로우 설명:
각 주요 화면에 대해 (최소 5개):
+----------------------------------+
| [로고] [메뉴] [메뉴] [메뉴] |
+----------------------------------+
| |
| [히어로 섹션] |
| - 메인 메시지 |
| - CTA 버튼 |
| |
+----------------------------------+
| [기능 1] [기능 2] [기능 3] |
| 설명 설명 설명 |
+----------------------------------+
| |
| [메인 컨텐츠 영역] |
| |
+----------------------------------+
| 푸터 |
+----------------------------------+
핵심 요소:
Primary Color: #[HEX] - 메인 브랜드 컬러
Secondary Color: #[HEX] - 보조 컬러
Accent Color: #[HEX] - 강조 컬러
텍스트 컬러:
- Primary Text: #[HEX]
- Secondary Text: #[HEX]
- Disabled Text: #[HEX]
배경:
- Light: #[HEX]
- Dark: #[HEX]
상태 컬러:
- Success: #[HEX]
- Warning: #[HEX]
- Error: #[HEX]
- Info: #[HEX]
Font Family: [폰트명]
제목:
- H1: [크기]px, [굵기], [행간]
- H2: [크기]px, [굵기], [행간]
- H3: [크기]px, [굵기], [행간]
본문:
- Body 1: [크기]px, [굵기], [행간]
- Body 2: [크기]px, [굵기], [행간]
Caption: [크기]px, [굵기], [행간]
XS: 4px
S: 8px
M: 16px
L: 24px
XL: 32px
XXL: 48px
모바일: < 768px
태블릿: 768px - 1024px
데스크톱: > 1024px
준수 체크리스트:
권장 도구:
# UI/UX 디자인 명세
## 디자인 원칙
### 핵심 원칙 (5개)
1. **{원칙명}**: {설명}
2. **{원칙명}**: {설명}
3. **{원칙명}**: {설명}
4. **{원칙명}**: {설명}
5. **{원칙명}**: {설명}
### 디자인 언어
- **톤 앤 매너**: {예: 친근하고 직관적}
- **브랜드 키워드**: {키워드1}, {키워드2}, {키워드3}
## 정보 아키텍처
### 사이트맵
\```
홈
├── {기능 A}
│ ├── {하위기능 A-1}
│ └── {하위기능 A-2}
├── {기능 B}
│ ├── {하위기능 B-1}
│ └── {하위기능 B-2}
└── {기능 C}
\```
### 네비게이션 구조
- **주 네비게이션**: {메뉴1}, {메뉴2}, {메뉴3}
- **부 네비게이션**: {서브메뉴 항목}
- **푸터 네비게이션**: {푸터 링크}
## 사용자 플로우
### 플로우 1: {기능명}
\```
시작
↓
[화면 1: {화면명}] → [화면 2: {화면명}]
↓ ↓
[화면 3: {화면명}] ← [화면 4: {화면명}]
↓
완료
\```
**플로우 설명**:
1. **{화면명}**: {설명}
2. **{화면명}**: {설명}
3. **{화면명}**: {설명}
(다음 플로우 반복)
## 와이어프레임
### 화면 1: {화면명}
\```
+----------------------------------------+
| [로고] [메뉴] [메뉴] [메뉴] |
+----------------------------------------+
| |
| [{영역명}] |
| - {요소 1} |
| - {요소 2} |
| |
+----------------------------------------+
| [{컴포넌트1}] [{컴포넌트2}] [{컴포넌트3}] |
+----------------------------------------+
| |
| [{메인 컨텐츠 영역}] |
| |
+----------------------------------------+
| {푸터} |
+----------------------------------------+
\```
:
: {설명}
: {설명}
: {설명}
(다음 화면 반복, 최소 5개)
: {설명}
크기: {크기}
색상: {색상}
사용: {사용 케이스}
: {설명}
크기: {크기}
색상: {색상}
사용: {사용 케이스}
: {설명}
타입: {text, email, password 등}
상태: {default, focus, error, disabled}
: {설명}
옵션 표시 방식: {설명}
검색 기능: {유/무}
(모든 컴포넌트 반복)
\
\
\
: {Material Icons, Font Awesome 등}
: 16px, 24px, 32px
: {Filled, Outlined, Rounded 등}
\
(< 768px)
레이아웃: 단일 컬럼
네비게이션: 햄버거 메뉴
터치 타겟: 최소 44x44px
(768px - 1024px)
레이아웃: 2단 컬럼
네비게이션: 사이드바 또는 탭
터치 타겟: 최소 44x44px
(> 1024px)
레이아웃: 다단 컬럼
네비게이션: 전체 메뉴바
마우스/키보드 인터랙션
: 300ms (기본)
: ease-in-out
: {효과 설명}
: {효과 설명}
: {효과 설명}
: {효과 설명}
: {효과 설명}
: {효과 설명}
[ ] 키보드 네비게이션 지원 (Tab, Enter, Space, Arrow keys)
[ ] 스크린 리더 호환 (적절한 HTML 시맨틱 사용)
[ ] 색상 대비율 ≥ 4.5:1 (텍스트), ≥ 3:1 (UI 컴포넌트)
[ ] 이미지 대체 텍스트 (alt 속성)
[ ] ARIA 레이블 (role, aria-label, aria-describedby)
[ ] 폼 레이블 (label 요소)
[ ] 포커스 인디케이터 (visible focus indicator)
[ ] : 첫인상 평가
[ ] : 주요 태스크 완료 여부
[ ] : 사용 중 발생한 에러 빈도
[ ] : SUS (System Usability Scale)
[ ] : 추천 의향
: Figma, Adobe XD
: Figma, InVision, Proto.io
: Zeplin, Abstract
: Style Dictionary
: Storybook
design/uiux/uiux.mddesign/uiux/style-guide.mdUI/UX 디자인 완료 후: