메뉴
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.
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.
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.
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.
| name | visual-design |
| description | 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. |
Harness skill for Neobrutalism visual implementation. Product specs live in docs/ui-ux/; this skill governs how agents read and apply them.
Style profile: borders (2px solid #000000), radius (0px), elevation (hard offset shadows with no blur (shadow-xs through shadow-2xl)), primary (#FFDB33), fonts (Archivo Black, sans-serif / Space Grotesk, sans-serif).
| 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 Neobrutalism profile consistently:
borders.md and DESIGN.md style profile (2px solid #000000)radius.md (default 0px)shadows.md (hard offset shadows with no blur (shadow-xs through shadow-2xl))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.