メニュー
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 職業分類に基づく
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.
| 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.