Communitygithub.com

mohammadNafia/portfolio

Système de design et règles de construction pour un site portfolio personnel « pixel-display » gris clair (navigation à pilule flottante, titres de section en police pixel avec soulignés ondulés dessinés à la main, séparateurs de section en dents de scie/papier déchiré, héroïne en cartes éventail, révélations au défilement avec flou, marquee de logo, carrousel d’études de cas).

Qu'est-ce que portfolio ?

Ce skill définit un système de design et de motion complet pour un site portfolio personnel au style « pixel-display ». Il impose des règles strictes : deux polices seulement (pixel pour les titres, sans géométrique pour le reste), une seule couleur d’accent (bleu `#0B8DF8`), des titres en majuscules avec souligné ondulé SVG, des séparateurs en dents de scie entre les sections de fond différent, et des transitions de révélation au défilement standardisées. Toute nouvelle section, composant ou page doit suivre ce système à la lettre pour garantir une cohérence parfaite. Le skill est conçu pour être utilisé avec Claude Code, Cursor ou tout autre assistant IA travaillant sur le projet. Il fournit des fichiers de référence (tokens, composants, motion, recettes de sections) qui décrivent précisément comment implémenter chaque élément, et inclut une checklist d’auto-vérification avant finalisation. Son objectif principal est d’éviter toute dérive stylistique : tout ajout ultérieur doit sembler avoir été conçu par la même personne le même jour.

Compatible avec~Claude Code~Codex CLI~Cursor
Part ofDesign & UI
npx skills add https://github.com/mohammadNafia/portfolio/tree/HEAD/docs
Voir l'original→Voir toutes les compétences

Demander à votre IA préférée

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

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentation

Ceci est le texte original collé, conservé pour la traçabilité. Il ne s'agit pas de la copie de travail.

Le système faisant autorité se trouve dans docs/pixel-portfolio-style/, avec ses quatre fichiers de référence et assets/base.css. Lisez celui-ci.

Ce fichier est antérieur à deux ajouts dont dépend la construction : la règle n°0 (appliquer le système en place ; ne jamais réécrire une application fonctionnelle et testée pour adopter un aspect — la règle qui a décidé toute la restylisation) et la règle n°9 plus le pointeur references/rtl-and-locales.md. Suivre cette copie à la place vous ferait manquer les deux.

Style Portfolio Pixel

Un système visuel + motion complet. Suivez-le à la lettre. Lorsque quelque chose n'est pas couvert ici, choisissez l'option la plus sobre, la plus arrondie et la plus géométrique — n'introduisez jamais une nouvelle couleur, une nouvelle police, un nouveau rayon ou une nouvelle courbe d'assouplissement.

Non-négociables (à lire à chaque fois)

  1. Deux polices seulement. Police d'affichage pixel pour les titres de section + le mot-clé du héros. Sans géométrique pour tout le reste.
  2. Une seule couleur d'accent. Bleu #0B8DF8. Noir #111 pour les boutons secondaires. Rien d'autre.
  3. Chaque titre de section est : police pixel en majuscules + souligné ondulé SVG dessiné à la main, centré.
  4. Chaque section se révèle au défilement avec la même transition de flou (voir references/motion.md).
  5. Les rayons sont de type pilule ou 20px. Jamais 4px, jamais 8px, jamais de coins vifs (sauf le séparateur en dents de scie).
  6. Pas de bordures. La séparation provient des remplissages #F2F2F2 et des ombres douces, pas de lignes de 1px.
  7. Colonne de contenu centrée, max 1080px. Rythme vertical généreux (120–160px entre les sections).
  8. Le texte est convivial (minuscules acceptables) et autodérisif/humain, jamais corporate. Phrases courtes.

Flux de travail lors de l'ajout de quoi que ce soit de nouveau

  1. Lisez references/design-tokens.md → utilisez les variables CSS, jamais le hex brut.
  2. Lisez references/components.md → vérifiez si l'élément existe déjà en tant que motif (pilule, tag, carte, en-tête de section, marquee, carrousel, champ de formulaire). Réutilisez-le. N'inventez pas un deuxième style de carte.
  3. Lisez references/motion.md → attachez le comportement standard de révélation + survol.
  4. S'il s'agit d'une toute nouvelle section, lisez references/section-recipes.md et suivez le « modèle de nouvelle section » exactement (espacement, en-tête, révélation, conteneur).
  5. Alternez les arrière-plans de section --bg / --bg-hero. Si deux sections adjacentes ont des arrière-plans différents, placez un séparateur en dents de scie entre elles (jamais une ligne droite).
  6. Enregistrez l'identifiant de section dans les liens de navigation à pilule uniquement s'il s'agit d'une destination de premier niveau (max 4 liens de navigation ; si vous en ajoutez un 5e, demandez à l'utilisateur lequel supprimer).
  7. Ajoutez tout nouvel emplacement d'image à assets/IMAGES.md avec le rapport d'aspect exact requis, afin que l'utilisateur sache quoi fournir.

Auto-vérification avant de terminer

  • Chaque nouveau titre utilise-t-il la police pixel + souligné ondulé ?
  • Un code hex en dehors de la liste des tokens ? Supprimez-le.
  • Un rayon qui n'est pas 999px ou 20px / 16px / 14px ? Corrigez-le.
  • Le nouveau bloc s'estompe-t-il avec blur(10px) → 0 et y: 30px → 0 ?
  • Les états de survol utilisent-ils scale(1.03) + soulèvement d'ombre + 250ms ?
  • Mobile : l'éventail/le carrousel/la grille se replient-ils selon les règles mobiles dans references/components.md ?
  • Ai-je maintenu le padding vertical de la section à clamp(80px, 10vw, 160px) ?

Fichiers de référence

FichierÀ lire quand
references/design-tokens.mdToujours — couleurs, échelle typographique, espacement, ombres, polices
references/components.mdConstruire un élément d'interface utilisateur (navigation, cartes, tags, formulaire, marquee, carrousel, séparateur)
references/motion.mdToute animation, révélation, survol ou chorégraphie de chargement de page
references/section-recipes.mdAjouter une toute nouvelle section ou page
assets/base.cssFeuille de style prête à l'emploi avec tous les tokens + primitives déjà implémentés
assets/IMAGES.mdQuelles images le site nécessite et à quel rapport

Skills associés

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community