Communitygithub.com

VXerys/brand-from-codebase

À utiliser lorsque qu'une vidéo marketing, une bannière ou un post sur les réseaux sociaux doit utiliser la marque et les affirmations réelles d'un produit, lors de la création ou de la mise à jour d'un brand.md dans D:\Projects\marketing-videos, lors de la capture d'UI réelle (site web, captures d'écran d'application Flutter) pour une vidéo, ou lorsqu'un storyboard nécessite une référence source pour chaque affirmation.

Qu'est-ce que brand-from-codebase ?

Cette compétence agit comme la source unique et véridique de la marque d'un produit pour les créateurs de contenu marketing. Elle extrait automatiquement tous les actifs de la marque (couleurs, polices, logos, slogans, etc.) directement depuis le dépôt de code du produit, garantissant que chaque élément visuel et chaque affirmation présentée dans une vidéo ou une bannière est authentique et sourcé. La compétence prend en charge plusieurs plateformes (sites web, applications Flutter, etc.) et suit un contrat brand.md strict. Chaque valeur extraite est associée à sa source (`fichier:ligne`), et le fichier enregistre le commit du dépôt à partir duquel la lecture a été effectuée, permettant ainsi un rafraîchissement facile au lieu d'une re-lecture complète. Un système de portes (G1 et G2) vérifie les revendications par rapport au brand.md et au dépôt, signalant les kits de marque obsolètes. Les captures d'écran réelles de l'interface utilisateur sont également guidées pour éviter les photos d'archives ou les écrans inventés, garantissant que tout le contenu marketing reflète fidèlement le produit actuel.

Compatible avec~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/VXerys/claude-code-hq/tree/main/.claude/skills/brand-from-codebase

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

Documentation

Marque à partir du code source

Aperçu

Le dépôt du produit est la seule source de vérité de la marque. Un kit de marque est extrait une fois dans marketing-videos/<marque>/brand.md, chaque valeur porte sa source fichier:ligne, et le fichier enregistre le commit du dépôt sur lequel il a été lu afin qu'il puisse être rafraîchi plutôt que relu.

Contrat brand.md

Écrire ces sections, dans cet ordre. Chaque valeur se termine par sa source entre parenthèses (chemin:ligne).

  1. Sources : chemins des dépôts, branche, git rev-parse --short HEAD par dépôt, date d'extraction, et un bloc lisible par machine par dépôt que la porte de pipeline G1 lit pour détecter un kit obsolète :
    ```refresh
    repo: <dépôt-produit>
    ref: HEAD
    commit: c8fb26e
    paths: src/data/content.ts src/app/globals.css public/brand
    ```
    
    repo est le nom du dossier sous D:\Projects. Un dépôt qui n'est pas git utilise mtime: <date ISO> au lieu de ref et commit.
  2. Identité : nom, positionnement en une ligne, slogan, ton (citer le fichier de copie, ne pas paraphraser).
  3. Tokens de couleur : d'abord les tokens sémantiques de la marque (--color-brand-*, primary, AppColors.primary), puis les tokens de support. Un tableau par surface lorsqu'ils diffèrent : landing vs app.
  4. Typographie : par surface. Les polices de la landing diffèrent souvent de celles de l'app ; vérifier à la fois la mise en page racine et tout fonts.ts au niveau des sections.
  5. Logos et imagerie : chemins de fichiers, distinguer les rendus réels du produit des photos d'archives (les photos d'archives ne doivent jamais être présentées comme des utilisateurs réels), et leur licence ou fichier de crédits.
  6. Affirmations autorisées : fonctionnalités, modes, tarifs, libellés CTA, URL, contact. Chacune est une citation directe avec source. Marquer les données d'exemple comme SAMPLE (rendus avec des chiffres fictifs) afin qu'une vidéo les étiquette "Contoh".
  7. Affirmations interdites : tout ce qui semble plausible mais n'a pas de source : nombre d'utilisateurs, revenus, notes, témoignages, logos de partenaires, "terpercaya", "#1".
  8. Cibles de capture : URL de production et de staging, routes valant la peine d'être capturées, dossiers de captures d'écran de l'application, URL du Play Store.
  9. Ambiguïtés : tokens en double ou conflictuels, copie qui diffère entre le site et l'application, valeurs qu'un brief ailleurs utilise et que le code contredit. Les lister pour l'utilisateur ; ne jamais les résoudre silencieusement.

