ui-craftlisted

Make a mobile UI look and feel like a shipped app. Rules with numbers, screen recipes, a fast screenshot review and lessons from a real redesign, grounded in 2,600 iOS screens from 44 apps (Spotify, Airbnb, Instagram, Apple Music, Halide, Notion…). Use before designing or restyling any mobile screen (React Native, Expo, SwiftUI, Flutter, mobile web), when reviewing screenshots for "does this look like a real app", or when you need a reference for a pattern (feed, player, editor, sheet, paywall, settings, onboarding, empty state).
Achref23illi/ui-craft · ★ 5 · Web & Frontend · score 75

Install: claude install-skill Achref23illi/ui-craft

# UI craft — what real apps do By Achref Arabi · https://github.com/Achref23illi/ui-craft A skill built from a study of 44 shipped iOS apps (Spotify, Airbnb, Instagram, TikTok, Apple Music, Apple TV, Netflix, VSCO, Halide, Denim, Photoshop, Riverside, Moises, Playground, Revolut, Linear, Notion, ChatGPT, Claude, Uber…). 2,602 screens were studied; about 270 were read closely and annotated. The point of the skill is not a style. It is the discipline these apps share: where they spend space and where they don't, how few things they show, and how every element earns its place. ## Start here Paths below are relative to this skill's folder (the one holding this file). The scripts need Python 3; `scripts/sheet.py` also needs Pillow. **1. Pick the job.** | The ask | Mode | Go to | |---|---|---| | Design or build a new screen | Design | steps 2–5 | | "Does this look right?", screenshots to judge | Fast review | § Fast review | | Restyle a whole app | Whole-app pass | § Whole-app pass | **2. References first, every time.** Run `python3 scripts/refs.py "<pattern words>"` (for example `"video editor"`, `"settings"`, `"paywall"`). It lists, best first, the local contact sheets to read (each is one image with six screens of one app: look for the ones that match), the matching patterns, measurements observed in those apps, and published before/after images. Read two or three sheets before drawing anything. `refs.py --list` prints the pattern names when you are unsure which words to