メニュー
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.