Synthèse automatique
Ce skill automatise l'ajout d'un nouveau projet au portfolio interactif en exécutant un script qui met à jour Projects.tsx, enregistre l'image de couverture WebP dans ProjectSection.tsx et convertit les images sources.
Points forts
- Réduit une tâche multi-fichiers à une seule commande avec des paramètres clairs
- Convertit automatiquement les images JPG/PNG en WebP optimisé via cwebp
- Gère les annotations de stack en HTML `<b>` et les convertit en JSX React
- Fournit une checklist de vérification explicite (typecheck, lint, chemins d'images)
Limites
- Fortement lié à l'arborescence et aux fichiers précis de ce portfolio (Projects.tsx, ProjectSection.tsx, Icons.tsx)
- Suppose que cwebp est installé sur la machine
- Les icônes disponibles sont limitées à la liste prédéfinie dans Icons.tsx
Utilisez-le lorsque vous devez publier un nouveau projet dans la galerie de ce portfolio sans éditer manuellement les composants React.
Ne l'utilisez pas sur un autre projet ou dépôt, car les chemins, les composants et la liste d'icônes sont spécifiques à ce portfolio.
Analyse de sécurité
PrudenceThe skill performs legitimate local automation, but it invokes an unaudited helper script and modifies repository source files and assets. There is no evidence of network exfiltration, secret access, or destructive commands, so caution is appropriate rather than risky.
- •Executes a local Node helper script that modifies source files and writes image assets; the script contents are not included, so its exact behavior cannot be audited.
- •Requires local filesystem access and the external `cwebp` binary to convert/copy user-supplied image paths.
- •Contains hard-coded absolute `file:///Users/ali/...` paths, exposing developer-specific environment details and reducing portability.
Exemples
Add a new project to my portfolio: name "Solar Tracker", icon "energy", duration "2024", description "Dashboard for <b>React</b> and <b>Node</b> solar monitoring.", cover "/Users/ali/Desktop/solar.jpg", links '[{"tooltip": "See source", "link": "https://github.com/ali/solar", "icon": "code"}]'Run the add-project script for a project called "Retro Snake" with icon "videoGame", duration "2022 - 2023", the description "Classic snake game rebuilt in <b>TypeScript</b>", and cover image at ./assets/snake.pngAfter adding the project, confirm it appears in Projects.tsx, the WebP is in the coverImages array, the file exists under public/images/projects, and run npm run typecheck and npm run lint.Add Project Skill
Use this skill when adding a new project entry to the interactive portfolio gallery dashboard.
Instructions
The helper script automates appending the project properties to Projects.tsx, adding the WebP cover image to ProjectSection.tsx coverImages, and converting the raw image assets.
Usage
Run the script from the repository root:
node .agents/skills/add-project/scripts/add-project.mjs \
--name "Project Name" \
--icon "icon_key" \
--duration "YYYY - YYYY" \
--description "Project description with optional <b>bold</b> stack annotations." \
--cover "/path/to/source_image.jpg" \
--links '[{"tooltip": "See source", "link": "https://...", "icon": "code"}]'
Parameter Details
--name: (Required) Display title of the project.--icon: (Required) Icon name mapping toIcons.tsx(e.g.security,energy,app,code,link,smartToy,videoGame,timer,chat).--duration: (Required) Date or duration string (e.g.,"2025","2023 - 2024").--description: (Required) Detailed description. HTML bold tags<b>...</b>are parsed into React JSX bold markup automatically.--cover: (Required) Absolute or relative path to the project's cover image. The script automatically converts JPG/PNG images to optimized.webpviacwebpand copies them topublic/images/projects/.--links: (Optional) JSON array string containing project link objects. Each link object supportstooltip,link, andiconproperties.
Verification Checklist
- Confirm that the new project is listed in Projects.tsx.
- Confirm that the WebP image is added to the
coverImagesarray in ProjectSection.tsx. - Verify that the optimized cover image exists at
public/images/projects/<project_slug>.webp. - Run
npm run typecheckandnpm run lintto ensure zero compilation or syntax errors.
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/add-project-to-portfolio-ms2s7cva/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/add-project-to-portfolio-ms2s7cva' && curl --fail --show-error --location 'https://skills-guides.com/api/skills/add-project-to-portfolio-ms2s7cva/download' --output '.skill-downloads/add-project-to-portfolio-ms2s7cva/SKILL.md.part' && mv '.skill-downloads/add-project-to-portfolio-ms2s7cva/SKILL.md.part' '.skill-downloads/add-project-to-portfolio-ms2s7cva/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.
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
Le fichier ne fournit pas un en-tête name/description exploitable pour cette procédure native. Le téléchargement reste disponible pour lecture ; utilisez le mode manuel ci-dessous.
Mode 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/add-project-to-portfolio-ms2s7cva/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.