AI-Native UX and Generative UI Design

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.

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.

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.

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.

Sub-topic When to load Reference file
accessibility-ux-reviewer Accessibility and UX review against WCAG 2.2, the WAI-ARIA Authoring Practices Guide, and MDN references/accessibility-ux-reviewer.md
ai-native-ux-generative-ui AI-native UX & generative UI — the interface/interaction layer of LLM apps: streaming UX (TTFT, markdown buffering, smooth streaming, a11y), generative UI (Vercel AI SDK useChat/streamObject typed parts, the paused RSC path, Thesys C1/OpenUI), latency masking, trust/calibration UI (claim-adjacent citations, confidence cascades, the reasoning-trace caveat), refusal/error UX (PAIR taxonomy), human-AI steering & feedback, and the four governing frameworks (Microsoft HAX 18 Guidelines, Google PAIR, Apple Generative AI HIG, Shape of AI). Backend/model/agent layers → ai-agent-engineering; generic visual design → web-design / ui-ux-pro-max; the trust psychology → applied-psychology. references/ai-native-ux-generative-ui.md
frontend-design Production-grade frontend engineering: design systems and tokens, component architecture references/frontend-design.md
frontend-design-ui-ux-expert DEPRECATED — use frontend-design instead; this content was merged into the enriched frontend-design reference references/frontend-design-ui-ux-expert.md
html-css HTML (Living Standard) and CSS expert reference for markup structure, semantics, layout, and styling references/html-css.md
mobile-ios-design iOS Human Interface Guidelines and SwiftUI patterns for building native iOS and iPadOS apps references/mobile-ios-design.md
ui-ux-pro-max UI/UX design intelligence for web and mobile: 50+ styles, 161 color palettes, 57 font pairings references/ui-ux-pro-max.md
visual-design-principles-and-critique Visual-design critique RUBRIC — when the task is to evaluate/critique a graphic/brand asset or UI screen (not produce one). Named visual-design principles (visual hierarchy, gestalt grouping, C.R.A.P., balance, emphasis/focal point, white space, scale & proportion/modular scale, unity/variety/rhythm, Z/F/Gutenberg scanning patterns) each as Detect a violation → Rate severity (Nielsen 0–4) → Fix. For producing a design → web-design / ui-ux-pro-max; Nielsen’s 10 usability heuristics + Laws of UX as the lens → usability-heuristics-laws-of-ux; accessibility-only → accessibility-ux-reviewer; prompting a VLM to critique a screenshot → ai-mcp-sdk-prompting. references/visual-design-principles-and-critique.md
micro-typography-craft Editorial micro-typography & type-craft defect catalog (the typography-pass depth layer for the visual-design-critique family) — the nameable, screenshot-detectable type-craft problems a critique should catch, each as DETECT (on-screen tell) → RATE (Blocker→Nit) → FIX (+ CSS/InDesign control): widows/orphans/runts & stranded subheads; ragged-edge (rag) quality, rivers, bad line breaks; kerning/tracking/letter-spacing (“keming”, all-caps tracking, display kerning); leading/line-height, vertical rhythm & baseline-grid alignment; measure (CPL ~45–75); hyphenation & justification (H&J) & justified-text gaps; hanging punctuation & optical margin alignment, optical vs metric kerning, optical sizing (opsz); correct glyphs (curly vs straight quotes, en/em dashes, real vs faux small caps, old-style/lining/tabular figures, ligatures, true vs faux bold/italic, ×/…/primes, proper fractions); and “type crimes” (stretched/condensed faux styles, ransom-note font mixing, centered body, underline-for-emphasis, all-caps passages). The high-level typographic-scale/measure/line-height rubric → visual-design-principles-and-critique (P2); how to run a crit → visual-design-critique-methodology; WCAG contrast/numeric a11y → computational-aesthetics-ui-metrics; choosing fonts/styles for a NEW design → ui-ux-pro-max / web-design. references/micro-typography-craft.md
visual-design-critique-methodology Design-critique METHODOLOGY (companion to the rubric above) — how to run and give a design critique: structured formats (I-Like-I-Wish-What-If, Describe/Interpret/Evaluate, Rose/Bud/Thorn, design studio/charrette), Connor & Irizarry Discussing Design, critique-vs-feedback-vs-review, observation-before-judgment, actionable-non-prescriptive feedback, severity & design QA / spec-parity, running a crit (objectives up front, sync vs async, closing the loop), and crit anti-patterns (compliment sandwich, HiPPO, bikeshedding, design-by-committee, vague praise). The principles themselves → visual-design-principles-and-critique; heuristic eval / Laws of UX → usability-heuristics-laws-of-ux. references/visual-design-critique-methodology.md
emotional-design-and-visual-trust Affective / emotional-resonance & visual-trust critique axis — when the task is to judge whether a design feels right, trustworthy, and on-tone at first glance (the subjective-emotional complement to the principles/heuristics references). Norman’s visceral/behavioral/reflective levels applied to evaluating an asset; the first-impression aesthetic judgment + halo effect + aesthetic→perceived-trust pathway (Lindgaard, Reinecke); Stanford/Fogg web credibility (the 10 guidelines, “design look = the most-mentioned credibility factor”, prominence-interpretation, surface credibility, trust signals that build vs erode); brand personality from type/color/imagery/shape (Aaker’s five dimensions, warmth×competence) and the emotional-tone audit; and the critique pass (5-second / squint first-glance tests, an affective audit, severity rating reframed for trust defects, a fix vocabulary, composition with other lenses, anti-patterns). The aesthetic-usability effect itself → usability-heuristics-laws-of-ux; visual-composition principles → visual-design-principles-and-critique; how to run a crit → visual-design-critique-methodology; objective metrics → computational-aesthetics-ui-metrics; WCAG → accessibility-ux-reviewer; general trust/emotion psychology (Mayer ABI, emotion regulation) → applied-psychology. references/emotional-design-and-visual-trust.md
usability-heuristics-laws-of-ux Usability heuristic evaluation + Laws of UX as a critique instrument — Nielsen’s 10 usability heuristics (each with detection signals and fixes), the heuristic-evaluation method (evaluator process, the verbatim 0–4 severity scale, 3–5 evaluators + the 1−(1−λ)^n discovery formula, aggregation/prioritization, heuristic evaluation vs usability testing), and the Laws of UX (Yablonski/lawsofux.com — Hick, Fitts, Jakob, Miller, Tesler, Postel, Doherty, Aesthetic-Usability, Von Restorff, Serial Position, Peak-End, Zeigarnik, + the Gestalt grouping laws) with each law’s concrete UI implication. Load for a detection→severity→fix critique pass. General UX guidance → ui-ux-pro-max; WCAG → accessibility-ux-reviewer. references/usability-heuristics-laws-of-ux.md
deceptive-design-and-dark-patterns Design-ETHICS critique axis — the is-this-honest? lens (complement to the is-this-good? critique references). When the task is to audit/critique a UI, mockup, flow, or spec for deceptive, manipulative, or coercive patterns and their 2024-26 legal exposure: the named taxonomies (Brignull/deceptive.design 16 types; Gray et al. — nagging, obstruction, sneaking, interface interference, forced action; Mathur et al. — urgency, scarcity, social proof, misdirection, sneaking, obstruction, forced action; the 6 “dark” attributes); the high-risk flows (sign-up, consent/cookie banners, subscription & cancellation, checkout, defaults); and the regulatory layer (EU DSA Art. 25 + EDPB, GDPR consent & CNIL cookie rules, FTC “Bringing Dark Patterns to Light” + Negative Option/click-to-cancel, CCPA/CPRA + state clauses) — each as DETECT (UI tell) → RATE (harm + compliance risk) → FIX (honest pattern). The honest twin (persuasion + heuristics/Laws of UX) → usability-heuristics-laws-of-ux; the trust consequence → emotional-design-and-visual-trust; WCAG → accessibility-ux-reviewer; persuasion/nudge psychology → applied-psychology; drafting honest copy → content-and-marketing-writing. references/deceptive-design-and-dark-patterns.md
computational-aesthetics-ui-metrics OBJECTIVE / quantitative scoring layer (the measurement complement to the three subjective critique references above) — machine-computable metrics that feed, but never replace, a human/LLM critique. Image-statistic aesthetic metrics (Hasler-Süsstrunk colourfulness, colour harmony, visual complexity, Rosenholtz feature-congestion / edge-density clutter, symmetry), the Aalto Interface Metrics (AIM) toolkit + the computational-aesthetics-of-UI research line (Reinecke, Miniukovich & De Angeli, Ngo), layout / grid / white-space metrics, visual saliency / attention prediction (Itti-Koch, the AUC/NSS/CC/SIM metric zoo, UMSI & UEyes, predictive-attention tools), and automated accessibility checkers as objective signals (axe-core, Lighthouse a11y score, programmatic WCAG contrast-ratio, target-size 2.5.8, APCA). Carries the load-bearing caveat: these correlate only weakly-to-moderately with human aesthetic judgment (~48–49% web / ~32% mobile variance explained) — flag candidates and quantify deltas, never rank or auto-score. Subjective principles/rubric → visual-design-principles-and-critique; WCAG compliance review → accessibility-ux-reviewer; prompting a VLM to critique a screenshot → ai-mcp-sdk-prompting. references/computational-aesthetics-ui-metrics.md
vanilla-js-ui-reviewer Practical review reference for large plain-JavaScript UIs that manage DOM, events, focus, state, and accessibility without a framework references/vanilla-js-ui-reviewer.md
web-design Senior web graphic designer for interfaces, layouts, and visual systems references/web-design.md
react-nextjs React 19 and Next.js 15+ expert reference. references/react-nextjs.md

Cross-hub boundaries

This hub owns frontend design, UI/UX, and interface implementation. Hand off when the task falls into a sibling hub:

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.

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.

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).

Hub Owns Example reference files
frontend-ui Frontend & UI/UX (design, HTML/CSS, web/mobile, accessibility reviews) references/accessibility-ux-reviewer.md, references/frontend-design.md, references/frontend-design-ui-ux-expert.md, references/html-css.md, …