Synthèse automatique
Guide la reproduction ou l'audit d'une interface dans Paper MCP en comparant les styles calculés du site réellement rendu plutôt que les fichiers source.
Points forts
- Fait du DOM rendu la source de vérité et relègue les fichiers Astro/TSX à un rôle secondaire
- Impose la capture de getComputedStyle() et l'inspection de la chaîne parente avant toute déduction
- Met en garde contre les pièges Tailwind où un nom d'utilitaire ne correspond pas au token de thème
- Boucle de vérification par capture d'écran après chaque modification significative
Limites
- Suppose un accès à Paper MCP et à agent-browser eval dans l'environnement
- Ne fournit aucune procédure pour les pages non accessibles ou non rendues côté client
- Reste très spécifique à ce dépôt et à sa pile Astro/React
À utiliser lorsqu'on recrée une page dans Paper MCP ou qu'on traque un écart visuel entre la maquette et le site réellement rendu.
À éviter pour créer une interface originale sans référence live, ou pour du travail hors de Paper MCP et du navigateur.
Analyse de sécurité
PrudenceThe skill is purely procedural documentation: it tells the agent to inspect a live page, read computed styles/DOM, recreate values in Paper, and verify with screenshots. There are no destructive commands, no curl|sh, no secret/token exfiltration, no obfuscated payloads, and no instructions to disable safety controls. The only notable capability is browser-based `eval` plus live-site access, which is a powerful tool used for a legitimate UI-audit purpose, hence 'caution' rather than 'safe' or 'risky'.
- •Directs the agent to run `agent-browser eval` (arbitrary JS execution in a live browser session) and read `outerHTML` from the rendered site; usage described is read-only inspection, but the tool itself is powerful and could be repurposed if the skill is modified or prompt-injected.
- •Involves live network access to the rendered site for screenshots and DOM capture — legitimate here, but a network-capable workflow.
Exemples
Compare the pricing section of the live site with my Paper frame and fix the spacing and alignment so it matches the rendered page.The hero background looks off in Paper. Check the live rendered element's computed color with agent-browser eval and correct it.Audit the header component for parity against the live site, verifying typography, clipping, and color before declaring it done.name: paper-parity description: Use when comparing or recreating this repo's UI in Paper MCP and fixing parity issues against the live rendered site.
paper-parity
Use this skill whenever working with Paper MCP to recreate, compare, or audit UI from this repo.
Goal
Match the live rendered website in Paper as closely as possible. The live DOM is the source of truth for visual output. Source files are secondary references for ownership, structure, and intent.
Workflow
- Inspect the live rendered page first.
- Use
agent-browser evalto capturegetComputedStyle()for the actual visible element. - Check the parent chain and rendered wrappers before inferring where a style comes from.
- Use
outerHTMLwhen needed to confirm final DOM structure. - Recreate the final rendered values in Paper, not guessed source-level values.
- Use
*.astro,*.tsx, and*.tsfiles only after the DOM check to clarify ownership and structure. - After each meaningful Paper change, take a screenshot and compare again.
DOM Rules
- Do not infer selector paths from Astro or React source alone when layout or styling depends on the final DOM.
- Parent-driven selectors, arbitrary variants, descendant combinators,
astro-islandwrappers, slots, and scoped styles can all change where a style is actually applied. - If a style appears to belong to a component, verify whether it is really coming from a parent wrapper in the rendered DOM.
Color Rules
- For Tailwind utilities, use the computed color from the browser, not the utility name.
- Utilities like
bg-*-100may resolve to generated tints and not the base theme token. - Do not collapse a utility name to a guessed token value without checking computed styles first.
Verification
- Before declaring parity, confirm spacing, typography, alignment, clipping, and color against the live render.
- Screenshots show what is wrong; computed styles explain why.
Du fichier au premier essai
Le téléchargement contient exactement le contenu affiché sur cette fiche. Cette copie peut différer de la dernière version du dépôt source.
Consulter la source et ses fichiers annexesCe téléchargement contient uniquement SKILL.md. Les scripts, références, modèles et dépendances éventuels ne sont pas inclus. Récupérez les fichiers nécessaires depuis la source en conservant leur arborescence avant de poursuivre.
1. Télécharger le fichier
Télécharger SKILL.mdDepuis la racine d’un projet de test, enregistrez le fichier sous .skill-downloads/paper-ui-parity-check-mrwakfw4/SKILL.md, ou utilisez la commande suivante. Ce dossier sert à examiner la skill avant son installation.
Commande pour macOS/Linux ou WSL : un shell POSIX et curl sont nécessaires. Sous Windows sans WSL, utilisez le bouton de téléchargement et créez le dossier manuellement.
mkdir -p '.skill-downloads/paper-ui-parity-check-mrwakfw4' && curl --fail --show-error --location 'https://skills-guides.com/api/skills/paper-ui-parity-check-mrwakfw4/download' --output '.skill-downloads/paper-ui-parity-check-mrwakfw4/SKILL.md.part' && mv '.skill-downloads/paper-ui-parity-check-mrwakfw4/SKILL.md.part' '.skill-downloads/paper-ui-parity-check-mrwakfw4/SKILL.md'2. Vérifier les prérequis
Lisez SKILL.md avant de l’utiliser. Si le fichier cite des scripts ou services externes, examinez-les et préparez les accès nécessaires dans votre environnement de test.
Aucune section de prérequis reconnue dans ce fichier. Cela ne signifie pas qu’il est autonome : les bibliothèques, outils et accès peuvent être cités ailleurs dans le contenu ou dans le dépôt source.
Les plateformes de la fiche sont des indications du catalogue. Les chemins ci-dessous suivent la documentation des outils ; ils ne prouvent pas que cette skill y a été exécutée. Aucune version minimale de ces outils n’est attestée pour cette fiche.
3. Charger la skill
Après vérification, copiez le dossier complet dans le projet avec l’une des commandes ci-dessous, puis ouvrez une nouvelle session de l’outil. La commande s’arrête si un dossier du même nom existe déjà : comparez les fichiers avant de le remplacer.
Claude Code
test -f '.skill-downloads/paper-ui-parity-check-mrwakfw4/SKILL.md' && test -s '.skill-downloads/paper-ui-parity-check-mrwakfw4/SKILL.md' && mkdir -p '.claude/skills' && test ! -e '.claude/skills/paper-parity' && cp -R '.skill-downloads/paper-ui-parity-check-mrwakfw4' '.claude/skills/paper-parity'Cursor
test -f '.skill-downloads/paper-ui-parity-check-mrwakfw4/SKILL.md' && test -s '.skill-downloads/paper-ui-parity-check-mrwakfw4/SKILL.md' && mkdir -p '.cursor/skills' && test ! -e '.cursor/skills/paper-parity' && cp -R '.skill-downloads/paper-ui-parity-check-mrwakfw4' '.cursor/skills/paper-parity'OpenSkills
OpenSkills doit déjà être installé. La procédure locale install/read est contrôlée avec OpenSkills 1.5.0, qui exige Node.js ≥ 20.6.0. Aucun slug du catalogue n’est résolu automatiquement.
Installation officielle d’OpenSkillsopenskills install './.skill-downloads/paper-ui-parity-check-mrwakfw4'openskills read 'paper-ui-parity-check-mrwakfw4'La lecture doit afficher le contenu du fichier installé et son dossier de base. Elle ne lance ni la skill ni ses dépendances.
Pour un agent qui lit AGENTS.md, synchronisez ensuite l’index. Cette commande modifie AGENTS.md : relisez le diff avant de l’utiliser.
openskills syncMode manuel ou autre outil : joignez SKILL.md à une conversation, ou ouvrez-le dans un agent capable de lire les fichiers. Ajoutez les ressources annexes nécessaires. Il n’existe pas de dossier universel reconnu par tous les outils.
4. Faire un premier essai
Utilisez une entrée courte et fictive : un endpoint d’API, un petit document ou un brief d’interface. Dans une nouvelle conversation, joignez le fichier ou donnez son chemin à l’agent, puis adaptez cette demande :
Lis .skill-downloads/paper-ui-parity-check-mrwakfw4/SKILL.md et applique ses instructions à cet exemple : [décrire une entrée de test]. Indique les fichiers, dépendances ou accès qui manquent. Produis le résultat demandé par la skill sans inventer de données ni exécuter de script non examiné.Résultat attendu : une sortie correspondant aux instructions de la skill, ou une liste précise des prérequis manquants. Une simple confirmation de lecture ne valide pas le premier usage. Si une ressource externe est indisponible, ce parcours reste à tester.
Bonnes pratiques React Hook Form
Developpement
Maîtrisez React Hook Form : évitez les anti-patterns, gérez les abonnements, et traitez correctement reset, dirty state et entrées contrôlées.
Migration Emotion vers Mantine
Developpement
Migrer les styled-components Emotion vers des composants Mantine avec style props et modules CSS. Pour convertir .styled.tsx ou supprimer les imports @emotion.
Détecteur de dérive de périmètre
Developpement
Analyse les diffs git par rapport à une intention pour détecter la dérive de périmètre, fichiers non liés et PR trop larges, puis suggère de garder, diviser ou justifier.