Daroms Speed App

Une idée le matin, l’app sur ton téléphone le soir.

Daroms Speed App est un framework mobile Expo, Tamagui et Supabase conçu pour Claude Code. Le cœur fournit le thème, les composants, les données, les modules et la publication. Claude n’écrit que ce qui rend ton app unique, sous des règles vérifiées à chaque fichier.

Suivre le tutorielLire la documentation
Créer une appnpx @daromsart/daroms-speed-app new mon-app --variant tracker

Cinq valeurs, toute l’app suit

Modifie brand.ts : palettes, clair et sombre, rayons, espacements et graisses sont recalculés par@daroms/theme, le même code que dans tes apps.

brand.ts

import { defineBrand } from '@daroms/theme/brand'

export defaultdefineBrand({

// boutons, liens, éléments actifs

: '',

// mises en avant, badges

: '',

// police embarquée ou police du système

: '',

// rayon de base des composants

: '',

// ton : rayons, espacements, graisses, rebond, neutres

: '',

})

Marques d’exemple
Aperçu d’un écran d’app (suivi de lecture) rendu avec la marque ci-contre.
  1. 50#f4f6ff
  2. 100#e6eaff
  3. 200#d1d8ff
  4. 300#b3bdff
  5. 400#909cff
  6. 500#757eff
  7. 600#5f5bff
  8. 700#4f46e5
  9. 800#413cba
  10. 900#353592
  11. 950#20215a

Nuances brand-50 à brand-950 calculées en OKLCH. Ta couleur est gardée telle quelle sur la plus proche :brand-700.

Une journée en quatre étapes

/daroms-day enchaîne les étapes et attend ta validation entre chacune. Les durées sont celles de l’app pilote.

  1. Matin1 h

    Cadrer et créer

    Claude écrit le cahier app.spec.md avec toi, puis une commande crée l’app complète et affiche le QR d’aperçu.

    /daroms-idea/daroms-new

  2. Midi2 h

    Inspiration, marque, design, données

    Des références trouvées sur Dribbble, Pinterest ou Mobbin et une direction choisie, cinq valeurs dans brand.ts et l’icône, des wireframes texte par écran, puis les tables Supabase avec RLS.

    /daroms-inspire/daroms-brand/daroms-design/daroms-data

  3. Après-midi3 h

    Écrans et modules

    Chaque écran est généré puis rempli avec @daroms/ui ; paiements, notifications ou chat IA s’ajoutent en module.

    /daroms-screen/daroms-module/daroms-check

  4. Soir1 h

    Publier

    Fiche store FR et EN, build EAS, envoi vers TestFlight et la piste interne de Google Play, puis le bilan : ce que l’app a coûté en tokens et en dollars.

    /daroms-store/daroms-build/daroms-submit

Le tutoriel complet, commande par commande

Ce que tu n’écris plus

Le cœur est un sous-module git versionné. Ton app ne contient que son spécifique : features, textes, migrations, marque et manifest.

Le thème clair et sombre

brand.ts et ses 5 valeurs : palettes OKLCH de 11 nuances, 8 sous-thèmes, rayons, espacements et ressorts déduits du ton.

La marque
Les composants

32 composants @daroms/ui avec chargement, vide, erreur, accessibilité et haptique intégrés, et 102 icônes Lucide.

Le catalogue
La couche données

g table écrit la migration avec RLS, le schéma zod et les hooks TanStack Query. Avec --local, les mêmes hooks gardent les données sur l’appareil.

Ajouter une table
Les fonctionnalités courantes

9 modules activables en une commande : ai-chat, analytics, auth, camera, maps, onboarding, payments, push, settings.

Les modules
Le point de départ

6 variantes d’app : blank, ai-chat, list-detail, shop, social, tracker. Chacune arrive avec ses modules, ses tables et ses écrans.

Les variantes
L’outillage

19 commandes daroms, de new à submit, et 22 skills Claude qui les enchaînent.

La CLI

Les règles sont vérifiées, pas suggérées

Chaque écriture de Claude passe par un hook. Une couleur en dur, un appel Supabase dans un composant ou un texte hors i18n est refusé avec un message court ; Claude corrige et réécrit. Ensuite tsc et ESLint tournent sur le seul fichier touché.

  • Routes minces : app/** ne fait que réexporter un écran.
  • Styles : composants @daroms/ui et tokens Tamagui v3, rien d’autre.
  • Données : Supabase seulement dans features/x/api.ts, validé par zod.
  • Base : RLS sur chaque table, jamais de clé service_role dans l’app.
  • Écrans : chargement, vide, erreur avec réessai, données.

Les 16 règles et ce qui les vérifie

Session Claude Code dans une app daroms
Write  src/features/books/BooksScreen.tsx
-  <YStack bg="#0F766E" p={14}>

daroms-check-rules refuse src/features/books/BooksScreen.tsx :
- couleur hex : utiliser un token (bg="card", color="color-11", brand-500)
- nombre magique de style : token (p="4", gap="stack", rounded="card")
Corriger puis réécrire (voir CATALOG.md pour les tokens).

Write  src/features/books/BooksScreen.tsx
+  <YStack theme="brand" bg="background" p="gutter">

daroms-typecheck : tsc et eslint sans erreur

Une documentation que ton agent lit aussi

Chaque page existe en Markdown à la même adresse, avec le suffixe .md. Un index au format llms.txt pointe vers toutes.

  • /llms.txt

    L’index : une ligne par page avec son résumé, et ce qu’un agent doit savoir avant d’écrire du code daroms.

  • /llms-full.txt

    Toute la documentation en un seul fichier, dans l’ordre de lecture.

  • /guides/ajouter-une-table.md

    N’importe quelle page en Markdown, annoncée dans son HTML par rel="alternate".

À coller dans ton agent

Lis https://daromsartof.github.io/daroms-speedapp/llms.txt, puis ajoute un écran « Livres » à mon app daroms en suivant le guide « Ajouter un écran ».