메뉴
Project-aware expert-role for wireframing and prototyping. Reads project docs first, then translates requirements into structural UI flows, low-fidelity layouts, and component hierarchies without getting bogged down in visual design details.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Language-agnostic endpoint documentation generator. Reads routing and codebase to produce structured API contract documentation for existing endpoints.
Expert-role parity check across project docs, platform instruction surfaces, skills, reusable prompts, workflows, quick-reference material, and implementation evidence when authority depends on the current codebase. Use when checking whether the template system still agrees with itself or when preparing cleanup after major changes.
Project-aware expert-role contract design for APIs, interfaces, repositories, services, message schemas, and module boundaries. Reads project docs first, then produces or reviews a contract consistent with the current repository.
Project-aware expert-role broad verification that reads project docs first, classifies the verification target, and routes to the best specialist skill for executable or non-executable checks across code, contracts, docs, architecture, quality, security, reliability, and project health.
Project-aware expert-role database schema and modeling design. Reads project docs first, then produces a schema design, migration plan, or query optimization strategy consistent with the current repository constraints.
Project-aware expert-role for CI/CD pipeline design and implementation. Reads project docs first, enforces build caching, security gates, test execution, and deployment safety.
| name | wireframing |
| description | Project-aware expert-role for wireframing and prototyping. Reads project docs first, then translates requirements into structural UI flows, low-fidelity layouts, and component hierarchies without getting bogged down in visual design details. |
Produces a project-aware, expert-level wireframe or prototype structure by reading the repository's project docs first, then applying a user-centric structural design methodology.
This skill bridges the gap between the Product Requirements Document (PRD) and the final UI/UX implementation. It focuses on layout, information architecture, user journeys, and component structure, deferring specific styling decisions to the UI/UX phase.
| Document | Why it matters |
|---|---|
docs/project-docs/foundation/prd.md | Defines the user personas, core workflows, and required data points for the interface. |
docs/project-docs/development/ui-ux.md | Provides the baseline component vocabulary (e.g., standard layouts, navigation patterns) to reuse. |
docs/project-docs/foundation/architecture.md | Clarifies constraints on client-side vs server-side rendering and data availability. |
If the repository lacks a PRD for the feature being wireframed, call that out and define the user goals before attempting to draw layouts.
Use this skill when planning the structure of a new interface before committing to high-fidelity design or code.
| Boundary type | Typical artifacts |
|---|---|
| Page Layout | Grid structures, navigation placement, content zones. |
| User Flow | Multi-step wizards, checkout processes, onboarding journeys. |
| Component Hierarchy | Identifying which logical components are needed on a screen. |
| Information Architecture | Grouping related data, defining hierarchy of importance. |
Extract from prd.md: What is the primary objective of the user on this screen? What are the secondary actions? What data must be visible for them to make decisions?
Determine the hierarchy of information. The most critical data and primary calls-to-action (CTAs) must sit prominently (e.g., above the fold or in highly accessible areas). Group related information into logical sections or cards.
Without writing CSS or final HTML, outline the required components. For example:
Define how the user navigates between states:
Generate a structural representation. This could be a text-based ASCII wireframe, a markdown-based component hierarchy tree, or a Mermaid state diagram representing the flow. Keep it strictly low-fidelity.
ui-ux.md?When using this skill, the output should include:
@agent use wireframing on [Target Feature/Page] focusing on [Specific User Journey].