Frontend UI Engineering Skill for Muse **Nom FR:** Skill Ingénierie d'Interfaces Web pour Muse **Tagline EN:** Production-quality UIs that never look AI-generated **Tagline FR:** Des interfaces pro, jamais d'esthétique « IA » **Créateur:** @addyosmani **URL source:** https://github.com/addyosmani/agent-skills/blob/main/skills/frontend-ui-engineering/SKILL.md **Licence — Type — Catégorie — Mots-clés:** MIT — Skill — Design — UI components, accessible design, responsive design, WCAG 2.1, design systems, React, keyboard navigation, skeleton loading, composition patterns, anti-AI-aesthetic, focus management **Description EN:** Curated by Skill Harbor — a free, open-source skill (MIT) by @addyosmani, listed here with credit to its creator. A complete operating manual for building production-quality, accessible, responsive user interfaces with an agent: component architecture (colocated files, composition over configuration, focused components, data fetching separated from presentation), a state-management ladder (local state → lifted state → context → URL state → server state → global store), and design-system adherence with a reference-led process for finding a real visual direction. Its signature section is the anti-"AI aesthetic" playbook — it names the tells (purple/indigo everything, excessive gradients, rounded-2xl on everything, generic hero sections, stock card grids, shadow-heavy design) and replaces each with production-grade alternatives. Covers WCAG 2.1 AA accessibility (keyboard navigation, ARIA labels, focus management in dialogs, meaningful empty and error states), mobile-first responsive design with concrete breakpoints, skeleton loading and optimistic updates, plus two brutally honest tables — "Common Rationalizations" (why "we'll make it responsive later" is a lie) and "Red Flags" — ending with a verification checklist before anything ships. Discovered via skills.sh. Honest note: the code examples are React/TSX-flavored (Tailwind classes, hooks) — the principles are framework-agnostic, but you'll translate the idioms if your stack differs; it also demands real standards (axe-core, keyboard testing), so shipping "good enough" isn't its vocabulary. Skill Harbor never reviews the code, review it yourself before use. Not verified. **Description FR:** Sélectionné par Skill Harbor — un skill gratuit et open-source (MIT) par @addyosmani, listé ici avec crédit à son créateur. Un manuel d'exploitation complet pour construire avec un agent des interfaces accessibles, responsives et de qualité production : architecture de composants (fichiers colocalisés, composition plutôt que configuration, composants focalisés, récupération de données séparée de la présentation), une échelle de gestion d'état (état local → état remonté → contexte → état d'URL → état serveur → store global), et le respect du design system avec un processus guidé par des références pour trouver une vraie direction visuelle. Sa section signature est le playbook anti-« esthétique IA » — il nomme les signes (violet/indigo partout, dégradés excessifs, rounded-2xl sur tout, héros génériques, grilles de cartes stock, ombres lourdes) et remplace chacun par une alternative de qualité production. Couvre l'accessibilité WCAG 2.1 AA (navigation clavier, libellés ARIA, gestion du focus dans les dialogues, états vides et d'erreur significatifs), le responsive mobile-first avec des points de rupture concrets, le chargement par squelettes et les mises à jour optimistes, plus deux tableaux brutalement honnêtes — « Rationalisations courantes » (pourquoi « on fera le responsive plus tard » est un mensonge) et « Signaux d'alerte » — se terminant par une checklist de vérification avant toute livraison. Découvert via skills.sh. Note honnête : les exemples de code sont orientés React/TSX (classes Tailwind, hooks) — les principes sont indépendants du framework, mais il faudra traduire les idiomes si votre stack diffère ; il exige aussi de vrais standards (axe-core, tests clavier), donc « assez bien » n'est pas son vocabulaire. Skill Harbor ne vérifie jamais le code, examinez-le vous-même avant usage. Non vérifié. **Install prompt EN:** ``` Prerequisites: a web project to build or improve UIs on; examples are React/TSX-flavored (Tailwind classes, hooks) — translate idioms to your stack. No API keys. Optional: axe-core or your dev-tools accessibility checker for the verification step. Install "Frontend UI Engineering Skill for Muse" for me. Builds production-quality, accessible, responsive interfaces: component architecture (composition over configuration, container/presentation separation), state-management ladder, design-system adherence, the anti-AI-aesthetic playbook, WCAG 2.1 AA accessibility (keyboard nav, ARIA, focus management), mobile-first responsive breakpoints, skeleton loading and optimistic updates, red-flag and rationalization tables, and a ship-ready verification checklist. Repository: https://github.com/addyosmani/agent-skills/blob/main/skills/frontend-ui-engineering/SKILL.md 1. Fetch the SKILL.md file (and any helper files: references/) from the repository path into a temporary folder and summarize what it does in one or two sentences. 2. Safety check: review the SKILL.md and scripts for anything suspicious (unexpected network calls, shell commands, credential harvesting). This repo should contain zero secrets in code, credentials only via the secure vault, allowed hosts declared in the SKILL.md. Verify that holds here; STOP on any red flag and tell me. 3. Install it as a skill: copy SKILL.md and its helper files into the agent's skills directory, in a folder named "frontend-ui-engineering". 4. Verify with no network calls: frontmatter valid, files in place. 5. Report what was installed, where, and what I still need to do myself (e.g. point it at the UI or components to build/improve). GitHub is optional: if I have a GitHub account or the gh CLI, you may use it; otherwise public access is fine. Never require it unless it's in the prerequisites above. Rules: don't touch anything outside the temp folder and the install target. If anything looks off, stop and ask me. ``` **Install prompt FR:** ``` Prérequis : un projet web sur lequel construire ou améliorer des interfaces ; les exemples sont orientés React/TSX (classes Tailwind, hooks) — traduisez les idiomes à votre stack. Aucune clé API. Optionnel : axe-core ou le vérificateur d'accessibilité de vos dev-tools pour l'étape de vérification. Installe-moi « Skill Ingénierie d'Interfaces Web pour Muse ». Construit des interfaces accessibles, responsives et de qualité production : architecture de composants (composition plutôt que configuration, séparation conteneur/présentation), échelle de gestion d'état, respect du design system, playbook anti-esthétique IA, accessibilité WCAG 2.1 AA (navigation clavier, ARIA, gestion du focus), points de rupture mobile-first, chargement par squelettes et mises à jour optimistes, tableaux de signaux d'alerte et de rationalisations, et une checklist de vérification avant livraison. Dépôt : https://github.com/addyosmani/agent-skills/blob/main/skills/frontend-ui-engineering/SKILL.md 1. Récupérez le fichier SKILL.md (et les fichiers auxiliaires : references/) depuis le chemin du dépôt dans un dossier temporaire et résumez ce qu'il fait en une ou deux phrases. 2. Contrôle de sécurité : examinez le SKILL.md et les scripts pour tout contenu suspect (appels réseau inattendus, commandes shell, récolte d'identifiants). Ce dépôt ne doit contenir aucun secret dans le code ; les identifiants passent uniquement par le coffre sécurisé, les hôtes autorisés sont déclarés dans le SKILL.md. Vérifiez que c'est bien le cas ; STOP sur le moindre signal d'alerte et prévenez-moi. 3. Installez-le comme skill : copiez SKILL.md et ses fichiers auxiliaires dans le répertoire des skills de l'agent, dans un dossier nommé « frontend-ui-engineering ». 4. Vérifiez sans appels réseau : frontmatter valide, fichiers en place. 5. Indiquez ce qui a été installé, où, et ce qu'il me reste à faire moi-même (ex. indiquer l'interface ou les composants à construire/améliorer). GitHub est optionnel : si j'ai un compte GitHub ou le CLI gh, vous pouvez l'utiliser ; sinon, l'accès public suffit. Règles : ne touchez à rien en dehors du dossier temporaire et de la cible d'installation. Si quelque chose semble anormal, arrêtez et demandez-moi. ```

