Skill · em Criar imagem, vídeo e arte

mobile-design

Mobile-first design thinking and decision-making for iOS and Android apps. Touch interaction, performance patterns, platform conventions. Teaches principles, not fixed values. Use when building React Native, Flutter, or native mobile apps.

Procedência

Origem: davila7/claude-code-templates
Caminho: cli-tool/components/skills/creative-design/mobile-design
Versão fixada: 57f899e5394bb8ca166f38eacae8f0853cbfe033
Licença: MIT
Espelhado em 25/09/2026
208 downloads no Claude Code Templates (lido em 25/09/2026)

Antes de instalar

14 arquivos · 215,4 KB · inclui 1 script que executa: scripts/mobile_audit.py

Instalar na sua CLI

O comando baixa a versão fixada (commit 57f899e) direto da origem, para a pasta que a CLI lê. Precisa de curl (macOS e Linux); no Windows não há comando, porque o Rook Labs é para macOS.

Claude Code

Neste projeto: instala em .claude/skills/mobile-design/.

d=".claude/skills/mobile-design"
u="https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/cli-tool/components/skills/creative-design/mobile-design"
curl -fsSL --create-dirs \
  -o "$d/SKILL.md" "$u/SKILL.md" \
  -o "$d/decision-trees.md" "$u/decision-trees.md" \
  -o "$d/mobile-backend.md" "$u/mobile-backend.md" \
  -o "$d/mobile-color-system.md" "$u/mobile-color-system.md" \
  -o "$d/mobile-debugging.md" "$u/mobile-debugging.md" \
  -o "$d/mobile-design-thinking.md" "$u/mobile-design-thinking.md" \
  -o "$d/mobile-navigation.md" "$u/mobile-navigation.md" \
  -o "$d/mobile-performance.md" "$u/mobile-performance.md" \
  -o "$d/mobile-testing.md" "$u/mobile-testing.md" \
  -o "$d/mobile-typography.md" "$u/mobile-typography.md" \
  -o "$d/platform-android.md" "$u/platform-android.md" \
  -o "$d/platform-ios.md" "$u/platform-ios.md" \
  -o "$d/scripts/mobile_audit.py" "$u/scripts/mobile_audit.py" \
  -o "$d/touch-psychology.md" "$u/touch-psychology.md" \
  -o "$d/LICENSE" "https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/LICENSE"

Global: instala em ~/.claude/skills/mobile-design/.

d="$HOME/.claude/skills/mobile-design"
u="https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/cli-tool/components/skills/creative-design/mobile-design"
curl -fsSL --create-dirs \
  -o "$d/SKILL.md" "$u/SKILL.md" \
  -o "$d/decision-trees.md" "$u/decision-trees.md" \
  -o "$d/mobile-backend.md" "$u/mobile-backend.md" \
  -o "$d/mobile-color-system.md" "$u/mobile-color-system.md" \
  -o "$d/mobile-debugging.md" "$u/mobile-debugging.md" \
  -o "$d/mobile-design-thinking.md" "$u/mobile-design-thinking.md" \
  -o "$d/mobile-navigation.md" "$u/mobile-navigation.md" \
  -o "$d/mobile-performance.md" "$u/mobile-performance.md" \
  -o "$d/mobile-testing.md" "$u/mobile-testing.md" \
  -o "$d/mobile-typography.md" "$u/mobile-typography.md" \
  -o "$d/platform-android.md" "$u/platform-android.md" \
  -o "$d/platform-ios.md" "$u/platform-ios.md" \
  -o "$d/scripts/mobile_audit.py" "$u/scripts/mobile_audit.py" \
  -o "$d/touch-psychology.md" "$u/touch-psychology.md" \
  -o "$d/LICENSE" "https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/LICENSE"

Codex

Neste projeto: instala em .agents/skills/mobile-design/.

