draftbit/mobile-taste-skill

mobile-redesign-screen

Audit-first redesign of ONE React Native screen (or one flow of 2-3 screens) - extract its current tokens and patterns, produce rated findings, then modernize it lever by lever with atomic commits and before/after screenshots.

View source

How to use

  1. Copy the installation command and review the source package before installing it in your own agent environment.
  2. Check the source document for required tools, credentials and supported hosts.
  3. Describe your input and desired deliverable; review the output against the source material.
npx skills add https://github.com/draftbit/mobile-taste-skill --skill mobile-redesign-screen

Before you start

  • Installation does not include a model subscription, API allowance or permission to access your files.
  • Repository stars and installation counts describe activity, not an independent quality or security test.
Original skill document

Rendered from the source repository. Headings, examples, code, tables, links, and referenced images are preserved.

mobile-redesign-screen: One Screen, Audit First

Scope: one screen, or one tight flow (2-3 screens sharing a job). More than that is mobile-redesign-app.

Method files, read in full first: ../_shared/references/redesign-protocol.md (audit, levers, fix loop, risk governor) and ../_shared/references/review-rubric.md (finding format). ../_shared/references/tells.md supplies the findings vocabulary.

Flow

  1. Stack sniff + audit (redesign-protocol.md): the screen's current tokens or

inline styles, its dial reading, its place in the route tree, signature interactions, accessibility wins. Screenshot the BEFORE state if a device/preview is reachable.

  1. Mode. Preserve vs overhaul - ask once if ambiguous.
  2. Findings for this screen only, rated high/medium/polish.
  3. Propose the pass. Which levers (type/spacing → color-to-tokens → states →

feedback/motion → recomposition), which findings each closes, what will NOT change. One short message; proceed on approval or if the user already said "just do it".

  1. Fix loop (redesign-protocol.md): one finding per atomic commit, before/after

pair per visual change, risk governor (stop > 20%, cap 20 fixes).

  1. Close out. Findings closed vs remaining, the before/after pairs, and - if

design-baseline.json or MOBILE-DESIGN.md exist - refresh them (deltas noted).

Hard boundaries

  • Never changes: route name, deep link, position in the nav tree, form field

semantics, learned gestures. If a finding requires one of those, report it as OUT-OF-SCOPE with a pointer to mobile-redesign-app.

  • Blocks-first: if the screen is an archetype (settings, feed, auth, paywall, empty

state), diff it against the matching ../_shared/blocks/ block and prefer converging toward the block over inventing a third pattern.

  • No scope creep: components shared with other screens get changed only when the

change is invisible elsewhere or the user approves the blast radius; the risk governor's +5%/file makes this expensive on purpose.

  • The screen must still pass the mobile-taste Section 14 pre-flight when done - a

redesigned screen that fails pre-flight is not done.

Related by task

from this repository

More skills

All skills
draftbit
Community

mobile-nav-plan

Turn an app idea or an existing React Native app into a Nav Read - tab structure, route tree, push/modal/sheet decisions, deep links, Android back plan - without building any screens. Use when planning navigation for a new app, restructuring an existing app's navigation, or deciding whether something is a tab, a push, a modal, or a bottom sheet. For building the screens afterward use mobile-taste; for full-app visual redesign use mobile-redesign-app.

installs
1
GitHub stars
4
Updated
Jul 2
draftbit
Community

mobile-redesign-app

Whole-app redesign of an existing React Native / Expo app - full audit (tokens, navigation vs the Nav Read rules, screen archetypes, dial reading), preserve-vs-overhaul decision, then a phased modernization plan executed lever by lever across screens with checkpoints and a risk governor. The only skill in this suite allowed to propose navigation restructuring (approval-gated). Use when asked to redesign, overhaul, rebrand, or modernize an entire app. For one screen use mobile-redesign-screen; fo

installs
1
GitHub stars
4
Updated
Jul 2
draftbit
Community

mobile-taste

Anti-slop design skill for BUILDING React Native / Expo apps (iOS, Android, web). Commits to an App Read and Nav Read before writing code; ships screens, navigation, and motion that do not look AI-generated. Use when creating new screens, features, or apps in React Native. For auditing an existing app use mobile-design-review; for upgrading existing screens use mobile-redesign-screen or mobile-redesign-app; for navigation planning alone use mobile-nav-plan; for tokens/theming use mobile-design-s

installs
1
GitHub stars
4
Updated
Jul 2