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.

Voir la source

Mode d’emploi

  1. Copiez la commande et examinez le paquet avant de l’installer dans votre environnement agent.
  2. Consultez le document original pour les outils, identifiants et environnements requis.
  3. Décrivez les entrées et le livrable souhaité ; comparez la sortie aux sources.
npx skills add https://github.com/draftbit/mobile-taste-skill --skill mobile-redesign-screen

Avant de commencer

  • L’installation n’inclut ni abonnement au modèle, ni quota API, ni accès aux fichiers.
  • Étoiles et installations reflètent l’activité, pas un test indépendant de qualité ou de sécurité.
Document Skill original

Rendu depuis le dépôt source en conservant titres, exemples, code, tableaux, liens et images.

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.

Tâches connexes

du même dépôt

Autres Skills

Tous les Skills
draftbit
Communauté

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.

installations
1
GitHub Stars
4
Mis à jour
2 juil.
draftbit
Communauté

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

installations
1
GitHub Stars
4
Mis à jour
2 juil.
draftbit
Communauté

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

installations
1
GitHub Stars
4
Mis à jour
2 juil.