d=".agents/skills/mobile-design"
u="https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/cli-tool/components/skills/creative-design/mobile-design"
curl -fsSL --create-dirs \
  -o "$d/SKILL.md" "$u/SKILL.md" \
  -o "$d/decision-trees.md" "$u/decision-trees.md" \
  -o "$d/mobile-backend.md" "$u/mobile-backend.md" \
  -o "$d/mobile-color-system.md" "$u/mobile-color-system.md" \
  -o "$d/mobile-debugging.md" "$u/mobile-debugging.md" \
  -o "$d/mobile-design-thinking.md" "$u/mobile-design-thinking.md" \
  -o "$d/mobile-navigation.md" "$u/mobile-navigation.md" \
  -o "$d/mobile-performance.md" "$u/mobile-performance.md" \
  -o "$d/mobile-testing.md" "$u/mobile-testing.md" \
  -o "$d/mobile-typography.md" "$u/mobile-typography.md" \
  -o "$d/platform-android.md" "$u/platform-android.md" \
  -o "$d/platform-ios.md" "$u/platform-ios.md" \
  -o "$d/scripts/mobile_audit.py" "$u/scripts/mobile_audit.py" \
  -o "$d/touch-psychology.md" "$u/touch-psychology.md" \
  -o "$d/LICENSE" "https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/LICENSE"

Global: instala em ~/.agents/skills/mobile-design/.

d="$HOME/.agents/skills/mobile-design"
u="https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/cli-tool/components/skills/creative-design/mobile-design"
curl -fsSL --create-dirs \
  -o "$d/SKILL.md" "$u/SKILL.md" \
  -o "$d/decision-trees.md" "$u/decision-trees.md" \
  -o "$d/mobile-backend.md" "$u/mobile-backend.md" \
  -o "$d/mobile-color-system.md" "$u/mobile-color-system.md" \
  -o "$d/mobile-debugging.md" "$u/mobile-debugging.md" \
  -o "$d/mobile-design-thinking.md" "$u/mobile-design-thinking.md" \
  -o "$d/mobile-navigation.md" "$u/mobile-navigation.md" \
  -o "$d/mobile-performance.md" "$u/mobile-performance.md" \
  -o "$d/mobile-testing.md" "$u/mobile-testing.md" \
  -o "$d/mobile-typography.md" "$u/mobile-typography.md" \
  -o "$d/platform-android.md" "$u/platform-android.md" \
  -o "$d/platform-ios.md" "$u/platform-ios.md" \
  -o "$d/scripts/mobile_audit.py" "$u/scripts/mobile_audit.py" \
  -o "$d/touch-psychology.md" "$u/touch-psychology.md" \
  -o "$d/LICENSE" "https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/LICENSE"

Antigravity

Neste projeto: instala em .agents/skills/mobile-design/.

d=".agents/skills/mobile-design"
u="https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/cli-tool/components/skills/creative-design/mobile-design"
curl -fsSL --create-dirs \
  -o "$d/SKILL.md" "$u/SKILL.md" \
  -o "$d/decision-trees.md" "$u/decision-trees.md" \
  -o "$d/mobile-backend.md" "$u/mobile-backend.md" \
  -o "$d/mobile-color-system.md" "$u/mobile-color-system.md" \
  -o "$d/mobile-debugging.md" "$u/mobile-debugging.md" \
  -o "$d/mobile-design-thinking.md" "$u/mobile-design-thinking.md" \
  -o "$d/mobile-navigation.md" "$u/mobile-navigation.md" \
  -o "$d/mobile-performance.md" "$u/mobile-performance.md" \
  -o "$d/mobile-testing.md" "$u/mobile-testing.md" \
  -o "$d/mobile-typography.md" "$u/mobile-typography.md" \
  -o "$d/platform-android.md" "$u/platform-android.md" \
  -o "$d/platform-ios.md" "$u/platform-ios.md" \
  -o "$d/scripts/mobile_audit.py" "$u/scripts/mobile_audit.py" \
  -o "$d/touch-psychology.md" "$u/touch-psychology.md" \
  -o "$d/LICENSE" "https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/LICENSE"

