Compétences designing-frontend

📦

designing-frontend

Name: designing-frontend
Author: Byunk

Révision du contenu r1 Sûr

Concevoir des interfaces frontend distinctives

Les interfaces génériques peuvent donner l’impression que les produits sont interchangeables. Cette skill guide Claude, Codex et Claude Code vers une direction visuelle précise, un code soigné et une vérification rigoureuse.

Prend en charge: Claude Codex Code(CC)

🥉 79 Bronze

Maintain this Skill? Claim it 🥉 79 Bronze

Installer avec mon Agent

Copiez cette demande dans votre Agent. Elle contient la page Skill de référence et le manifeste.

Demande d’agent

Review the Skillstore skill "designing-frontend" from https://skillstore.io/skills/byunk-designing-frontend.md and its manifest at https://skillstore.io/api/skills/byunk-designing-frontend/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.

Détail Markdown GET /skills/byunk-designing-frontend.md manifest signé GET /api/skills/byunk-designing-frontend/manifest lockfile signé GET /api/skills/byunk-designing-frontend/lockfile

Tester

Utilisation de « designing-frontend ». Une demande pour un tableau de bord d’analytique distinctif.

Résultat attendu:

Un concept de tableau de bord ciblé avec une typographie propre au domaine, une densité structurée, un mouvement maîtrisé et des recommandations pour une interface de production responsive.

Utilisation de « designing-frontend ». Une page d’inscription simple qui semble générique.

Résultat attendu:

Un flux d’inscription reconçu avec une hiérarchie visuelle plus forte, une couleur intentionnelle, des états de survol soignés et des vérifications d’accessibilité.

Utilisation de « designing-frontend ». Une nouvelle page produit pour un outil créatif.

Résultat attendu:

Une direction de page audacieuse avec une typographie expressive, des effets visuels contextuels, des détails d’interaction et des priorités d’implémentation.

Audit de sécurité

Sûr

v9 • 23/07/2026 Ouvrir le rapport versionné

All four static alerts are false positives caused by ordinary visual design language in SKILL.md. No system reconnaissance, prompt injection, or other malicious intent was found.

Fichiers analysés

Lignes analysées

Éléments à examiner

Faux positifs ignorés

Le dernier audit statique et sémantique terminé n’a détecté aucun constat de sécurité confirmé. Cela ne prouve pas que le skill est sans effets secondaires.

Audité par: codex Voir l’historique des audits →

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.

Ouvrir le rapport versionné

Copier le lien du rapport

https://skillstore.io/skills/byunk-designing-frontend/audits/9?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Badge Markdown

[![Skillstore security assessment](https://skillstore.io/badges/skills/byunk-designing-frontend/security.svg)](https://skillstore.io/skills/byunk-designing-frontend?utm_source=security_passport_badge)

Badge HTML

<a href="https://skillstore.io/skills/byunk-designing-frontend?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/byunk-designing-frontend/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

Carte intégrable

<iframe src="https://skillstore.io/embed/skills/byunk-designing-frontend.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

Byunk. (2026). designing-frontend security audit report (audit version 9) [Author version unspecified]. Skillstore. https://skillstore.io/skills/byunk-designing-frontend/audits/9

Citation BibTeX

@techreport{byunk-byunk-designing-frontend-2026,
  author = {Byunk},
  title = {designing-frontend security audit report (audit version 9)},
  institution = {Skillstore},
  year = {2026},
  number = {9},
  url = {https://skillstore.io/skills/byunk-designing-frontend/audits/9},
  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: "designing-frontend security audit report (audit version 9)"
version: "unspecified"
type: report
authors:
  - name: "Byunk"
date-released: "2026-07-23"
url: "https://skillstore.io/skills/byunk-designing-frontend/audits/9"
identifiers:
  - type: other
    value: "skillstore:byunk-designing-frontend:audit:9"
    description: "Skillstore immutable audit report identifier"

Score Skillstore

Pourquoi ce score Niveau de confiance des preuves: Élevé

Architecture

Maintenabilité

Contenu

Communauté

Conformité aux spécifications

Ce que vous pouvez créer

Créer un tableau de bord produit

Créer un tableau de bord soigné qui correspond au domaine du produit et évite un style SaaS générique.

Rafraîchir une page marketing

Transformer une page simple en une expérience web mémorable avec une hiérarchie, un mouvement et une texture visuelle plus affirmés.

Prototyper un nouvel écran d’application

Explorer une direction esthétique précise avant de la convertir en code frontend de production.

Essayez ces prompts

Créer une section d’atterrissage

Utilise la skill designing-frontend pour créer une section d’atterrissage pour une application de finance. Rends-la distinctive, accessible et prête pour la production.

Améliorer un composant existant

Utilise la skill designing-frontend pour reconcevoir ce composant. Conserve le modèle de données, améliore la hiérarchie, le mouvement, la couleur et le comportement responsive.

Concevoir une interface complète

Utilise la skill designing-frontend pour créer une interface d’onboarding complète. Définis la direction esthétique, implémente l’écran et vérifie l’accessibilité.

Créer un système propre à un domaine

Utilise la skill designing-frontend pour créer un système visuel pour un outil d’analytique médicale. Inclus les règles de mise en page, les composants, les états et les notes de vérification.

Bonnes pratiques

Fournir le domaine du produit, l’audience, le framework et les exigences d’accessibilité avant de demander l’implémentation.
Demander une vérification de la hiérarchie, du responsive, des interactions et de l’accessibilité après la première version.
Demander une direction esthétique précise lorsque la marque ou les attentes utilisateur sont déjà connues.

Éviter

Ne pas demander un design moderne générique sans contexte de domaine.
Ne pas ignorer les vérifications d’accessibilité lors de l’ajout d’animations, de contraste ou de mises en page denses.
Ne pas réutiliser les mêmes polices, dégradés et motifs de mise en page dans des projets sans rapport.

Foire aux questions

Cette skill écrit-elle du code frontend ?

Oui. Elle guide le modèle pour écrire du code frontend de qualité production en HTML, CSS, JavaScript, React, Vue ou avec des technologies similaires.

Inclut-elle des ressources de design prêtes à l’emploi ?

Non. Elle fournit des recommandations de conception et d’implémentation, mais elle n’intègre pas de polices, d’images ni de modèles.

Peut-elle aider avec l’accessibilité ?

Oui. Le workflow inclut une validation de l’accessibilité pendant la vérification, notamment pour les interactions, le contraste et la hiérarchie.

Est-elle réservée aux landing pages ?

Non. Elle s’applique aux composants, aux pages, aux écrans d’application et aux expériences frontend complètes.

Quels outils prennent en charge cette skill ?

Le rapport indique une prise en charge de Claude, Codex et Claude Code.

Quel contexte les utilisateurs doivent-ils fournir ?

Fournissez l’audience, l’objectif, le framework, les contraintes de marque, les besoins d’accessibilité et des exemples de styles à éviter.

Détails du développeur

Auteur

Byunk

Licence

MIT

Révision Skillstore

Avis de version

L’auteur n’a déclaré aucune version.

Dépôt

https://github.com/Byunk/claude-code-essentials/tree/main/essentials/skills/designing-frontend

Réf

a39a91716eadede5f4cdefd78178fed4e837a128

Récence de maintenance

26/07/2026

Utilisation

10 téléchargements · 173 vues

Structure de fichiers

📄 SKILL.md