메뉴
Use when creating wireframes, mockups, user flows, or prototypes. Covers page layouts, information architecture, low/high-fidelity wireframes, interactive prototypes, and user flow diagrams.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
| name | wireframing-prototyping |
| description | Use when creating wireframes, mockups, user flows, or prototypes. Covers page layouts, information architecture, low/high-fidelity wireframes, interactive prototypes, and user flow diagrams. |
| user-invocable | false |
| allowed-tools | ["Read","Write","Edit","Grep","Glob"] |
+----------------------------------------------------------+
| [Logo] Dashboard Invoices Inventory HR [User] |
+----------+-----------------------------------------------+
| | +----------+ +----------+ +----------+ +----+ |
| SIDEBAR | | Revenue | | Expenses | | Profit | |Due | |
| Dashboard| | $124,500 | | $87,200 | | $37,300 | |12 | |
| Invoices | +----------+ +----------+ +----------+ +----+ |
| Products | |
| Customers| +-------------------------+ +---------------+ |
| Reports | | Revenue Chart | | Recent | |
| Settings | | [Line chart area] | | Activity | |
| | +-------------------------+ +---------------+ |
| | +-------------------------------------------+ |
| | | Recent Invoices [+New] | |
| | | # | Customer | Date | Amount | Stat | |
| | | 42 | Acme Corp | Mar 5 | $1,200 | Paid | |
| | +-------------------------------------------+ |
+----------+-----------------------------------------------+
+----------------------------------------------------------+
| Invoices [+New] |
| [Search...............] [Status: All v] [Date: This Mo v] |
| [ ] | # | Customer | Date | Amount | Status |
| [ ] | INV-42| Acme Corp | Mar 5 | $1,200 | Paid |
| Showing 1-25 of 142 [< 1 2 3 ... 6 >] |
| Selected: 2 items [Delete] [Mark as Sent] [Download] |
+----------------------------------------------------------+
+----------------------------------------------------------+
| Create Invoice [1] [2] [3] [4] |
| Customer * [Select customer... v] |
| Invoice Date * [2026-03-06 ] [cal] |
| Due Date * [2026-04-06 ] [cal] |
| LINE ITEMS |
| | Product * | Qty * | Price * | Tax | Total ||
| | [Select... v] | [ ] | [ ] | [5% v] | $0.00 ||
| | [+ Add Line Item] ||
| Subtotal: $0.00 |
| [Cancel] [Save Draft] [Save & Send] |
+----------------------------------------------------------+
Shell: Sidebar (nav) + Header (breadcrumb, actions, user, branch) + Main content area. Split View (Master-Detail): List on left, detail panel on right. Full-Width Report: Filters bar, KPI cards, chart, breakdown table.
ERP Application
+-- Dashboard
+-- Accounting (Invoices, Bills, Journal Entries, Chart of Accounts, Bank Reconciliation, Reports)
+-- Inventory (Products, Warehouses, Stock Movements, Adjustments, Reports)
+-- Sales (Customers, Quotations, Sales Orders, Delivery Notes, Reports)
+-- Procurement (Vendors, Purchase Requests, Purchase Orders, Reports)
+-- HR (Employees, Attendance, Leave, Payroll, Reports)
+-- Settings (Company, Branches, Users & Roles, Tax, Document Numbering)
Breadcrumbs: Home > Module > List > Detail > Action
flowchart TD
A[Invoice List] -->|Click +New| B[Create Form]
B -->|Save Draft| F[Detail - Draft]
B -->|Save & Send| G[Detail - Sent]
F -->|Edit| B
G -->|Record Payment| H{Full Payment?}
H -->|Yes| I[Detail - Paid]
H -->|No| J[Detail - Partial]
J -->|Record Payment| H
flowchart LR
A[Submit Request] --> B{Amount > $5K?}
B -->|No| C[Auto-Approve]
B -->|Yes| D{Amount > $25K?}
D -->|No| E[Manager Approval]
D -->|Yes| F[Director Approval]
E & F -->|Approved| G[Approved]
E & F -->|Rejected| H[Return to Requester]
| Breakpoint | Width | Changes |
|---|---|---|
| Mobile | < 640px | Single column, hamburger nav, cards replace tables |
| Tablet | 640-1023px | Collapsible sidebar, 2-column grid |
| Desktop | 1024-1279px | Full sidebar, 3-column grids |
| Wide | 1280px+ | Full layout, max-width 1280px |
Mobile data tables convert to stacked cards:
+---------------------------+
| Invoice #INV-042 |
| Acme Corp |
| Mar 5, 2026 |
| $1,200.00 [Paid] |
+---------------------------+
Button: Default -> Hover (bg-darker) -> Active (scale-0.98) -> Focus (ring-2) -> Disabled (opacity-50) -> Loading (spinner)
Input: Default (border-gray-300) -> Hover (border-gray-400) -> Focus (border-blue-500 ring-1) -> Error (border-red-500) -> Disabled (bg-gray-100)
| Element | Property | Duration | Easing |
|---|---|---|---|
| Button hover | background | 150ms | ease |
| Modal open/close | opacity + transform | 200ms/150ms | ease-out/ease-in |
| Sidebar toggle | width | 200ms | ease-in-out |
| Toast enter/exit | transform/opacity | 300ms/200ms | ease-out/ease-in |
Data Table: Column sorting, debounced search (300ms), filter bar, row checkboxes, bulk action bar, export CSV/PDF, pagination with page-size selector, empty/loading states.
Filter Panel: Status chips, customer dropdown, date range pickers, amount range, "Clear All" button, applied filter tags with dismiss.
Empty State: Icon/illustration + descriptive message + primary CTA button.
Confirmation Dialog: Title, consequence description, Cancel + Destructive action buttons.
| # | Screen | Route | Type | Priority |
|---|--------|-------|------|----------|
| 1 | Invoice List | /invoices | Index | P0 |
| 2 | Invoice Detail | /invoices/:id | Detail | P0 |
| 3 | Create Invoice | /invoices/create | Form (wizard) | P0 |
Per screen: Purpose, Data (API + fields), Filters, Actions, Mobile adaptation, Empty state.
## Prototype: [Feature Name]
### Overview: Brief description.
### User Stories: As a [role], I want to [action] so that [benefit].
### Screens: Entry points, key interactions, exit points, wireframe.
### Data Requirements: API endpoints, fields, validation.
### Edge Cases: Empty, error, loading, permission denied, concurrent edit.
Use when managing Laravel Forge servers, sites, deployments, SSL, databases, queue workers, scheduled jobs, security rules, and server provisioning. Covers Forge CLI, API, deployment scripts, Nginx templates, daemon management, and zero-downtime deployments.
Project-specific Ansible operations template — customize with your inventory, playbook catalog, deployment workflows, and host group details
Use when implementing or auditing accessibility features. Covers WCAG 2.1 AA/AAA compliance, ARIA roles and attributes, keyboard navigation, screen reader support, color contrast, focus management, and accessible component patterns.
Use when evaluating AI/LLM systems — benchmark design, automated evaluation pipelines, human evaluation protocols, A/B testing, hallucination detection, factuality checking, bias testing, safety evaluation (red teaming), latency/cost metrics, eval datasets, regression testing for prompts, and model comparison frameworks.
Use when building KPI frameworks, designing dashboards, analyzing marketing performance, setting up attribution models, or creating automated reports. Covers Google Analytics 4, social media analytics, funnel analysis, cohort analysis, A/B test analysis, ROI calculation, competitive benchmarking, and stakeholder reporting.
Use when designing or implementing REST APIs. Covers RESTful conventions, versioning, pagination, filtering, error handling, rate limiting, HATEOAS, OpenAPI documentation, and API security best practices.