design-guide
Créer des composants d’interface utilisateur Paperclip cohérents
Le travail d’interface utilisateur Paperclip peut diverger lorsque les composants, les tokens et les mises en page sont créés de manière ad hoc. Cette compétence fournit à Claude, Codex et Claude Code un guide de conception partagé pour une implémentation frontend cohérente.
Installer avec mon Agent
Copiez cette demande dans votre Agent. Elle contient la page Skill de référence et le manifeste.
Review the Skillstore skill "design-guide" from https://skillstore.io/skills/getpaperclipai-design-guide.md and its manifest at https://skillstore.io/api/skills/getpaperclipai-design-guide/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.Votre Agent doit toujours présenter son plan et demander toute confirmation exigée par la politique de sécurité.
Ressources lisibles par les agents
Utilisez ces liens lorsqu’un Agent IA, un crawler ou un script a besoin d’un contexte propre au lieu de lire toute la page.
Tester
Utilisation de « design-guide ». Examiner un nouveau composant de ligne de ticket pour Paperclip.
Résultat attendu:
La réponse identifie EntityRow comme le bon modèle de base, exige StatusIcon avant PriorityIcon et recommande StatusBadge dans le slot final.
Utilisation de « design-guide ». Planifier des cartes de métriques de tableau de bord pour une page d’agents.
Résultat attendu:
La réponse recommande MetricCard dans une grille responsive à quatre colonnes, avec des tokens sémantiques, de petites ombres et une typographie établie pour les valeurs et les libellés.
Utilisation de « design-guide ». Mettre à jour le guide de conception après l’ajout d’un sélecteur réutilisable.
Résultat attendu:
La réponse liste la section du guide de conception à ajouter, les variantes à afficher, les états interactifs à inclure et les champs de l’index des composants à mettre à jour.
Audit de sécurité
SûrReviewed all 84 static findings in SKILL.md and references/component-index.md. The findings are false positives caused by markdown inline code, TSX examples, CSS class names, file paths, and responsive grid guidance. No prompt injection, data exfiltration, command execution intent, or malicious instructions were found.
Facteurs de risque
⚙️ Commandes externes (80)
Partager et citer ce rapport
Partagez le rapport d’évaluation versionné, le badge neutre, la carte intégrable et les citations. Skillstore présente les preuves sans décider si ce Skill est sûr.
Copier le lien du rapport
https://skillstore.io/skills/getpaperclipai-design-guide/audits/3?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportBadge Markdown
[](https://skillstore.io/skills/getpaperclipai-design-guide?utm_source=security_passport_badge)Badge HTML
<a href="https://skillstore.io/skills/getpaperclipai-design-guide?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/getpaperclipai-design-guide/security.svg" alt="Skillstore security assessment" loading="lazy"></a>Carte intégrable
<iframe src="https://skillstore.io/embed/skills/getpaperclipai-design-guide.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>Citations académiques (APA · BibTeX · CFF)
Citation APA
getpaperclipai. (2026). design-guide security audit report (audit version 3) [Author version unspecified]. Skillstore. https://skillstore.io/skills/getpaperclipai-design-guide/audits/3Citation BibTeX
@techreport{getpaperclipai-getpaperclipai-design-guide-2026,
author = {getpaperclipai},
title = {design-guide security audit report (audit version 3)},
institution = {Skillstore},
year = {2026},
number = {3},
url = {https://skillstore.io/skills/getpaperclipai-design-guide/audits/3},
note = {Author version unspecified}
}CITATION.cff
cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "design-guide security audit report (audit version 3)"
version: "unspecified"
type: report
authors:
- name: "getpaperclipai"
date-released: "2026-07-06"
url: "https://skillstore.io/skills/getpaperclipai-design-guide/audits/3"
identifiers:
- type: other
value: "skillstore:getpaperclipai-design-guide:audit:3"
description: "Skillstore immutable audit report identifier"
Score Skillstore
Pourquoi ce score Niveau de confiance des preuves: ÉlevéCe que vous pouvez créer
Créer un nouveau composant
Utiliser le guide pour choisir les tokens, variantes, noms de fichiers, états et exemples du guide de conception pour un nouveau composant Paperclip.
Examiner la cohérence de l’interface utilisateur
Comparer une page ou une fonctionnalité aux modèles Paperclip de typographie, mise en page, statut, priorité et interaction.
Documenter les modifications de composants
Mettre à jour l’index des composants et la page du guide de conception lorsqu’un modèle d’interface utilisateur réutilisable change ou s’étend.
Essayez ces prompts
Utilise la compétence design-guide pour examiner mon plan pour un nouveau composant Paperclip. Vérifie les tokens, la typographie, les variantes, l’emplacement des fichiers et les mises à jour du guide de conception.
Utilise la compétence design-guide pour implémenter ce composant Paperclip. Suis la composition shadcn/ui existante, les variantes CVA, l’utilisation de cn, les conventions de statut et les règles de nommage des fichiers.
Utilise la compétence design-guide pour refactoriser cette mise en page Paperclip. Aligne-la avec la barre latérale, le fil d’Ariane, le contenu principal, le panneau de propriétés, l’espacement et les modèles responsives.
Utilise la compétence design-guide pour auditer cette modification UI afin de détecter les écarts par rapport au système de design. Identifie les modèles dupliqués, la documentation manquante, les tokens incohérents, les états faibles et les opportunités de réutilisation de composants.
Bonnes pratiques
- Commencer par les primitives existantes et les composites personnalisés avant de créer un nouveau composant.
- Utiliser des tokens sémantiques, une typographie établie et des composants partagés de statut ou de priorité.
- Mettre à jour à la fois la page du guide de conception et l’index des composants lorsque l’interface utilisateur réutilisable change.
Éviter
- Ne pas coder en dur des couleurs brutes, des échelles typographiques personnalisées ou un style de statut ponctuel.
- Ne pas modifier directement les primitives shadcn/ui lorsque la composition peut les étendre.
- Ne pas ajouter de composants réutilisables sans exemples, états, variantes et documentation de référence.
Foire aux questions
Qu’aide cette compétence à créer ?
Quelle stack suppose-t-elle ?
Remplace-t-elle la revue de design visuel ?
Peut-elle créer de nouveaux composants ?
Inclut-elle un inventaire des composants ?
Est-elle sûre à utiliser ?
Détails du développeur
Auteur
getpaperclipaiLicence
MIT
Révision Skillstore
r1
Avis de version
L’auteur n’a déclaré aucune version.
Réf
a06681402992ceae98ba04d54cfd4ab004862696
Récence de maintenance
18/07/2026
Utilisation
1 téléchargements · 0 vues
Structure de fichiers