Liste de contrôle d'extraction

RechercherEndroits typiques
Copie, CTA, tarifssrc/data/content.ts, src/content/*.ts, composants de section landing, RELEASE_NOTES.md, docs/features/
Tokens webglobals.css @theme / :root, tailwind.config.*, palette.ts
Tokens Flutterlib/core/constants/app_colors.dart, app_text_styles.dart, pubspec.yaml polices
Policesapp/layout.tsx (next/font), section fonts.ts, pubspec.yaml
Logospublic/brand/, docs/brand/, assets/icons/brand/
URLgrep -rn "https://<domaine-marque>" dans tout src/, metadataBase, site.ts, pages de conditions

Rechercher une valeur avant de la déclarer manquante : grep le domaine, le texte du CTA, et le nom du token dans tout src/.

Ignorer .env*, .mcp.json, google-services.json, les keystores, et toute clé ou token. Ne jamais copier leurs valeurs dans brand.md.

Lorsque le dépôt source n'est pas extrait (sessions cloud)

La porte G1 rapporte brand_repo_absent comme information et G2 vérifie chaque affirmation par rapport aux citations exactes dans brand.md au lieu du dépôt (claim_verified_brand_kit). Cela ne fonctionne que lorsque brand.md cite la copie textuellement avec chemin:ligne, donc extraire les citations littéralement, jamais paraphrasées. Le rafraîchissement de brand.md nécessite le dépôt : le faire sur l'ordinateur portable, ou ajouter le dépôt du produit à la session cloud et pointer MV_PROJECTS_ROOT vers son dossier parent.

Règle de rafraîchissement

La porte G1 exécute git -C <dépôt> log --oneline <commit>..<ref> -- <chemins> pour chaque bloc de rafraîchissement et échoue avec brand_stale lorsque quelque chose a changé. Pour corriger, relire uniquement les fichiers modifiés, mettre à jour leurs lignes, et incrémenter commit dans le bloc. Les dépôts non git sont comparés par date de modification du fichier contre mtime.

Capture de l'interface utilisateur réelle

Surface du produitMéthode
Site web en directCapture du site web HyperFrames à partir de l'URL de production (la route product-launch-video fait cela) ; staging uniquement lorsque l'utilisateur dit que la fonctionnalité n'est pas publiée
Serveur de développement localUniquement lorsque l'utilisateur demande un écran non publié ; l'étiqueter comme non publié dans le brief
Application FlutterCaptures d'écran réelles existantes (site screens/, actifs Play Store) ou captures d'écran de l'émulateur, placées dans un cadre de périphérique
Petits éléments animés (bouton CTA, carte de statistiques)Reconstruits en HTML avec les tokens du brand.md ; ne jamais inventer un écran qui n'existe pas

Références de revendications du storyboard

Chaque affirmation à l'écran dans STORYBOARD.md porte sa source brand.md, par exemple "Biaya layanan 2%" (<dépôt-produit>/src/data/content.ts:212). Une affirmation sans source est supprimée du storyboard, non adoucie.

Erreurs courantes

  • Choisir le premier bleu marine trouvé (--navy-main) au lieu du token sémantique de la marque (--color-brand-navy). Préférer les noms sémantiques et lister l'autre comme une ambiguïté.
  • Utiliser les polices de l'application pour une vidéo de page de destination, ou l'inverse.
  • Déclarer une URL "non trouvée" après avoir vérifié un seul fichier.
  • Montrer des photos d'archives comme s'il s'agissait de clients.

Individual skills in this repo

This repo contains 2 individual skills — each has its own dedicated page.

Skills associés