Synthèse automatique
Ce skill guide l'implémentation d'icônes SVG personnalisées dans le backoffice Umbraco, enregistrées via un manifeste d'extension et un registre JavaScript.
Points forts
- Impose la récupération de la documentation officielle Umbraco à jour avant toute génération de code
- Fournit les trois fichiers clés (umbraco-package.json, registre icons.ts, fichier d'icône SVG) sous forme d'exemples minimaux et complets
- Couvre aussi bien la déclaration dans un manifeste d'extension que l'utilisation en template via <umb-icon>
- Indique l'exemple de référence présent dans le code source d'Umbraco pour caler les patterns de production
Limites
- Se limite au type d'extension « icons » et n'aborde pas les autres types d'extensions du backoffice
- Dépend de WebFetch et de la disponibilité des URLs de documentation Umbraco pour produire du code fiable
- Suppose qu'un package d'extension Umbraco (App_Plugins, build TypeScript) est déjà en place
- N'aborde ni l'optimisation des SVG, ni l'accessibilité, ni la gestion du cache des icônes
À utiliser lorsqu'il faut ajouter ou enregistrer un jeu d'icônes SVG personnalisées dans le backoffice d'un projet Umbraco.
À éviter si vous cherchez à étendre d'autres points du backoffice Umbraco (dashboards, property editors, sections) ou si le projet n'est pas un CMS Umbraco.
Analyse de sécurité
SûrThe skill only instructs reading official documentation via WebFetch and creating/editing local icon and manifest files using Write/Edit. There are no destructive commands, data exfiltration, credential handling, or unsafe execution patterns.
Aucun point d'attention détecté
Comment cette analyse est faiteExemples
Create a custom icon set for my Umbraco backoffice package with three SVG icons (a star, a tag and a chart), register them in the manifest and show me how to use one in a header app.I have four SVG files in my assets folder. Turn them into an Umbraco icons registry module, wire up umbraco-package.json and explain how to render them with <umb-icon> in my template.Fetch the latest Umbraco icons documentation, confirm the correct shape of the icons extension manifest and registry for my version, then generate the files.name: umbraco-icons description: Implement custom icons in Umbraco backoffice using official docs version: 1.0.0 location: managed allowed-tools: Read, Write, Edit, WebFetch
Umbraco Icons
What is it?
Icons are custom visual elements that extension authors can register for use throughout the Umbraco backoffice. Custom icons are registered through the manifest and can then be used in any extension that accepts an icon property. Icons are defined as SVG content exported from JavaScript modules.
Documentation
Always fetch the latest docs before implementing:
- Main docs: https://docs.umbraco.com/umbraco-cms/customizing/extending-overview/extension-types/icons
- Foundation: https://docs.umbraco.com/umbraco-cms/customizing/foundation
- Extension Registry: https://docs.umbraco.com/umbraco-cms/customizing/extending-overview/extension-registry
Reference Example
The Umbraco source includes a working example:
Location: /Umbraco-CMS/src/Umbraco.Web.UI.Client/examples/icons/
This example demonstrates how to register and use custom SVG icons. Study this for production patterns.
Workflow
- Fetch docs - Use WebFetch on the URLs above
- Ask questions - What icons needed? SVG source available?
- Generate files - Create manifest + icon files based on latest docs
- Explain - Show what was created and how to use the icons
Minimal Examples
Manifest (umbraco-package.json)
{
"name": "My Icons Package",
"extensions": [
{
"type": "icons",
"alias": "My.Icons",
"name": "My Custom Icons",
"js": "/App_Plugins/MyPackage/icons.js"
}
]
}
Icons Registry (icons.ts)
export default [
{
name: 'my-custom-icon',
path: () => import('./icons/my-custom-icon.js'),
},
{
name: 'my-other-icon',
path: () => import('./icons/my-other-icon.js'),
},
];
Icon File (icons/my-custom-icon.ts)
export default `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
</svg>`;
Using Custom Icons
// In any extension manifest
const manifest = {
type: 'headerApp',
kind: 'button',
alias: 'My.HeaderApp',
name: 'My App',
meta: {
label: 'My App',
icon: 'my-custom-icon', // Use your custom icon
},
};
In HTML Templates
<umb-icon name="my-custom-icon"></umb-icon>
That's it! Always fetch fresh docs, keep examples minimal, generate complete working code.
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/umbraco-custom-icons-ms9wny7n/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/umbraco-custom-icons-ms9wny7n' && curl --fail --show-error --location 'https://skills-guides.com/api/skills/umbraco-custom-icons-ms9wny7n/download' --output '.skill-downloads/umbraco-custom-icons-ms9wny7n/SKILL.md.part' && mv '.skill-downloads/umbraco-custom-icons-ms9wny7n/SKILL.md.part' '.skill-downloads/umbraco-custom-icons-ms9wny7n/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.
Outils déclarés par l’auteur (à vérifier dans votre agent) : Read, Write, Edit, WebFetch
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/umbraco-custom-icons-ms9wny7n/SKILL.md' && test -s '.skill-downloads/umbraco-custom-icons-ms9wny7n/SKILL.md' && mkdir -p '.claude/skills' && test ! -e '.claude/skills/umbraco-icons' && cp -R '.skill-downloads/umbraco-custom-icons-ms9wny7n' '.claude/skills/umbraco-icons'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/umbraco-custom-icons-ms9wny7n'openskills read 'umbraco-custom-icons-ms9wny7n'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/umbraco-custom-icons-ms9wny7n/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.