القائمة
Generic design-system craft for {{PRODUCT_NAME}} UI — read design-system modules, apply style profile tokens, and enforce screenshot review for implementer and browser tester agents.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
UI/UX audit skill for the browser test agent — screenshot-driven review for common usability defects beyond predefined TC-* cases. Log UX-* bugs with severity; P0/P1 block the browser gate.
UI/UX audit skill for the browser test agent — screenshot-driven review for common usability defects beyond predefined TC-* cases. Log UX-* bugs with severity; P0/P1 block the browser gate.
Generic design-system craft for Attendly UI — read design-system modules, apply style profile tokens, and enforce screenshot review for implementer and browser tester agents.
Applies Neobrutalism UI design system rules. Use when the user says 'neobrutalism design system', 'apply design system', or builds UI for HESD.
Optional extension — workspace density patterns for admin/instructor shells (sidebar rhythm, listing toolbars, table spacing). Customize per product; tokens from docs/ui-ux win.
Distinctive, intentional visual design for We Check UI. Process and craft guidance for implementer and browser tester agents — aesthetic direction, typography, signature moments, and copy that avoid templated defaults.
| name | visual-design |
| description | Generic design-system craft for {{PRODUCT_NAME}} UI — read design-system modules, apply style profile tokens, and enforce screenshot review for implementer and browser tester agents. |
Harness skill for {{DESIGN_STYLE_NAME}} visual implementation. Product specs live in docs/ui-ux/; this skill governs how agents read and apply them.
Style profile: borders ({{BORDER_STYLE}}), radius ({{RADIUS_DEFAULT}}), elevation ({{SHADOW_STYLE}}), primary ({{PRIMARY_COLOR}}), fonts ({{HEADING_FONT}} / {{BODY_FONT}}).
| Topic | Authoritative doc |
|---|---|
| Scope, module index, domain bridge | docs/ui-ux/DESIGN.md |
| Component visual specs | docs/ui-ux/design-system/ |
| CSS variable mapping | docs/ui-ux/04-design-tokens.md |
| Visual direction | docs/ui-ux/01-design-overview.md |
| Quality gate | docs/ui-ux/00-production-ui-quality-bar.md |
| Component contracts | docs/ui-ux/05-common-ui-components.md, 06-app-layout-components.md |
| Listing page matrix | docs/ui-ux/14-listing-pages-search-filter-sort.md |
Never bypass tokens, accessibility, or business rules for aesthetics.
Read every module that applies to the screen:
| Screen type | Minimum modules |
|---|---|
| Any UI | layout.md, typography.md, colors.md, shadows.md, radius.md, borders.md |
| Forms / auth | + inputs.md, buttons.md, cards.md |
| Listing / data views | + tables.md, tabs.md, sidebars.md |
| Modals / dialogs | + modals.md |
| Outcome states | + alerts.md, badges.md |
Do NOT write UI code until relevant modules are loaded.
Apply the {{DESIGN_STYLE_NAME}} profile consistently:
borders.md and DESIGN.md style profile ({{BORDER_STYLE}})radius.md (default {{RADIUS_DEFAULT}})shadows.md ({{SHADOW_STYLE}})tokens.css — not literal framework defaultsThe UI must feel intentional — not a generic gray SaaS template. Craft failures:
TableToolbar per docsEvery major flow needs one intentional visual moment: outcome alert, elevated stat card, or recovery affordance with clear hierarchy.
Flag as UX/visual defect when screenshots show:
Cross-reference ui-ux-testing and ui-visual-verification.md.
Read docs/ui-ux/01-ui-ux-foundation.md for personas, locales, and canonical states. Design for real users under real constraints — not a marketing landing page.