AI-Native UX and Generative UI Design
Parent: Frontend Design · Published reference · snapshot 2026-09-08 · skill frontend-ui
Also known as: AI-Native UX & Generative UI Design for LLM Applications
↓ Facts as markdownall context files
The frontend, UI, and UX hub for designing and building user interfaces. This
These notes link each claim to its source. Some citations identify archived research reports that are no longer hosted on this site. A published reference means the content is available; it does not certify independent review or accuracy.Read the editorial policy and follow the sources before relying on a claim.
Frontend & UI/UX Expert
- The frontend, UI, and UX hub for designing and building user interfaces. This skill covers the full surface of frontend work: visual and interaction design (layouts, design systems, tokens, color, typography), markup and styling (HTML semantics, CSS layout), platform targets (responsive web and native mobile/iOS), implementation review of framework-free UIs, and accessibility/UX evaluation against the published standards. [archived source: https://llms-explorer.com/sources/mdb-context-hub/frontend-ui/#frontend-uiux-expert]
- Use it when the task is about designing or implementing a user interface rather than the underlying language mechanics, generic software patterns, or Chrome-extension-specific UI surfaces. For a single deep sub-area, match the routing table below and read the corresponding reference file before answering. [archived source: https://llms-explorer.com/sources/mdb-context-hub/frontend-ui/#frontend-uiux-expert]
How to use this skill
- This skill consolidates 9 frontend sub-skills as on-demand reference files. Match the task to the routing table below and Read the listed references/…md file before answering deep questions - the table alone is not enough for depth. For exact syntax, property, and platform-API details, defer to the official sources (HTML Living Standard, MDN, W3C WCAG 2.2, WAI-ARIA APG, Apple Human Interface Guidelines) as the source of truth. [archived source: https://llms-explorer.com/sources/mdb-context-hub/frontend-ui/#how-to-use-this-skill]
Sub-skill routing table
- This hub absorbs 9 former standalone skills as on-demand reference files. When a task matches a row, Read the listed references/ file before answering - do not rely on this table alone for depth. [archived source: https://llms-explorer.com/sources/mdb-context-hub/frontend-ui/#sub-skill-routing-table]
Cross-hub boundaries
- This hub owns frontend design, UI/UX, and interface implementation. Hand off when the task falls into a sibling hub: [archived source: https://llms-explorer.com/sources/mdb-context-hub/frontend-ui/#cross-hub-boundaries]
- Chrome-extension-specific UI - content scripts, shadow DOM injected into host pages, extension popup/options surfaces, MV3 UI plumbing → chrome-extension-expert. [archived source: https://llms-explorer.com/sources/mdb-context-hub/frontend-ui/#cross-hub-boundaries]
- JavaScript / TypeScript language specifics - syntax, language APIs, type systems, runtime semantics → programming-languages. [archived source: https://llms-explorer.com/sources/mdb-context-hub/frontend-ui/#cross-hub-boundaries]
- Language-agnostic software design patterns and architecture - generic design patterns, separation of concerns, structural patterns → software-engineering-patterns. [archived source: https://llms-explorer.com/sources/mdb-context-hub/frontend-ui/#cross-hub-boundaries]
- Some topics legitimately touch two hubs (e.g., a vanilla-JS UI review brushes against JS language mechanics, and an extension popup is still HTML/CSS). Lead with the hub that matches the user's intent - interface design and implementation intent stays here; language-mechanics or extension-runtime intent hands off. [archived source: https://llms-explorer.com/sources/mdb-context-hub/frontend-ui/#cross-hub-boundaries]
- Note: a separate plugin skill frontend-design:frontend-design also exists. This hub absorbs the top-level frontend-design skill (now references/frontend-design.md), not the plugin - invoke the plugin skill directly if that is what you need. [archived source: https://llms-explorer.com/sources/mdb-context-hub/frontend-ui/#cross-hub-boundaries]
- <!-- cross-hub-map --> [archived source: https://llms-explorer.com/sources/mdb-context-hub/frontend-ui/#cross-hub-boundaries]
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 routing table, it is a reference file under a sibling hub below - activate that hub or Read its references/<name>.md directly. Every former standalone skill in this family is now a reference under one of these hubs (nothing was deleted). [archived source: https://llms-explorer.com/sources/mdb-context-hub/frontend-ui/#cross-hub-map-where-every-frontend-topic-lives]
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)