菜单
Deep UX audit playbook — accessibility (WCAG AA), state machines for every interactive component, microinteractions, responsive breakpoints, motion principles, and empty/error/loading states. Load whenever the user asks for UI/UX work, "make it usable", flow audits, or accessibility passes.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Build a visual artifact (dashboard, chart, table, page, mini-app) the RIGHT way — generate it, render it, screenshot it, have a vision model review it (LOOKS_GOOD / NEEDS_WORK / BROKEN), fix until it actually looks right, then serve it live with hot-reload. Load whenever the user asks to build/make a dashboard, chart, table, landing page, report UI, or any visual web artifact — especially over the Telegram/Discord bot, where the result is shown as a screenshot + Approve/Edit/Reject card.
Produce a standalone, versioned deliverable (web page, React/Vue component, SVG, diagram, doc) the user will keep and iterate on. Use the built-in artifact_* tools — NOT write_file — so the artifact is versioned, undoable, and previewable in a real browser. Load whenever the user asks for "an artifact", "a file", "a mockup", "a component", a one-off page, a chart, or anything they'll take away and refine.
Senior advertising creative director, scriptwriter, and video editor. Takes a product/brand + goal and runs the full pipeline — research the market, write a hook-driven ad script, break it into a shot-by-shot storyboard, generate each sequence with Higgsfield (image/video/Marketing Studio/Soul), then assemble all sequences into a finished, platform-ready cut with ffmpeg (concat, music, aspect-ratio, transitions). Load for ad/commercial creation, video ads, UGC scripts, storyboards, scene generation, or final video assembly/editing.
Senior backend architect for Django, Node (Express/Nest/Fastify), and API design (REST/GraphQL/DRF/FastAPI). Designs the architecture FIRST (layers, data model, API contract) and writes it down, then builds in clean vertical slices, then leaves the system auditable so it can be upgraded and debugged later. Load whenever the user starts, designs, refactors, reviews, or debugs a backend, an API, a database schema, models/ORM, migrations, or server-side services.
Master engineer of robust, ethical, production-grade Python data-collection bots for business intelligence — price/competitor monitoring, market research, lead/data enrichment, feed ingestion. Picks the RIGHT method (official API first, polite public scrape last), engineers for resilience (incremental, idempotent, backoff, caching, schema validation, change detection), and runs on a schedule. Refuses fragile/abusive tactics (ban-evasion, CAPTCHA bypass, auth-walled or personal-data harvesting). Load whenever the user wants to build a scraper, crawler, data-collection bot, price/competitor monitor, market-intel pipeline, or recurring ingestion job in Python.
Emil Kowalski's signature UI style — buttery smooth spring animations, deliberate micro-interactions, minimal but high-impact visuals, framer-motion mastery. Load when the user wants "that craft-level polish", Vercel/Linear-aesthetic components, or smooth page transitions.
| name | ui-ux-pro-max |
| description | Deep UX audit playbook — accessibility (WCAG AA), state machines for every interactive component, microinteractions, responsive breakpoints, motion principles, and empty/error/loading states. Load whenever the user asks for UI/UX work, "make it usable", flow audits, or accessibility passes. |
| version | 0.1.0 |
| author | QodeX |
| triggers | ["ux","accessibility","a11y","wcag","usability","flow","states","empty state","microinteraction","دسترسیپذیری","رابط کاربری"] |
| slash-aliases | ["ux","uxpm"] |
| allowed-tools | ["read_file","write_file","edit_text","edit_symbol","multi_edit","multi_file_edit","ls","glob","grep","bash","detect_frontend_stack","analyze_design_system","find_ui_components","design_audit","browser_navigate","browser_screenshot","browser_get_text","browser_console"] |
This is the playbook the user installs when they care about UI/UX seriously. Run through the relevant phases in order — don't skip the audit and jump to changes.
Every interactive surface has these states. Make a table for the component you're about to touch:
| State | Visible elements | Source of truth |
|---|---|---|
| empty | "Nothing here yet" + CTA to seed | no data |
| loading | skeleton OR spinner — never blank | request in flight |
| partial | what you have + "loading more" | streaming/paged |
| populated | the happy path | normal |
| error | recovery action + cause | request failed |
| denied | why + how to gain access | auth/perms |
| offline | cached snapshot + "stale" marker | network down |
| disabled | reason + when it'll re-enable | feature-flag/perm |
Most bugs the user reports are missing states 1, 5, 6, 7. ALWAYS check all eight.
Run through this list for every change. Don't say "done" if any item fails.
<img> have alt. Decorative → alt="" + role="presentation".Tab. Logical order matches visual order.:focus-visible ring is custom, not the default browser blue (but never outline: none without a replacement).padding counts.Esc closes modals/menus.aria-live="polite") AND show inline next to the field.<html lang>. Switch dir/lang for RTL content (Persian/Arabic/Hebrew).<button> not <div role="button">.Cmd+F5, NVDA Insert+Q) at least on the changed component.A polished UI has motion that explains causality.
0.96 + fade. Background dim is oklch(0 0 0 / 0.5) with backdrop-filter: blur(8px).view-transitions API if available; otherwise prefers-reduced-motion-safe fades.Breakpoints (the only four you need):
sm: 640px tablet portrait
md: 768px tablet landscape
lg: 1024px small desktop
xl: 1280px wide desktop
2xl: 1536px cinematic
Stack desktop → tablet → mobile:
font-size: 16px minimum on iOS to prevent zoom.width/height attrs).JSON.parse and large list renders → defer to requestIdleCallback or move off main thread.If the user is in Iran/Persian-speaking, the UI may need RTL:
dir="auto" on text containers and :dir(rtl) selectors for RTL-specific tweaks.margin-inline-start, padding-inline-end — NOT margin-left/padding-right.Before declaring done:
design_audit.browser_screenshot at 360 / 768 / 1280.