mobile-parity

Featured

Ensures Kandev UI work uses native mobile interaction patterns instead of compressed desktop adaptations while preserving desktop/mobile capability parity, responsive behavior, and mobile Playwright E2E coverage. Use when implementing, planning, reviewing, or testing any new feature, page, component, workflow, form, dialog, sidebar, navigation, dashboard, or visual UI change; if work touches frontend or user-facing UI, this skill must run even when user mentions only desktop or says "new feature".

AI & Automation 843 stars 132 forks Updated today AGPL-3.0

Install

View on GitHub

Quality Score: 88/100

Stars 20%
97
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
50
License 10%
100
Description 5%
100

Skill Content

# Mobile Parity Use this skill before planning or changing UI. Goal: desktop and mobile deliver the same user value, while each viewport gets an intentional composition and tests prove the mobile path. Before proposing a mobile design, read [Kandev Mobile UI Language](references/kandev-mobile-ui-language.md) and inspect the closest shipped mobile surface. Responsive CSS alone does not establish mobile parity. For buttons, single-line inputs, selectors, or control-size audits, also read [Control sizing](references/control-sizing.md). It defines desktop sizes, touch exceptions, and the sweep procedure. ## When It Applies Apply when task changes user-facing UI: - new or changed pages, routes, components, forms, dialogs, drawers, navigation, dashboards, tables, cards, toolbars, editors, settings, onboarding, or visual states - new frontend behavior attached to backend/API work - bug fixes where layout, touch behavior, scrolling, or viewport width can affect success If task has no UI surface, say why this skill does not apply and continue. ## Specification ownership When the task uses durable specifications, put mobile outcomes in the system that owns the feature contract. Do not create a second UI requirement or design only because the feature needs a phone surface. Use the UI system only for an independent reusable interaction contract. Keep the mobile composition in the owning feature design with its backend and desktop boundaries. Link to an existing UI contract when...

Details

Author
kdlbs
Repository
kdlbs/kandev
Created
8 months ago
Last Updated
today
Language
Go
License
AGPL-3.0

Integrates with

Similar Skills

Semantically similar based on skill content — not just same category

Web & Frontend Listed

mobile

Mobile adaptation with hardened rules from real production iterations. Uniform scale factor, preserve composition, no JS→scroll-snap swap, iOS ?v=N cache-bust, text nowrap in collapsed cards. Ends with a headless-browser safety check (text overflow, safe paddings, no horizontal scroll, tap-target sizes) across 320/375/390/414/480/768. Runs only when priority=desktop-first.

2 Updated 1 months ago
dkadts
Web & Frontend Listed

mobile-native

Make a web app feel native on a phone — the small CSS and meta-tag fixes that separate "a website in a browser" from something that feels installed. Covers sticky hover states, tap highlight flashes, the 100vh bug, inputs that zoom the page, laggy taps, pull-to-refresh hijacking scroll, content under the notch, long-press selecting button text, carousels that scroll the wrong way, mismatched status bars, and the rule that you test on real hardware. Use when a web app is being built for or reviewed on mobile, when something "works in Chrome but feels wrong on my phone", when building a PWA, a bottom sheet, a carousel, a full-screen layout, or any touch interaction. For motion itself use animate; for React Native use animate-expo.

1 Updated today
JaimeJunr
Testing & QA Listed

pw-mobile-tester

Sets up Playwright mobile/responsive web testing — device emulation across real device descriptors, touch/gesture interactions, breakpoint and orientation coverage, network throttling, geolocation, and mobile-specific accessibility (touch target size). Use when an SDET says "test this on mobile", "check the responsive breakpoints", "simulate a swipe/tap", "test under slow 3G", or "test geolocation on a phone". Applies only when the application actually has a responsive/mobile web UI to test — produces device-project config and test drafts the engineer runs against the real app.

1 Updated 1 weeks ago
Shivani26Singh