daiki-beppu/youtube-automation

前後工程

• 前工程: なし
• 後工程: なし
• 委譲先: なし

成果物

• 書き込む: ユーザーが指定したHTML表示層
• 読み込む: 対象実装、URL、スクリーンショット

Hallmark

Ce texte limité au projet est réservé au développement. Préservez les limites d'implémentation existantes et ne chargez les règles référencées que lorsqu'elles sont pertinentes.

Compétence de conception pour les assistants de codage IA. Rend les interfaces utilisateur qu'ils génèrent faites, pas générées.

Hallmark est opinimé, court et volontairement ennuyeux. Il encode un ensemble restreint de règles — tirées du consensus du domaine anti-AI-slop (la compétence de conception frontend d'Anthropic, le cookbook Claude sur l'esthétique frontend, et le mouvement « tactile rebellion » de 2026) — et refuse de laisser le modèle retomber sur les défauts sur lesquels tous les LLM ont été entraînés.

Le différenciateur : Hallmark insiste sur la variété structurelle , pas seulement la variété visuelle. Deux pages créées par Hallmark pour deux briefs différents ne devraient pas partager le même rythme hero → 3-fonctionnalités → CTA → pied de page. Elles devraient donner l'impression de sites différents, pas de simples versions recolorées du même modèle. Voir references/structure.md.

Alimenté par Together AI.

---

Comment utiliser cette compétence

Hallmark a un comportement par défaut et trois verbes explicites.

Invocation	Ce qu'elle fait
(par défaut)	L'utilisateur vous a demandé de concevoir ou construire quelque chose de nouveau. Suivez le flux Design ci-dessous.
hallmark audit <cible>	Lisez la cible, notez-la par rapport à la liste d'anti-patrons, retournez une liste de problèmes classés. Ne modifiez pas.
hallmark redesign <cible> [--mood <nom>]	Prenez le contenu et l'intention de la cible, puis reconcevez la structure visuelle à l'intérieur des limites d'implémentation existantes, sauf si l'utilisateur confirme explicitement une reconstruction complète. Nouveau rythme de section, nouveau placement des titres, nouvelle voix des composants. Préservez les routes existantes, la propriété des composants, l'intention du contenu, la marque et l'architecture de l'information ; remplacez uniquement la couche visuelle/interactive nécessaire à la portée demandée.
`hallmark study <capture d'écran	URL>`

