Communitygithub.com

Pixel-Portfolio-Stil-System

Designsystem und Bauregeln für eine hellgraue „Pixel-Display“-Portfolio-Seite (schwebende Pill-Navigation, Pixel-Font-Überschriften mit handgezeichneten Wellenlinien, Sägezahn-/Reißpapier-Abschnittstrenner, Fächerkarten-Heldenbereich, Blur-Up-Scroll-Animationen, Logo-Laufband und Fallstudien-Karussell). Verwende dieses Skill immer, wenn neue Abschnitte, Komponenten oder Seiten erstellt, bearbeitet oder erweitert werden.

Was ist Pixel-Portfolio-Stil-System?

Dieses Skill definiert ein vollständiges visuelles und bewegungstechnisches System für eine persönliche Portfolio-Seite, die als „Pixel-Display“-Stil bezeichnet wird. Es stellt sicher, dass alle hinzugefügten Elemente – egal ob ein neuer Abschnitt, eine Testimonial-Sektion, ein FAQ-Bereich oder eine neue Seite – so aussehen, als wären sie vom selben Designer am selben Tag erstellt worden. Das System basiert auf nicht verhandelbaren Regeln wie der Beschränkung auf zwei Schriftarten (Pixel-Font für Überschriften, geometrische Sans für den Rest), einer einzigen Akzentfarbe (Blau #0B8DF8) und der Verwendung von Pilz- oder 20px-Radien. Jeder Abschnitt wird mit einer einheitlichen Blur-Up-Scroll-Transition eingeblendet und es gibt keine Linien – stattdessen sorgen Füllungen in #F2F2F2 und weiche Schatten für Trennung. Der Workflow beim Hinzufügen neuer Inhalte beginnt immer mit dem Lesen der Referenzdateien (Design-Tokens, Komponenten, Bewegung, Abschnittsrezepte) und dem strikten Befolgen der dortigen Vorgaben. Das Skill unterstützt Claude Code und Cursor und enthält eine Selbstüberprüfungsliste, um Stilabweichungen zu vermeiden.

Funktioniert mit~Claude Code~Codex CLI~Cursor
Part ofDesign & UI
npx skills add https://github.com/mohammadNafia/portfolio/tree/HEAD/docs
Original anzeigen→Alle Skills durchsuchen

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Dokumentation

Dies ist die ursprüngliche Kopie, die zur Herkunftssicherung aufbewahrt wird. Es handelt sich nicht um die Arbeitskopie.

Das maßgebliche System befindet sich unter docs/pixel-portfolio-style/ mit seinen vier Referenzdateien und assets/base.css. Lies diese Dateien.

Diese Datei stammt aus der Zeit vor zwei Ergänzungen, die der Build benötigt: Regel #0 (das System direkt anwenden; niemals eine funktionierende, getestete App umschreiben, um ein Aussehen zu übernehmen – die Regel, die den gesamten Restyle entschieden hat) und Regel #9 plus den Verweis auf references/rtl-and-locales.md. Wenn du dieser Kopie folgst, entgehen dir beide.

Pixel-Portfolio-Stil

Ein vollständiges visuelles + Bewegungssystem. Befolge es wörtlich. Wenn etwas hier nicht abgedeckt ist, wähle die Option, die leiser, runder und geometrischer ist – führe niemals eine neue Farbe, Schriftart, einen neuen Radius oder eine neue Easing-Kurve ein.

Nicht verhandelbare Regeln (jedes Mal lesen)

  1. Nur zwei Schriftarten. Pixel-Display-Schriftart für Abschnittstitel + Helden-Wort. Geometrische Sans für alles andere.
  2. Nur eine Akzentfarbe. Blau #0B8DF8. Schwarz #111 für sekundäre Buttons. Nichts anderes.
  3. Jeder Abschnittstitel ist: Großbuchstaben-Pixel-Schriftart + handgezeichnete Wellen-SVG-Unterstreichung, zentriert.
  4. Jeder Abschnitt erscheint beim Scrollen mit demselben Blur-Up-Übergang (siehe references/motion.md).
  5. Radien sind Pill oder 20px. Niemals 4px, niemals 8px, niemals scharfe Ecken (außer dem Sägezahn-Teiler).
  6. Keine Rahmen. Trennung erfolgt durch #F2F2F2-Füllungen und weiche Schatten, nicht durch 1px-Linien.
  7. Zentrierte, maximal 1080px breite Inhaltsspalte. Großzügiger vertikaler Rhythmus (120–160px zwischen Abschnitten).
  8. Texte sind kleinschreibungsfreundlich und selbstironisch/menschlich, niemals corporate. Kurze Sätze.

Arbeitsablauf beim Hinzufügen von etwas Neuem

  1. Lies references/design-tokens.md → verwende die CSS-Variablen, niemals rohe Hex-Codes.
  2. Lies references/components.md → prüfe, ob das Element bereits als Muster existiert (Pill, Tag, Karte, Abschnittskopf, Laufband, Karussell, Formularfeld). Verwende es erneut. Erfinde keinen zweiten Kartenstil.
  3. Lies references/motion.md → füge das standardmäßige Einblend- und Hover-Verhalten hinzu.
  4. Wenn es sich um einen völlig neuen Abschnitt handelt, lies references/section-recipes.md und folge exakt der „Vorlage für neue Abschnitte“ (Abstände, Kopf, Einblendung, Container).
  5. Wechsle die Hintergründe der Abschnitte mit --bg / --bg-hero. Wenn zwei benachbarte Abschnitte unterschiedliche Hintergründe haben, setze einen Sägezahn-Teiler dazwischen (niemals eine gerade Linie).
  6. Trage die Abschnitts-ID nur dann in die Navigations-Pill-Links ein, wenn es sich um ein Ziel der obersten Ebene handelt (maximal 4 Nav-Links; wenn ein 5. hinzugefügt wird, frage den Benutzer, welcher entfernt werden soll).
  7. Füge jeden neuen Bildplatz in assets/IMAGES.md mit dem genauen benötigten Seitenverhältnis hinzu, damit der Benutzer weiß, was er liefern muss.

Selbstüberprüfung vor dem Abschluss

  • Verwendet jede neue Überschrift die Pixel-Schriftart + Wellen-Unterstreichung?
  • Irgendein Hex-Code außerhalb der Token-Liste? Entferne ihn.
  • Irgendein Radius, der nicht 999px oder 20px / 16px / 14px ist? Korrigiere ihn.
  • Blendet der neue Block mit blur(10px) → 0 und y: 30px → 0 ein?
  • Verwenden Hover-Zustände scale(1.03) + Schattenanhebung + 250ms?
  • Mobil: Bricht der Fächer/das Karussell/das Raster gemäß den Mobilregeln in references/components.md um?
  • Habe ich den vertikalen Abstand des Abschnitts bei clamp(80px, 10vw, 160px) gehalten?

Referenzdateien

DateiLies, wenn
references/design-tokens.mdImmer – Farben, Schriftgrößen, Abstände, Schatten, Schriftarten
references/components.mdEin beliebiges UI-Element erstellst (Navigation, Karten, Tags, Formular, Laufband, Karussell, Teiler)
references/motion.mdDu eine Animation, Einblendung, Hover oder Seitenlade-Choreografie durchführst
references/section-recipes.mdDu einen brandneuen Abschnitt oder eine brandneue Seite hinzufügst
assets/base.cssDu ein Drop-In-Stylesheet mit allen Tokens + grundlegenden Elementen benötigst
assets/IMAGES.mdDu wissen musst, welche Bilder die Seite benötigt und in welchem Verhältnis

Verwandte Skills

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