菜单
Web performance as a UX constraint — Core Web Vitals (LCP, INP, CLS) and the RAIL model with perception-keyed budgets. Use when setting performance budgets, diagnosing slow or janky pages, deciding what to optimize, or tying performance work to human-perception thresholds.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Accessibility foundations for design engineers — WCAG / POUR, semantic-HTML-first then ARIA, keyboard and focus management, inclusive design for permanent/temporary/situational constraints. Use when building or reviewing any interactive UI, adding ARIA, implementing modals/menus/forms, or auditing keyboard operability and focus order.
AI-native design engineering patterns — generative/adaptive UI, streaming as interaction, prompt-as-interface, human-in-the-loop / agentic UX, eval-driven development, designing for uncertainty, latency and cost as design constraints. Use when designing any AI/LLM-powered feature, building agentic or chat UX, handling streaming/probabilistic output, or planning for model error and cost.
Cognitive Load Theory for interfaces — intrinsic (task difficulty), extraneous (poor-design overhead), and germane (useful mental-model building) load. Use when a screen feels overwhelming, deciding what to simplify vs preserve, chunking complex flows, or diagnosing whether friction comes from the task or the design.
Foundational design-engineering principles that govern where complexity lives and how interfaces stay fast and consistent — Tesler's Law, progressive disclosure, progressive enhancement, recognition over recall, optimistic UI, perceived performance, single source of truth, constraints as a feature. Use when deciding system architecture vs UI exposure, reducing user-facing complexity, choosing what to render/reveal, or justifying a constraint-driven system.
CSS and styling architecture — scaling methodologies (BEM, ITCSS, CUBE CSS) and fluid/responsive technique (mobile-first, clamp() fluid type/space, container queries for component-level responsiveness). Use when structuring stylesheets at scale, choosing a CSS methodology, building responsive layouts, or deciding between media queries and container queries.
Design system depth beyond "tokens are data" — three-tier token architecture (primitive → semantic → component), W3C DTCG format and tooling, scales as systems, component API design, headless/unstyled primitives, documentation as product, governance and versioning. Use when architecting a design system, structuring tokens, designing component APIs, choosing headless primitives, or setting up contribution/versioning.
| name | dec-web-performance |
| description | Web performance as a UX constraint — Core Web Vitals (LCP, INP, CLS) and the RAIL model with perception-keyed budgets. Use when setting performance budgets, diagnosing slow or janky pages, deciding what to optimize, or tying performance work to human-perception thresholds. |
| tags | ["performance","core-web-vitals","rail","ux","always-on"] |
Performance is a UX problem with measurable, perception-keyed budgets.
transform/opacity to hold 60fps (see FLIP in dec-motion-animation).