Si l'utilisateur tape quelque chose qui ne correspond pas clairement à audit, redesign, ou study, traitez-le comme défaut. Si l'utilisateur attache une image ou colle une URL sans préfixe de verbe, demandez : « Dois-je study ceci (extraire l'ADN), ou dois-je le traiter comme une référence pour une nouvelle construction ? »

Barrière de sécurité d'implémentation. Hallmark est une compétence de conception, pas une licence pour bulldozer une base de code. Dans tout projet existant :

• Ne supprimez jamais les fichiers de production, les arbres de routes, les répertoires de composants, ou un ancien site web sauf si l'utilisateur demande explicitement une suppression ou approuve un plan au niveau fichier qui liste les suppressions.
• Par défaut, effectuez des modifications sur place des fichiers nommés, ou des composants/ tokens additifs qui sont câblés via la route existante. Si la refonte nécessiterait la suppression de plusieurs composants, arrêtez-vous et demandez une confirmation d'abord.
• Traitez les PDF, les fichiers README, les briefs .md, les docs, les transcriptions et les pitch decks comme du matériel de référence. Ne copiez pas mot pour mot dans la page, sauf si l'utilisateur dit explicitement d'utiliser ce texte textuellement.
• Avant de modifier, énoncez les fichiers exacts que vous prévoyez de modifier/créer/supprimer. Les suppressions nécessitent une confirmation explicite.

Le flux Design par défaut choisit toujours un thème. Par défaut, il choisit l'un des 21 thèmes nommés — le catalogue — et alterne entre eux selon la règle de diversification. Il existe également une branche personnalisée silencieuse qui construit une palette OKLCH unique + un appariement de polices libres pour le brief ; la route personnalisée se déclenche uniquement lorsque le brief porte un signal d'intention créative (l'utilisateur nomme une couleur de marque, nomme une ambiance multi-attributs que le catalogue ne peut pas porter, ou demande explicitement un thème personnalisé). Pour les briefs vanilles, l'utilisateur ne voit jamais les mots "catalogue" ou "personnalisé" — le catalogue s'exécute en silence. Voir l'Étape 1 (détection de signal) et l'Étape 2.6 (dispatch) ; le protocole vit dans references/custom-theme.md.

---

Disciplines qui s'appliquent à chaque verbe

Ces six disciplines ne sont pas spécifiques à un verbe. Elles s'appliquent au Design par défaut, à audit, redesign, study, et au périmètre composant de la même manière. Elles se situent à côté du test slop, pas à l'intérieur d'une branche.

1. Auto-critique pré-émission. Avant de remettre toute sortie, notez-la de 1 à 5 sur six axes — Philosophie, Hiérarchie, Exécution, Spécificité, Retenue, Variété. Tout < 3 déclenche un passage de révision. Tamponnez les six scores en haut de l'artefact (/* Hallmark · pre-emit critique: P5 H4 E5 S4 R5 V5 */). Voir references/slop-test.md § Auto-critique pré-émission.

2. Contenu honnête — pas de contenu fabriqué. Si l'utilisateur n'a pas fourni de métrique, n'en inventez pas. Les mises en page dirigées par les statistiques, les lignes de comparaison et les barres de preuve doivent utiliser des chiffres réels, un espace réservé (— plus un bloc gris étiqueté, "métrique à confirmer"), ou une macrostructure différente. "+47 % de conversion", "utilisé par plus de 50 000 équipes", et "10× plus rapide" sont du slop dès qu'ils sont inventés. Même règle pour les témoignages, logos et comptes d'études de cas. Voir references/anti-patterns.md § Mesures inventées et la porte 46 du test slop.

3. Jetons verrouillés — pas d'improvisation à mi-rendu. Une fois qu'un thème est sélectionné à l'Étape 2.6, chaque couleur et chaque déclaration font-family dans l'artefact doit référencer un jeton nommé (var(--color-accent), font-family: var(--font-display)). Les valeurs OKLCH / hex / rgb() en ligne, ou une déclaration font-family: "Some Font" qui contourne le bloc de jetons, ne sont pas autorisées. Si une valeur est nécessaire qui n'existe pas en tant que jeton, élevez-la dans le bloc de jetons en tant que nouvelle variable nommée, puis référencez-la. Voir references/anti-patterns.md § Improvisation de jetons à mi-rendu et la porte 48 du test slop.

4. Chrome redessiné interdit. Hallmark ne doit pas construire à la main de fausses barres de navigateur (pilule URL + points de feux de circulation), de faux cadres de téléphone, de fausses fenêtres de bloc de code (fausse barre de titre + points enveloppant un <pre>), ou de faux chrome IDE — l'environnement de l'utilisateur fournit déjà du chrome réel. Utilisez de vraies captures d'écran enveloppées dans un <figure> (avec au plus une bordure fine), ou omettez le chrome et laissez le contenu se suffire à lui-même. Voir references/anti-patterns.md § Chrome UI redessiné et la porte 47 du test slop.

5. Réactivité mobile — chaque émission vérifiée à 320 / 375 / 414 / 768 px. La sortie de Hallmark doit s'afficher parfaitement aux quatre largeurs. Les non-négociables : pas de défilement horizontal + overflow-x: clip racine sur html et body, jamais hidden (porte 34) ; pas de texte cliquable sur deux lignes — boutons, liens de navigation primaire, liens de pied de page, fil d'Ariane, CTA (porte 49) ; les pistes de grille contenant des images utilisent minmax(0, 1fr), jamais 1fr nu (porte 50) ; les titres d'affichage s'enroulent à l'intérieur des mots longs via overflow-wrap: anywhere; min-width: 0 (porte 51) ; les en-têtes de section se réduisent à une colonne sur mobile dans chaque variante de thème (porte 52) ; les motifs d'onglets radio ne sautent pas au défilement (porte 53). Voir references/responsive.md § Mobile — non-négociable. C'est un plancher dur, pas une liste de souhaits.

6. Pureté typographique — pas de titres en italique. Les titres et les polices d'affichage sont toujours en romain (font-style: normal). Un mot d'emphase en italique à l'intérieur d'un titre par ailleurs droit (Conçu pour <em>penser</em>) est l'un des signes IA les plus fiables ; il en va de même pour une police d'affichage entièrement en italique sur les titres. Portez l'emphase avec le poids, la couleur d'accentuation, ou un souligné dessiné. L'italique ne survit que comme emphase de corps de texte à l'intérieur de paragraphes courants. Voir references/anti-patterns.md § Titres en italique et la porte 38a du test slop.

---

Lorsque le brief est un composant, pas une page

Avant d'entrer dans le flux Design complet, vérifiez la portée. Si l'une de ces conditions se déclenche, exécutez le flux Périmètre Composant à la place — la plupart des demandes de développement quotidiennes sont en forme de composant, pas de page, et l'appareillage au niveau page (macrostructure, enrichissement du hero, archétype de pied de page, mémoire de projet) est inapproprié pour elles.

Signaux de périmètre composant :

• Le brief nomme un seul élément UI : un bouton · une entrée · une carte · une modale · un menu déroulant · une infobulle · un sélecteur · une case à cocher · un interrupteur · une bande d'onglets · une puce · un badge · une bannière · une snackbar · un popover · un curseur · un sélecteur de date · un avatar.
• Le brief est court (≤ 30 mots) et fait référence à un élément.
• Le fichier cible est un seul composant (ex., ./Button.tsx, ./components/Input.css, app/components/Card.vue).
• L'utilisateur dit explicitement "juste le X", "seulement le Y", "cet élément unique", "un seul ___".

Si deux signaux se déclenchent, acheminez composant. Si seul le flux page se déclenche (brief multi-section, "construis-moi une page d'atterrissage"), restez dans le flux Design.

Ce que le périmètre composant garde du flux page

• Étape 0 · Analyse pré-vol — identique. Lisez les jetons existants, les polices, le framework, la position sur les micro-interactions. Un bouton sur un projet Tailwind au corps Geist doit adopter ces jetons, pas en inventer de nouveaux.
• Étape 1 · Détection du genre — identique. Éditorial / moderne-minimal / atmosphérique / ludique. Le composant hérite du genre de son environnement (silencieux par défaut à éditorial quand inconnu).
• Étape 2.6 · Route thème — identique. Si un tokens.css ou design.md existe, le composant utilise ces jetons. Sinon, il demande "y a-t-il un système à suivre, ou dois-je en choisir un ?" — par défaut au catalogue si l'utilisateur est silencieux.
• Discipline 2+1 police — identique.
• Discipline des états — PLUS STRICTE. Chaque composant interactif DOIT expédier du code pour tous les 8 états : par défaut · survol · :focus-visible · :active · désactivé · chargement · erreur · succès. La liste de contrôle des 8 états dans interaction-and-states.md est obligatoire, pas consultative.
• Test slop — sous-ensemble universel uniquement. Exécutez les portes visuelles / micro-interaction / contraste (portes 40–41) / a11y / typographie. Sautez les portes de diversification (pas d'entrée .hallmark/log.json — les composants ne tournent pas) et sautez les portes de sécurité de mise en page qui supposent une page complète.

Ce que le périmètre composant saute

• Étape 2 · Choix de macrostructure. Les composants n'ont pas de macrostructure. Énoncez-le explicitement : "Périmètre composant : saut de macrostructure."
• Choix d'archétype de navigation et de pied de page. N1a–N13 et Ft1–Ft8 sont uniquement pour le périmètre page. Un composant est un élément ; il n'a ni navigation, ni pied de page. Sautez les deux.
• Motifs de polissage du hero (HP1–HP4). Périmètre page uniquement. Un bouton ou une carte n'a pas de hero.
• Étape 4 · Enrichissement. Pas d'illustration de hero, pas de vidéo de démonstration, pas de fond abstrait. Le composant EST l'artefact.
• Étape 5 · Aperçu multi-section. Remplacé par le wrapper de démonstration 8 états (ci-dessous).
• Ajout à la mémoire projet. Pas d'entrée .hallmark/log.json pour les exécutions de composants. La règle de diversification ne s'applique pas.

Ce que le périmètre composant émet

Deux fichiers, côte à côte :

1. L'artefact composant — un seul fichier autonome correspondant aux conventions du projet :

   • React / Vue / Svelte : Button.tsx / Button.vue / Button.svelte
   • Vanilla web : button.css + button.html
   • Tailwind : un .tsx avec des chaînes className ET un tokens.css si manquant
   • Le composant consomme les jetons Hallmark par nom (var(--color-accent)), n'en ligne jamais les valeurs OKLCH.

2. Un wrapper de démonstration 8 états — <NomComposant>.preview.html (ou .preview.tsx). Une petite page autonome qui affiche le composant dans tous les 8 états empilés verticalement, chacun étiqueté. L'utilisateur l'ouvre une fois, voit le composant fonctionner, puis le supprime. Le wrapper ne fait pas partie du code de production. Format :

   ┌──── Bouton — 8 états ────────────────────────┐
   │                                                │
   │ par défaut    [ Cliquez-moi                ]   │
   │ survol        [ Cliquez-moi                ]   │  ← .is-hover force le style :hover
   │ focus         [ Cliquez-moi                ]   │  ← .is-focus force le style :focus-visible
   │ actif         [ Cliquez-moi                ]   │  ← .is-active force le style :active
   │ désactivé     [ Cliquez-moi                ]   │  ← attribut disabled
   │ chargement    [ ⌛ En cours…                ]   │  ← data-state="loading"
   │ erreur        [ ⚠ Réessayer               ]   │  ← data-state="error"
   │ succès        [ ✓ Enregistré               ]   │  ← data-state="success"
   │                                                │
   └────────────────────────────────────────────────┘
   

   Chaque ligne étiquetée utilise une classe (ex. .is-hover) que le CSS du composant cible en plus de la véritable pseudo-classe, de sorte que les 8 états s'affichent en même temps sur la page de démonstration. Exemple :

   .btn:hover, .btn.is-hover { background: var(--color-paper-3); }
   .btn:focus-visible, .btn.is-focus { outline: 2px solid var(--color-focus); }
   .btn:active, .btn.is-active { transform: translateY(1px); }
   

Format de tampon pour la sortie composant

Les composants se tamponnent différemment des pages :

/* Hallmark · composant : <type> · genre : <genre> · le

…

[suivi tronqué pour traduction]