Communitygithub.com

jhd3197/AgentSite

Portfolio personnel ou de studio — introduction typographique percutante, grille de projets, liens vers des études de cas, contact.

Qu'est-ce que AgentSite ?

Ce skill génère un site portfolio conçu pour susciter l'envie de travailler avec vous. Il s'adresse aux développeurs, designers ou studios utilisant des agents IA comme Claude Code ou Cursor. Le skill produit un site minimaliste et professionnel avec une navigation fine (3-4 liens), une introduction typographique imposante, une grille de 4 à 9 cartes de projets (avec image de couverture, titre, rôle et année), une section À propos avec photo ou signature, une liste de clients ou presse (uniquement si authentique), et une section contact complète (email, réseaux, lien de réservation). Il impose des règles de qualité strictes : un seul ton typographique décisif, des noms de projets réels avec espaces réservés explicites, et aucune animation superflue (carrousels, parallaxe, vidéo automatique). Les sections vides doivent être honnêtes, sans projets factices.

Compatible avec~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/jhd3197/AgentSite/tree/HEAD/agentsite/skills/portfolio

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

Documentation

Site portfolio

Un site personnel ou de studio dont le rôle est de faire dire au visiteur : « Je veux travailler avec cette personne. »

Éléments requis

  1. Navigation fine — nom / marque, 3-4 liens (Travail / À propos / Écrits / Contact).
  2. Introduction — grande déclaration typographique (taille d'affichage en clamp()). Une phrase sur qui-quoi-pour-quoi, plus une fine bande de métadonnées (localisation, disponibilité, poste actuel).
  3. Grille de projets — 4-9 cartes d'étude de cas. Chaque carte : image de couverture / bloc coloré, titre du projet, rôle en une ligne, année. Le survol soulève subtilement la carte. Le clic mène vers une URL d'étude de cas (simulée).
  4. À propos — court paragraphe biographique + photo OU signature.
  5. Clients / presse sélectionnés — bande de logos discrète OU liste. Ignorer complètement la section s'il n'y a pas de contenu réel.
  6. Contact — email (mailto), éventuellement Twitter/LinkedIn, lien de réservation de calendrier.

Règles de qualité

  • Un seul ton typographique décisif. Si l'affichage est en sérif, le corps est sans sérif (ou vice versa).
  • Cartes de projets : vrais noms + rôles. Utiliser des espaces réservés étiquetés (« [Image de couverture — remplacer par une photo vedette] ») et non des titres en Lorem ipsum.
  • Pas de carrousels. Pas de parallaxe. Pas de lecture vidéo automatique.
  • Les états vides / « plus à venir » sont honnêtes. Ne pas remplir la grille avec des projets factices.

Skills associés