القائمة
Project-aware expert-role for frontend UI/UX design and implementation. Reads project docs first, enforces design systems, responsive bounds, accessibility, and visual testing constraints.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
| name | ui-ux-design |
| description | Project-aware expert-role for frontend UI/UX design and implementation. Reads project docs first, enforces design systems, responsive bounds, accessibility, and visual testing constraints. |
| argument-hint | Describe the component, page, or interaction to build or review |
Produces a project-aware, expert-level frontend implementation by reading the repository's project docs first, then applying a rigorous component-driven methodology.
This skill is reusable across any frontend framework (React, Vue, Svelte, plain HTML/CSS) or styling solution (Tailwind, CSS Modules, Styled Components).
It should not assume a specific component library (like Material UI) or styling engine until the project docs confirm them.
| Document | Why it matters |
|---|---|
docs/project-docs/development/ui-ux.md | Defines the design system, color palette, typography, accessibility (a11y) targets, and responsive breakpoints. |
docs/project-docs/foundation/prd.md | Clarifies the target audience and expected user flows. |
docs/project-docs/foundation/architecture.md | Defines where state management lives versus pure presentation components. |
docs/project-docs/development/testing.md | Defines how the UI should be validated (e.g., unit tests, visual regression, e2e). |
If the repository lacks the UI docs needed for styling or layout, call that out and create or update the missing docs instead of inventing arbitrary colors or padding values.
Use this skill when building or reviewing one of these boundary types:
| Boundary type | Typical artifacts |
|---|---|
| Presentation Component | Buttons, inputs, cards, typography components. |
| Layout / Page | Grid structures, responsive containers, navigation shells. |
| Interaction / Animation | Modals, dropdowns, transitions, hover states. |
| State-Connected Component | Forms, data tables, fetching wrappers. |
Extract from ui-ux.md:
Extract from architecture.md:
Before writing HTML/CSS, define:
Ensure the implementation includes:
<button> instead of <div onClick>).Write the code to adapt gracefully across the breakpoints defined in ui-ux.md. Ensure touch targets are large enough on mobile.
Use testing.md to decide how this will be validated.
Examples:
ui-ux.md.<div onClick={...}> instead of semantic interactive elements.When using this skill, the output should include:
@agent use ui-ux-design on [Target Theme/Tokens] focusing on [Specific Branding/Accessibility Goal].
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.