AI-Native UX and Generative UI Design
Parent: Frontend Design · researched 2026-06-01T02:26:18.002Z· 24 sources · 7 concepts · skill frontend-ui
The frontend, UI, and UX hub for designing and building user interfaces. This
Frontend & UI/UX Expert
- The frontend, UI, and UX hub for designing and building user interfaces. This [source]
- skill covers the full surface of frontend work: visual and interaction design [source]
- (layouts, design systems, tokens, color, typography), markup and styling [source]
- (HTML semantics, CSS layout), platform targets (responsive web and native [source]
- mobile/iOS), implementation review of framework-free UIs, and [source]
- accessibility/UX evaluation against the published standards. [source]
- Use it when the task is about designing or implementing a user interface rather [source]
- than the underlying language mechanics, generic software patterns, or [source]
- Chrome-extension-specific UI surfaces. For a single deep sub-area, match the [source]
- routing table below and read the corresponding reference file before answering. [source]
How to use this skill
- This skill consolidates 9 frontend sub-skills as on-demand reference files. [source]
- Match the task to the routing table below and **Read the listed [source]
- references/…md file before answering deep questions** - the table alone is not [source]
- enough for depth. For exact syntax, property, and platform-API details, defer to [source]
- the official sources (HTML Living Standard, MDN, W3C WCAG 2.2, WAI-ARIA APG, [source]
- Apple Human Interface Guidelines) as the source of truth. [source]
Sub-skill routing table
Cross-hub boundaries
- This hub owns frontend design, UI/UX, and interface implementation. Hand off [source]
- when the task falls into a sibling hub: [source]
- Chrome-extension-specific UI - content scripts, shadow DOM injected into [source]
- host pages, extension popup/options surfaces, MV3 UI plumbing → [source]
- chrome-extension-expert. [source]
- JavaScript / TypeScript language specifics - syntax, language APIs, type [source]
- systems, runtime semantics → programming-languages. [source]
- Language-agnostic software design patterns and architecture - generic [source]
- design patterns, separation of concerns, structural patterns → [source]
- software-engineering-patterns. [source]
- Some topics legitimately touch two hubs (e.g., a vanilla-JS UI review brushes [source]
- against JS language mechanics, and an extension popup is still HTML/CSS). Lead [source]
- with the hub that matches the user's intent - interface design and [source]
- implementation intent stays here; language-mechanics or extension-runtime intent [source]
- Note: a separate plugin skill frontend-design:frontend-design also exists. [source]
- This hub absorbs the top-level frontend-design skill (now [source]
- references/frontend-design.md), not the plugin - invoke the plugin skill [source]
- directly if that is what you need. [source]
- <!-- cross-hub-map --> [source]
Cross-hub map — where every frontend topic lives
- This family is split across these hubs. If a task's deep material is not in this hub's Sub-skill [source]
- routing table, it is a reference file under a sibling hub below - **activate that hub or Read its [source]
- references/<name>.md directly**. Every former standalone skill in this family is now a reference under one [source]
- of these hubs (nothing was deleted). [source]
Children
- Streaming UX (TTFT, markdown buffering, smooth streaming, a11y) (frontier)
- Generative UI (Vercel AI SDK useChat/streamObject, typed parts, paused RSC, Thesys C1/OpenUI) (frontier)
- Latency masking & perceived performance (frontier)
- Trust & calibration UI (citations, confidence cascades, reasoning-trace caveat) (frontier)
- Refusal/error/fallback UX (PAIR taxonomy) (frontier)
- Human-AI steering & feedback affordances (frontier)
- Governing frameworks (Microsoft HAX 18, Google PAIR, Apple HIG, Shape of AI) (frontier)
Frontier under this node: Generative UI (Vercel AI SDK useChat/streamObject, typed parts, paused RSC, Thesys C1/OpenUI), Governing frameworks (Microsoft HAX 18, Google PAIR, Apple HIG, Shape of AI), Human-AI steering & feedback affordances, Latency masking & perceived performance, Refusal/error/fallback UX (PAIR taxonomy), Streaming UX (TTFT, markdown buffering, smooth streaming, a11y), Trust & calibration UI (citations, confidence cascades, reasoning-trace caveat)