Global: instala em ~/.gemini/antigravity-cli/skills/mobile-design/.

d="$HOME/.gemini/antigravity-cli/skills/mobile-design"
u="https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/cli-tool/components/skills/creative-design/mobile-design"
curl -fsSL --create-dirs \
  -o "$d/SKILL.md" "$u/SKILL.md" \
  -o "$d/decision-trees.md" "$u/decision-trees.md" \
  -o "$d/mobile-backend.md" "$u/mobile-backend.md" \
  -o "$d/mobile-color-system.md" "$u/mobile-color-system.md" \
  -o "$d/mobile-debugging.md" "$u/mobile-debugging.md" \
  -o "$d/mobile-design-thinking.md" "$u/mobile-design-thinking.md" \
  -o "$d/mobile-navigation.md" "$u/mobile-navigation.md" \
  -o "$d/mobile-performance.md" "$u/mobile-performance.md" \
  -o "$d/mobile-testing.md" "$u/mobile-testing.md" \
  -o "$d/mobile-typography.md" "$u/mobile-typography.md" \
  -o "$d/platform-android.md" "$u/platform-android.md" \
  -o "$d/platform-ios.md" "$u/platform-ios.md" \
  -o "$d/scripts/mobile_audit.py" "$u/scripts/mobile_audit.py" \
  -o "$d/touch-psychology.md" "$u/touch-psychology.md" \
  -o "$d/LICENSE" "https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/LICENSE"

Peça ao Rook

Já usa o Rook Labs? Cole no chat do Rook: instale a skill https://rooklabs.sh/marketplace/cct.mobile-design

Prévia do SKILL.md

---
name: mobile-design
description: Mobile-first design thinking and decision-making for iOS and Android apps. Touch interaction, performance patterns, platform conventions. Teaches principles, not fixed values. Use when building React Native, Flutter, or native mobile apps.
allowed-tools: Read, Glob, Grep, Bash
---

# Mobile Design System

> **Philosophy:** Touch-first. Battery-conscious. Platform-respectful. Offline-capable.
> **Core Principle:** Mobile is NOT a small desktop. THINK mobile constraints, ASK platform choice.

---

## 🔧 Runtime Scripts

**Execute these for validation (don't read, just run):**

| Script | Purpose | Usage |
|--------|---------|-------|
| `scripts/mobile_audit.py` | Mobile UX & Touch Audit | `python scripts/mobile_audit.py <project_path>` |

---

## 🔴 MANDATORY: Read Reference Files Before Working!

**⛔ DO NOT start development until you read the relevant files:**

### Universal (Always Read)

| File | Content | Status |
|------|---------|--------|
| **[mobile-design-thinking.md](mobile-design-thinking.md)** | **⚠️ ANTI-MEMORIZATION: Forces thinking, prevents AI defaults** | **⬜ CRITICAL FIRST** |
| **[touch-psychology.md](touch-psychology.md)** | **Fitts' Law, gestures, haptics, thumb zone** | **⬜ CRITICAL** |
| **[mobile-performance.md](mobile-performance.md)** | **RN/Flutter performance, 60fps, memory** | **⬜ CRITICAL** |
| **[mobile-backend.md](mobile-backend.md)** | **Push notifications, offline sync, mobile API** | **⬜ CRITICAL** |
| **[mobile-testing.md](mobile-testing.md)** | **Testing pyramid, E2E, platform-specific** | **⬜ CRITICAL** |
| **[mobile-debugging.md](mobile-debugging.md)** | **Native vs JS debugging, Flipper, Logcat** | **⬜ CRITICAL** |
| [mobile-navigation.md](mobile-navigation.md) | Tab/Stack/Drawer, deep linking | ⬜ Read |
| [mobile-typography.md](mobile-typography.md) | System fonts, Dynamic Type, a11y | ⬜ Read |
| [mobile-color-system.md](mobile-color-system.md) | OLED, dark mode, battery-aware | ⬜ Read |
…

Ver todo o marketplace