enhance-capacitor-ui

Solid

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.

Web & Frontend 6 stars 0 forks Updated 3 days ago MIT

Install

View on GitHub

Quality Score: 81/100

Stars 20%

Recency 20%

100

Frontmatter 20%

Documentation 15%

100

Issue Health 10%

License 10%

100

Description 5%

100

Skill Content

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

Details

Author: kensaurus
Repository: kensaurus/cursor-kenji
Created: 5 months ago
Last Updated: 3 days ago
Language: JavaScript
License: MIT

Integrates with

Supabase · Cloud Next.js · Frontend Tailwind CSS · Frontend

Similar Skills

Semantically similar based on skill content — not just same category

Web & Frontend Listed

mobile-ui

Use when a ticket builds or reworks UI in a React Native / Expo (or React + Capacitor) mobile app and it must feel like a real, store-credible native app — not a wrapped mobile website. Covers the native-feel bar, safe-area/gesture/haptics, store-readiness, and mobile performance. Invoke for "make this screen feel native", "build the mobile X screen", "this feels like a website", "would this get approved", or as the mobile pack for any app-UI change.

0 Updated today

tmj-90

Web & Frontend Solid

design-mobile-first

Designs mobile-first responsive interfaces with touch optimization — breakpoint strategy, touch targets, safe areas, and gesture handling, enhanced progressively for larger screens. Use when the user mentions "mobile", "responsive", "touch", "PWA", "small screen", "tablet", "swipe", or "gesture", or when a UI looks desktop-only on a phone viewport.

6 Updated 3 days ago

kensaurus

Web & Frontend Listed

design-taste-frontend

Use for opinionated UI engineering standards: variance/motion/density baselines, component architecture rules, CSS hardware acceleration. Best for refining or auditing existing UI. NOT for greenfield builds (use frontend-design). NOT for design thinking (use qiaomu-design-advisor).

1 Updated 1 weeks ago

MARUCIE