메뉴
Optional extension — workspace density patterns for admin/instructor shells (sidebar rhythm, listing toolbars, table spacing). Customize per product; tokens from docs/ui-ux win.
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.
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 | design-craft-notion |
| description | Optional extension — workspace density patterns for admin/instructor shells (sidebar rhythm, listing toolbars, table spacing). Customize per product; tokens from docs/ui-ux win. |
Optional skill. Customize this file per product when the app has workspace-style layouts (sidebar + data tables + listing toolbars). If your product does not use this pattern, agents may ignore this skill.
Companion skill: frontend-design — identity, signature moments, typography.
| Topic | Authoritative doc |
|---|---|
| Design spec (when present) | docs/ui-ux/DESIGN.md |
| Token values, colors, fonts | docs/ui-ux/04-design-tokens.md |
| Visual direction | docs/ui-ux/01-design-overview.md |
| Listing page matrix | docs/ui-ux/14-listing-pages-search-filter-sort.md (when present) |
| Table toolbar contract | docs/ui-ux/05-common-ui-components.md |
| App shells / nav | docs/ui-ux/06-app-layout-components.md |
Never import third-party reference hex values or fonts that conflict with product tokens.
| Pattern | Application |
|---|---|
| Calm canvas | Page background behind elevated cards — --color-surface-default |
| Elevated data card | Table + toolbar container — --color-surface-elevated, subtle shadow |
| Hairline dividers | Table rows, sidebar groups — --color-border-subtle |
| Compact sidebar rows | Admin/instructor nav — 36–40 px row height, consistent inset |
| Filter toolbar | Listing pages — search left, primary action right |
| Single active nav item | One active indicator per layout — per RBAC/nav spec |
| Muted metadata | Secondary table columns — muted text tokens |
| Empty list state | Icon + headline + one CTA |
06-app-layout-components.mdEvery listing page per product matrix needs search + filter + sort + pagination (or documented variant).
Desktop layout:
┌─────────────────────────────────────────────────────────────┐
│ [Search………………] [Filter ▾] [Sort ▾] [Primary CTA] │
├─────────────────────────────────────────────────────────────┤
│ Table header row │
└─────────────────────────────────────────────────────────────┘
| Element | Guideline |
|---|---|
| Header row | Label style, muted color, bottom border |
| Body row height | min 44 px touch on user-facing tables |
| Cell padding | Comfortable inset per tokens |
| Pagination | Below table; per component spec |
Replace this stub with product-specific examples during harness setup or in skills/design-craft-notion/REFERENCE.md if you need a longer pattern library. Wire paths in config/context-map.json under agents.frontend.alwaysRead and agents.tester.alwaysRead.