From 6f6a9d0fb16e0ef921543bc01b649892804574ac Mon Sep 17 00:00:00 2001 From: codewithsunderdev Date: Sat, 28 Feb 2026 02:10:40 +0100 Subject: [PATCH] Add mobile-design skill for React Native / Expo Production-grade mobile UI design skill that applies standards from Airbnb, Uber, and Instagram. Includes 10 core design principles, anti-patterns list, component specs, and a pre-flight checklist. Covers: visual hierarchy, spacing (8px grid), typography, colors, bottom sheets, FlashList, keyboard handling, animations, empty states, and 16 reference image categories for organized inspiration. Co-Authored-By: Claude Opus 4.6 --- skills/mobile-design/LICENSE.txt | 177 +++++++++++++++++++++++++++++++ skills/mobile-design/SKILL.md | 153 ++++++++++++++++++++++++++ 2 files changed, 330 insertions(+) create mode 100644 skills/mobile-design/LICENSE.txt create mode 100644 skills/mobile-design/SKILL.md diff --git a/skills/mobile-design/LICENSE.txt b/skills/mobile-design/LICENSE.txt new file mode 100644 index 000000000..f433b1a53 --- /dev/null +++ b/skills/mobile-design/LICENSE.txt @@ -0,0 +1,177 @@ + + Apache License + Version 2.0, January 2004 + http://www.apache.org/licenses/ + + TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION + + 1. Definitions. + + "License" shall mean the terms and conditions for use, reproduction, + and distribution as defined by Sections 1 through 9 of this document. + + "Licensor" shall mean the copyright owner or entity authorized by + the copyright owner that is granting the License. + + "Legal Entity" shall mean the union of the acting entity and all + other entities that control, are controlled by, or are under common + control with that entity. For the purposes of this definition, + "control" means (i) the power, direct or indirect, to cause the + direction or management of such entity, whether by contract or + otherwise, or (ii) ownership of fifty percent (50%) or more of the + outstanding shares, or (iii) beneficial ownership of such entity. + + "You" (or "Your") shall mean an individual or Legal Entity + exercising permissions granted by this License. + + "Source" form shall mean the preferred form for making modifications, + including but not limited to software source code, documentation + source, and configuration files. + + "Object" form shall mean any form resulting from mechanical + transformation or translation of a Source form, including but + not limited to compiled object code, generated documentation, + and conversions to other media types. + + "Work" shall mean the work of authorship, whether in Source or + Object form, made available under the License, as indicated by a + copyright notice that is included in or attached to the work + (an example is provided in the Appendix below). + + "Derivative Works" shall mean any work, whether in Source or Object + form, that is based on (or derived from) the Work and for which the + editorial revisions, annotations, elaborations, or other modifications + represent, as a whole, an original work of authorship. For the purposes + of this License, Derivative Works shall not include works that remain + separable from, or merely link (or bind by name) to the interfaces of, + the Work and Derivative Works thereof. + + "Contribution" shall mean any work of authorship, including + the original version of the Work and any modifications or additions + to that Work or Derivative Works thereof, that is intentionally + submitted to Licensor for inclusion in the Work by the copyright owner + or by an individual or Legal Entity authorized to submit on behalf of + the copyright owner. For the purposes of this definition, "submitted" + means any form of electronic, verbal, or written communication sent + to the Licensor or its representatives, including but not limited to + communication on electronic mailing lists, source code control systems, + and issue tracking systems that are managed by, or on behalf of, the + Licensor for the purpose of discussing and improving the Work, but + excluding communication that is conspicuously marked or otherwise + designated in writing by the copyright owner as "Not a Contribution." + + "Contributor" shall mean Licensor and any individual or Legal Entity + on behalf of whom a Contribution has been received by Licensor and + subsequently incorporated within the Work. + + 2. Grant of Copyright License. Subject to the terms and conditions of + this License, each Contributor hereby grants to You a perpetual, + worldwide, non-exclusive, no-charge, royalty-free, irrevocable + copyright license to reproduce, prepare Derivative Works of, + publicly display, publicly perform, sublicense, and distribute the + Work and such Derivative Works in Source or Object form. + + 3. Grant of Patent License. Subject to the terms and conditions of + this License, each Contributor hereby grants to You a perpetual, + worldwide, non-exclusive, no-charge, royalty-free, irrevocable + (except as stated in this section) patent license to make, have made, + use, offer to sell, sell, import, and otherwise transfer the Work, + where such license applies only to those patent claims licensable + by such Contributor that are necessarily infringed by their + Contribution(s) alone or by combination of their Contribution(s) + with the Work to which such Contribution(s) was submitted. If You + institute patent litigation against any entity (including a + cross-claim or counterclaim in a lawsuit) alleging that the Work + or a Contribution incorporated within the Work constitutes direct + or contributory patent infringement, then any patent licenses + granted to You under this License for that Work shall terminate + as of the date such litigation is filed. + + 4. Redistribution. You may reproduce and distribute copies of the + Work or Derivative Works thereof in any medium, with or without + modifications, and in Source or Object form, provided that You + meet the following conditions: + + (a) You must give any other recipients of the Work or + Derivative Works a copy of this License; and + + (b) You must cause any modified files to carry prominent notices + stating that You changed the files; and + + (c) You must retain, in the Source form of any Derivative Works + that You distribute, all copyright, patent, trademark, and + attribution notices from the Source form of the Work, + excluding those notices that do not pertain to any part of + the Derivative Works; and + + (d) If the Work includes a "NOTICE" text file as part of its + distribution, then any Derivative Works that You distribute must + include a readable copy of the attribution notices contained + within such NOTICE file, excluding those notices that do not + pertain to any part of the Derivative Works, in at least one + of the following places: within a NOTICE text file distributed + as part of the Derivative Works; within the Source form or + documentation, if provided along with the Derivative Works; or, + within a display generated by the Derivative Works, if and + wherever such third-party notices normally appear. The contents + of the NOTICE file are for informational purposes only and + do not modify the License. You may add Your own attribution + notices within Derivative Works that You distribute, alongside + or as an addendum to the NOTICE text from the Work, provided + that such additional attribution notices cannot be construed + as modifying the License. + + You may add Your own copyright statement to Your modifications and + may provide additional or different license terms and conditions + for use, reproduction, or distribution of Your modifications, or + for any such Derivative Works as a whole, provided Your use, + reproduction, and distribution of the Work otherwise complies with + the conditions stated in this License. + + 5. Submission of Contributions. Unless You explicitly state otherwise, + any Contribution intentionally submitted for inclusion in the Work + by You to the Licensor shall be under the terms and conditions of + this License, without any additional terms or conditions. + Notwithstanding the above, nothing herein shall supersede or modify + the terms of any separate license agreement you may have executed + with Licensor regarding such Contributions. + + 6. Trademarks. This License does not grant permission to use the trade + names, trademarks, service marks, or product names of the Licensor, + except as required for reasonable and customary use in describing the + origin of the Work and reproducing the content of the NOTICE file. + + 7. Disclaimer of Warranty. Unless required by applicable law or + agreed to in writing, Licensor provides the Work (and each + Contributor provides its Contributions) on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or + implied, including, without limitation, any warranties or conditions + of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A + PARTICULAR PURPOSE. You are solely responsible for determining the + appropriateness of using or redistributing the Work and assume any + risks associated with Your exercise of permissions under this License. + + 8. Limitation of Liability. In no event and under no legal theory, + whether in tort (including negligence), contract, or otherwise, + unless required by applicable law (such as deliberate and grossly + negligent acts) or agreed to in writing, shall any Contributor be + liable to You for damages, including any direct, indirect, special, + incidental, or consequential damages of any character arising as a + result of this License or out of the use or inability to use the + Work (including but not limited to damages for loss of goodwill, + work stoppage, computer failure or malfunction, or any and all + other commercial damages or losses), even if such Contributor + has been advised of the possibility of such damages. + + 9. Accepting Warranty or Additional Liability. While redistributing + the Work or Derivative Works thereof, You may choose to offer, + and charge a fee for, acceptance of support, warranty, indemnity, + or other liability obligations and/or rights consistent with this + License. However, in accepting such obligations, You may act only + on Your own behalf and on Your sole responsibility, not on behalf + of any other Contributor, and only if You agree to indemnify, + defend, and hold each Contributor harmless for any liability + incurred by, or claims asserted against, such Contributor by reason + of your accepting any such warranty or additional liability. + + END OF TERMS AND CONDITIONS diff --git a/skills/mobile-design/SKILL.md b/skills/mobile-design/SKILL.md new file mode 100644 index 000000000..48b693e4d --- /dev/null +++ b/skills/mobile-design/SKILL.md @@ -0,0 +1,153 @@ +--- +name: mobile-design +description: Design and implementation of production-grade mobile interfaces for React Native / Expo. Applies design standards from top apps (Airbnb, Uber, Instagram). Use this skill for any mobile screen, component, or flow. Ensures clean, modern, organized and professional design. +--- + +# Mobile Design Skill + +This skill guides the creation of React Native / Expo mobile interfaces at the level of the best apps on the market (Airbnb, Uber, Instagram). Every screen should look like it was designed by a senior design team, not by an AI. + +## Design reference priorities + +By priority order of inspiration: +1. **Airbnb** — primary reference. Clean, airy, perfect visual hierarchy +2. **Uber** — efficiency, clarity, bottom sheets, transactional flows +3. **Instagram** — fluid navigation, immersive feed, polished transitions + +### Reference images +**IMPORTANT**: Before starting any new mobile screen or component, check the reference screenshots in `~/.claude/skills/mobile-design/references/`. These images show the expected quality level. Use the Read tool to view them. + +The `references/` directory is organized by screen type. Add your own screenshots from apps you admire (Mobbin.com is a great source): + +| Folder | What to put in it | +|---|---| +| `references/onboarding/` | Splash screens, welcome, onboarding slides | +| `references/auth/` | Login, phone input, country picker, OTP, signup | +| `references/home-search/` | Home feed, search bar, suggestions | +| `references/search-results/` | Search results, filters, list + map views | +| `references/listing-detail/` | Item detail pages (top section, photos, info) | +| `references/detail-page/` | Immersive detail pages, recap bottom sheets | +| `references/pricing/` | Plans, subscriptions, plan selection | +| `references/payment/` | Checkout, payment methods, confirmations, receipts | +| `references/profile/` | User profile, stats, progression, membership | +| `references/settings/` | Account menu, preferences, settings lists | +| `references/messaging/` | Chat, DM, chatbot, messaging | +| `references/notifications/` | Notification center, badges, alerts | +| `references/empty-states/` | Empty states, no results, empty lists | +| `references/forms/` | Multi-step forms, wizards, filters, upload | +| `references/map/` | Map views, pins, navigation, map bottom sheets | +| `references/content-feed/` | Content feed, cards, explore sections | + +**Which refs to check based on the screen you're building:** +| Screen type | Folder(s) to check | +|---|---| +| Onboarding / Welcome | `onboarding/` | +| Login / Signup / OTP | `auth/` | +| Home / Search | `home-search/` | +| Search results | `search-results/` | +| Item / listing detail | `listing-detail/`, `detail-page/` | +| Booking / Pricing | `pricing/` | +| Payment / Checkout | `payment/` | +| User profile | `profile/` | +| Settings / Account | `settings/` | +| Messaging / Chat | `messaging/` | +| Notifications | `notifications/` | +| Empty / Error states | `empty-states/` | +| Forms / Wizards | `forms/` | +| Map | `map/` | +| Lists / Feed | `content-feed/`, `home-search/` | + +To add references: place images in the appropriate subfolder of `references/`. + +## Core principles + +### 1. Strict visual hierarchy +- **One dominant element per screen**: title OR image OR CTA — never all at once +- **Consistent text sizes**: title (20-24px bold), subtitle (16-18px medium), body (14-15px regular), caption (12px regular) +- **Systematic spacing**: use a 4px or 8px grid. No arbitrary spacing +- **Logical grouping**: related elements are close together, distinct groups are separated by whitespace or a thin divider + +### 2. Clean and organized +- **No clutter**: every element on screen has a purpose. If it's decorative without function, remove it +- **No unnecessary icons**: plain text > decorative icon. Icons only for navigation and obvious actions +- **Perfect alignment**: all elements aligned on a grid. No 1-2px misalignments +- **Consistent margins**: horizontal padding 16-20px on all screens, never variable + +### 3. Native and modern components +- **Bottom sheets** (not centered modals): all modals = bottom sheets with handle bar, swipe down, backdrop tap +- **Buttons**: height 48-50px for main CTAs, border-radius 8-12px, never square corners. Secondary buttons = outline or ghost +- **Inputs**: height 48-50px, border 1px #E0E0E0, border-radius 8-12px, focus state with primary border. Label above (no floating label unless relevant) +- **Cards**: border-radius 12-16px, subtle shadow (shadowOpacity 0.08, shadowRadius 8), or border 1px #F0F0F0 +- **Chips/Tags**: border-radius full (999px), horizontal padding 12-16px, height 32-36px + +### 4. Colors and contrast +- **Main background**: white (#FFFFFF) or very light gray (#FAFAFA / #F7F7F7) +- **Primary text**: #222222 or #333333 (never pure black #000000) +- **Secondary text**: #717171 (like Airbnb) or #666666 +- **Dividers**: #EBEBEB or #F0F0F0 (very subtle, never heavy) +- **Primary color**: use the project's primary color. Use it sparingly: main CTA, active elements, accents. Not everywhere +- **States**: success #008A05, error #C13515, warning #E8A100 + +### 5. Typography +- **Font**: use the project's defined font with weights: Regular (400), Medium (500), SemiBold (600), Bold (700) +- **No ALL CAPS text** except for very small labels/badges +- **Line height**: 1.4x text size for body, 1.2x for titles +- **No orphan text**: a single word on the last line of a paragraph = rephrase or adjust + +### 6. Images and media +- **Consistent ratio**: 3:2 or 4:3 for listing cards, 1:1 for avatars +- **Border-radius**: 12-16px on card images, full circle for avatars +- **Placeholder**: skeleton shimmer during loading, never an empty space +- **Image pagination**: segmented bar (not dots), same style everywhere + +### 7. Navigation and structure +- **Bottom tabs**: 5 max, simple icons + labels, active indicator = primary color +- **Headers**: simple and functional. Title centered or left-aligned, back arrow on left, actions on right +- **StatusBar**: always consistent with header (white header → dark-content, dark header → light-content) +- **Safe areas**: respect notches and home indicators on ALL screens + +### 8. Lists and scroll +- **FlashList required** (never FlatList) for any scrollable list +- **Pull-to-refresh**: on all data lists +- **Empty state**: illustration or clear message when a list is empty, never a blank screen +- **Loading**: skeleton shimmer, never a centered spinner alone + +### 9. Forms +- **KeyboardAvoidingView + ScrollView**: required on ALL forms. Never hide a field behind the keyboard +- **Validation**: error messages below each field in red (#C13515), 12px text +- **Submit button**: always visible, sticky at bottom of screen or after the last field +- **Input states**: default, focused (primary border), error (red border), disabled (opacity 0.5) + +### 10. Animations and transitions +- **Subtle and functional**: animations serve UX, not decoration +- **Screen transitions**: use React Navigation native transitions (slide, modal) +- **Micro-interactions**: tactile feedback on buttons (opacity 0.7 on press), like/save animations +- **Duration**: 200-300ms for micro-interactions, 300-500ms for screen transitions +- **No excessive bounce**: fluid animations, no cartoon-like rebounds + +## Anti-patterns to ABSOLUTELY avoid + +- **No thick borders** (> 1px) on cards or inputs +- **No heavy shadows** (shadowOpacity > 0.15) +- **No irregular spacing** between sections +- **No centered text by default** — left-align except for CTAs and page titles +- **No bright colors everywhere** — primary color is an accent, not a background +- **No floating components** without spatial context +- **No ScrollView for long lists** — always FlashList +- **No overcrowded screens** — if a screen has too many elements, split into scrollable sections +- **No system fonts** or generic fonts — always use the project's defined font +- **No native alert() or confirm()** — always bottom sheets or toasts +- **No blocking loaders** (full screen) except on first load — prefer skeletons + +## Checklist before delivering a screen + +1. [ ] Spacing follows an 8px grid +2. [ ] Visual hierarchy is clear (one element dominates) +3. [ ] Colors follow the system (primary as accent only) +4. [ ] Text uses the correct font with proper weights +5. [ ] Keyboard doesn't hide any field +6. [ ] Lists use FlashList +7. [ ] Empty/loading/error states are handled +8. [ ] StatusBar matches the header +9. [ ] Safe areas are respected +10. [ ] The screen looks like an Airbnb/Uber app, not a prototype