UI Craft

Make a mobile UI look and feel like a shipped app. Rules with numbers, 29 screen recipes (plus 200 measured ones), a fast screenshot review and lessons from a real redesign, grounded in 4,500 iOS screens from 78 apps (Spotify, Airbnb, Instagram, Apple Music, Wise, Coinbase, Google Maps, Uber Eats, 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 stat

9 starsFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add Achref23illi/ui-craft --skill ui-craft

Manual install

git clone --depth 1 https://github.com/Achref23illi/ui-craft.git /tmp/ui-craft
mkdir -p ~/.claude/skills
cp -r /tmp/ui-craft/. ~/.claude/skills/ui-craft

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# UI craft — what real apps do

By Achref Arabi · https://github.com/Achref23illi/ui-craft

A skill built from a study of 78 shipped iOS apps (Spotify, Airbnb, Instagram, TikTok,
Apple Music, Apple TV, Netflix, VSCO, Halide, Denim, Photoshop, Riverside, Moises,
Revolut, Wise, Coinbase, PayPal, Linear, Notion, Cron, ChatGPT, Gemini, Claude, Uber,
Uber Eats, Google Maps, Apple Books, The Athletic, Nike Training Club…). 4,536 screens
in 760 contact sheets; every sheet was read and the key screens measured in points.
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

Read the full skill on GitHub

Details

Skill name: ui-craft
Repository: Achref23illi/ui-craft
License: MIT
Repo updated: 30 September 2026

FAQ

What does the UI Craft skill do?

How do I install the UI Craft skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add Achref23illi/ui-craft --skill ui-craft. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is UI Craft popular?

It lives in Achref23illi/ui-craft, which has 9 GitHub stars and 0 forks.

Related skills

Web Design Taste

Alice59357/web-design-taste

帮助没有设计背景、不懂技术术语的用户做出设计师级高质量网页。用户只需用大白话描述需求，通过选择预设风格卡片（而非描述设计），即可产出完整可运行的网页。每当用户提到"做个网页"、"做个网站"、"落地页"、"作品集"、"介绍页"、"官网"、"销售页"，或表达"想要好看的页面但不知道怎么形容"时，必须使用此技能。即使用户没有提供任何设计要求，也要使用此技能来引导。

Frontend & Design

Terminal UI Design System

chyinan/terminal-ui-design-system

Create terminal-inspired UI interfaces with macOS-style window decorations, monospace typography, and a warm color palette. Use this skill when building developer tools, code marketplaces, technical documentation sites, or any interface that benefits from a terminal/command-line aesthetic. Provides complete design system specifications including color palette, typography, spacing, components, and CSS implementation details.

Frontend & Design

Brand Yml

stephenturner/skill-brand-yml

Create a _brand.yml file for Quarto projects that captures brand colors, typography, and identity in a structured YAML format. Use this skill whenever the user mentions _brand.yml, brand.yml, Quarto branding, brand identity for Quarto, or wants consistent colors and fonts across Quarto documents, websites, presentations, or Shiny apps. Also trigger when the user asks to extract brand colors or fonts from a website, PDF brand guidelines, or style guide for use with Quarto. Even if the user just says "set up my brand" or "make my Quarto docs match our brand," this is the right skill.

Frontend & Design

Shopify Theme Builder

moVictor99/shopify-theme-builder

Build a complete, clean, Online Store 2.0 Shopify theme from a guided requirements interview. Use when a user wants to build, generate, scaffold, or design a Shopify theme, Shopify sections, JSON templates, Liquid, section groups, or a fully theme-editor-controllable storefront (including bilingual / RTL Arabic stores). Produces a zip-ready theme that passes theme-check and meets Shopify Theme Store requirements.

Frontend & Design

Motion Ref

joepUI/motion-ref-skill

UI 动效参考库，帮你给产品加上合适的动画。不需要懂动效 — 描述你的产品场景（页面加载慢、用户点了没反应、想让页面高级一点），直接推荐方案 + 代码。触发词：页面没动画、交互没反馈、怎么加动效、让页面动起来、加载太慢怎么办、想让产品高级一点、motion ref。

Frontend & Design

Product UI Director

macistone71-jpg/heqingfeng-product-ui-skill

何庆丰定制的产品 UI/UX 设计、实现与验收 Skill。凡是新建、改版、评审或迭代 Web、移动端、桌面端界面，设计系统、页面、组件、交互、响应式、可访问性、配色、字体、数据图表或视觉质量时必须使用。覆盖需求简报→设计系统→差异化视觉→代码实现→真实浏览器验收→迭代记录，内置可搜索 UI/UX 数据和项目级设计记忆。

Frontend & Design

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.