interface-design

Par elophanto · elophanto

Skill Claude dédié au design d'interfaces produit (dashboards, admin panels, SaaS) au sein de l'agent autonome EloPhanto, avec une méthodologie anti-défauts détaillée.

npx skills add https://github.com/elophanto/elophanto --skill interface-design

Skill interface-design — EloPhanto

Ce skill est l'un des modules de comportement de l'agent autonome EloPhanto (elophanto/elophanto), un agent open-source conçu pour créer et opérer des activités entièrement de façon autonome. Dans ce contexte, le skill interface-design définit comment Claude doit aborder la conception d'interfaces produit : dashboards, admin panels, applications SaaS, outils internes, portails et back-offices.

Ce que contient ce skill

Contrairement à un simple squelette, ce SKILL.md est substantiellement rédigé. Il articule une méthodologie complète en plusieurs étapes : exploration du domaine produit, définition d'une intention de design avant tout code, système de tokens CSS sémantiques, hiérarchie typographique, gestion des surfaces et de l'élévation, principes d'animation, et gestion des états interactifs. Il inclut également des « checks » de qualité (swap test, squint test, signature test, token test) que Claude est censé exécuter avant de présenter son travail.

Le skill délimite aussi explicitement son périmètre : il s'applique aux interfaces produit, et redirige les demandes de design marketing (landing pages, sites de campagne) vers un autre skill (/frontend-design).

Comment l'agent l'utilise

Lorsqu'une conversation avec EloPhanto déclenche l'un des mots-clés listés (interface, dashboard, admin, saas, portal, etc.), ce skill entre en jeu. Claude adopte alors la posture et le processus décrits : il explore d'abord le domaine métier du produit, formule une direction visuelle argumentée, la soumet à confirmation, puis construit l'interface en appliquant les principes de craft définis. Il propose également de sauvegarder les décisions dans un fichier .interface-design/system.md pour assurer la cohérence sur la durée du projet.

Commandes et références associées

Le skill expose plusieurs commandes utilisables directement (/interface-design:status, /interface-design:audit, /interface-design:critique, /interface-design:extract) et pointe vers des fichiers de référence internes (references/principles.md, references/validation.md, references/critique.md) pour les approfondissements. Ces fichiers font partie de la structure du repository EloPhanto et complètent ce skill principal.

Skills similaires