Production-quality UIs that never look AI-generated **Tagline FR:** Des interfaces pro, jamais d'esthétique « IA » **Créateur:** @addyosmani **URL source:** https://github.com/addyosmani/agent-skills/blob/main/skills/frontend-ui-engineering/SKILL.md **Licence — Type — Catégorie — Mots-clés:** MIT — Skill — Design — UI components, accessible design, responsive design, WCAG 2.1, design systems, React, keyboard navigation, skeleton loading, composition patterns, anti-AI-aesthetic, focus management **Description EN:** Curated by Skill Harbor — a free, open-source skill (MIT) by @addyosmani, listed here with credit to its creator. A complete operating manual for building production-quality, accessible, responsive user interfaces with an agent: component architecture (colocated files, composition over configuration, focused components, data fetching separated from presentation), a state-management ladder (local state → lifted state → context → URL state → server state → global store), and design-system adherence with a reference-led process for finding a real visual direction. Its signature section is the anti-"AI aesthetic" playbook — it names the tells (purple/indigo everything, excessive gradients, rounded-2xl on everything, generic hero sections, stock card grids, shadow-heavy design) and replaces each with production-grade alternatives. Covers WCAG 2.1 AA accessibility (keyboard navigation, ARIA labels, focus management in dialogs, meaningful empty and error states), mobile-first responsive design with concrete breakpoints, skeleton loading and optimistic updates, plus two brutally honest tables — "Common Rationalizations" (why "we'll make it responsive later" is a lie) and "Red Flags" — ending with a verification checklist before anything ships. Discovered via skills.sh. Honest note: the code examples are React/TSX-flavored (Tailwind classes, hooks) — the principles are framework-agnostic, but you'll translate the idioms if your stack differs; it also demands real standards (axe-core, keyboard testing), so shipping "good enough" isn't its vocabulary. Skill Harbor never reviews the code, review it yourself before use. Not verified. **Description FR:** Sélectionné par Skill Harbor — un skill gratuit et open-source (MIT) par @addyosmani, listé ici avec crédit à son créateur. Un manuel d'exploitation complet pour construire avec un agent des interfaces accessibles, responsives et de qualité production : architecture de composants (fichiers colocalisés, composition plutôt que configuration, composants focalisés, récupération de données séparée de la présentation), une échelle de gestion d'état (état local → état remonté → contexte → état d'URL → état serveur → store global), et le respect du design system avec un processus guidé par des références pour trouver une vraie direction visuelle. Sa section signature est le playbook anti-« esthétique IA » — il nomme les signes (violet/indigo partout, dégradés excessifs, rounded-2xl sur tout, héros génériques, grilles de cartes stock, ombres lourdes) et remplace chacun par une alternative de qualité production. Couvre l'accessibilité WCAG 2.1 AA (navigation clavier, libellés ARIA, gestion du focus dans les dialogues, états vides et d'erreur significatifs), le responsive mobile-first avec des points de rupture concrets, le chargement par squelettes et les mises à jour optimistes, plus deux tableaux brutalement honnêtes — « Rationalisations courantes » (pourquoi « on fera le responsive plus tard » est un mensonge) et « Signaux d'alerte » — se terminant par une checklist de vérification avant toute livraison. Découvert via skills.sh. Note honnête : les exemples de code sont orientés React/TSX (classes Tailwind, hooks) — les principes sont indépendants du framework, mais il faudra traduire les idiomes si votre stack diffère ; il exige aussi de vrais standards (axe-core, tests clavier), donc « assez bien » n'est pas son vocabulaire. Skill Harbor ne vérifie jamais le code, examinez-le vous-même avant usage. Non vérifié. **Install prompt EN:** ``` Prerequisites: a web project to build or improve UIs on; examples are React/TSX-flavored (Tailwind classes, hooks) — translate idioms to your stack. No API keys. Optional: axe-core or your dev-tools accessibility checker for the verification step. Install "Frontend UI Engineering Skill for Muse" for me. Builds production-quality, accessible, responsive interfaces: component architecture (composition over configuration, container/presentation separation), state-management ladder, design-system adherence, the anti-AI-aesthetic playbook, WCAG 2.1 AA accessibility (keyboard nav, ARIA, focus management), mobile-first responsive breakpoints, skeleton loading and optimistic updates, red-flag and rationalization tables, and a ship-ready verification checklist. Repository: https://github.com/addyosmani/agent-skills/blob/main/skills/frontend-ui-engineering/SKILL.md 1. Fetch the SKILL.md file (and any helper files: references/) from the repository path into a temporary folder and summarize what it does in one or two sentences. 2. Safety check: review the SKILL.md and scripts for anything suspicious (unexpected network calls, shell commands, credential harvesting). This repo should contain zero secrets in code, credentials only via the secure vault, allowed hosts declared in the SKILL.md. Verify that holds here; STOP on any red flag and tell me. 3. Install it as a skill: copy SKILL.md and its helper files into the agent's skills directory, in a folder named "frontend-ui-engineering". 4. Verify with no network calls: frontmatter valid, files in place. 5. Report what was installed, where, and what I still need to do myself (e.g. point it at the UI or components to build/improve). GitHub is optional: if I have a GitHub account or the gh CLI, you may use it; otherwise public access is fine. Never require it unless it's in the prerequisites above. Rules: don't touch anything outside the temp folder and the install target. If anything looks off, stop and ask me. ``` **Install prompt FR:** ``` Prérequis : un projet web sur lequel construire ou améliorer des interfaces ; les exemples sont orientés React/TSX (classes Tailwind, hooks) — traduisez les idiomes à votre stack. Aucune clé API. Optionnel : axe-core ou le vérificateur d'accessibilité de vos dev-tools pour l'étape de vérification. Installe-moi « Skill Ingénierie d'Interfaces Web pour Muse ». Construit des interfaces accessibles, responsives et de qualité production : architecture de composants (composition plutôt que configuration, séparation conteneur/présentation), échelle de gestion d'état, respect du design system, playbook anti-esthétique IA, accessibilité WCAG 2.1 AA (navigation clavier, ARIA, gestion du focus), points de rupture mobile-first, chargement par squelettes et mises à jour optimistes, tableaux de signaux d'alerte et de rationalisations, et une checklist de vérification avant livraison. Dépôt : https://github.com/addyosmani/agent-skills/blob/main/skills/frontend-ui-engineering/SKILL.md 1. Récupérez le fichier SKILL.md (et les fichiers auxiliaires : references/) depuis le chemin du dépôt dans un dossier temporaire et résumez ce qu'il fait en une ou deux phrases. 2. Contrôle de sécurité : examinez le SKILL.md et les scripts pour tout contenu suspect (appels réseau inattendus, commandes shell, récolte d'identifiants). Ce dépôt ne doit contenir aucun secret dans le code ; les identifiants passent uniquement par le coffre sécurisé, les hôtes autorisés sont déclarés dans le SKILL.md. Vérifiez que c'est bien le cas ; STOP sur le moindre signal d'alerte et prévenez-moi. 3. Installez-le comme skill : copiez SKILL.md et ses fichiers auxiliaires dans le répertoire des skills de l'agent, dans un dossier nommé « frontend-ui-engineering ». 4. Vérifiez sans appels réseau : frontmatter valide, fichiers en place. 5. Indiquez ce qui a été installé, où, et ce qu'il me reste à faire moi-même (ex. indiquer l'interface ou les composants à construire/améliorer). GitHub est optionnel : si j'ai un compte GitHub ou le CLI gh, vous pouvez l'utiliser ; sinon, l'accès public suffit. Règles : ne touchez à rien en dehors du dossier temporaire et de la cible d'installation. Si quelque chose semble anormal, arrêtez et demandez-moi. ```

Version: