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.

Ver código-fonte
Documento original do Skill

Renderizado do repositório de origem, preservando títulos, exemplos, código, tabelas, links e imagens.

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.

do mesmo repositório

Mais Skills

Todos os Skills
draftbit
Comunidade

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.

instalações
1
GitHub Stars
4
Atualizado
2 de jul.
draftbit
Comunidade

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; for an audit without changes use mobile-design-review.

instalações
1
GitHub Stars
4
Atualizado
2 de jul.
draftbit
Comunidade

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-system.

instalações
1
GitHub Stars
4
Atualizado
2 de jul.