enhance-capacitor-uilisted

Cross-surface UIUX separation skill for hybrid web apps that ship as PWA + iOS + Android via Capacitor (or Tauri / Expo Web / Ionic / RN-Web). Use when a previous UI/UX sweep "improved one surface and broke the other" — desktop polished but mobile cramped, or mobile native but desktop wastes space. Also use when the project has ad-hoc useIsMobile / isNative branches scattered across components, a single md: breakpoint doing double duty as "is desktop" and "wider slot", or per-component platform styling instead of mode tokens. Establishes three orthogonal axes — form factor (compact/medium/expanded), platform (web/ios/android), pointer (fine/coarse) — and a three-layer architecture (context hook, mode tokens, container-query primitives) so one sweep can enhance one axis without degrading the others. Catches axis conflation in a single boolean, hover-only affordances on native shells, and SSR/Capacitor first-paint mismatch. For pure visual polish on a single surface, use enhance-web-ui first.
kensaurus/cursor-kenji · ★ 4 · Web & Frontend · score 80

Install: claude install-skill kensaurus/cursor-kenji

> ### Which enhance skill? (surface router) > > | Your surface | Use | > |:-------------|:----| > | **Web** product page / dashboard — composition, hierarchy, spacing, motion | `enhance-web-ui` | > | **Web** product page — UX heuristics, flows, data wiring | `enhance-web-ux` | > | **Web** landing / marketing / portfolio (greenfield, anti-slop) | `enhance-web-landing` | > | **Web** existing site upgrade (audit-first, preserve behavior) | `enhance-web-redesign` | > | **Web** 3D / WebGL / cinematic scroll on an existing site (audit-first) | `enhance-web-web3d` | > | **React Native** screen (Expo / bare) | `mobile-rn-screen` | > | **Capacitor / hybrid** shell (one web app shipped to iOS + Android) | `enhance-capacitor-ui` (axis architecture first) → then the web or rn skill | > | Repo **README** showcase | `enhance-readme` | > > **You are here: `enhance-capacitor-ui`.** Native iOS/Android (SwiftUI / Compose, no web layer) is out of scope for all of these — use Apple HIG / Material directly. # Enhance Web ↔ Mobile UI Separate the mobile and desktop design contracts of a hybrid app so that a UIUX sweep on one surface cannot silently degrade the other. This is not a "add a `useIsMobile` hook" skill. It establishes three orthogonal axes, one source of truth, mode tokens, container-query primitives, and a chrome allow-list — so per-form-factor / per-platform polish is a predictable, reviewable change instead of a regression. > **Vague-but-visceral cross-surface feedback ("looks gre