colbyvk/website-dev-skill

Website-Entwicklung

Erstelle die persönliche Website, die ein nachdenklicher Mensch für sich selbst machen würde. Sie sagt klar, wer sie sind und was sie tun, zeigt ihre echte Arbeit auf jedem Bildschirm und sieht aus, als gehöre sie ihnen: kein Portfolio-Theme, nicht der statistische Durchschnitt jeder „Hi, i'm a passionate developer“-Seite im Internet und kein Kunstwerk, das die Arbeit verdeckt. Der Maßstab sind die besten handgemachten persönlichen Seiten von Designern, Entwicklern, Autoren, Fotografen und Forschern: leise, spezifisch, schnell und unverkennbar die einer Person.

Anwendungsbereich: nur persönliche Websites. Portfolio, Startseite, Blog, Lebenslauf-Seite, akademische Seite oder Link-Hub einer Einzelperson. Die Seite eines Freiberuflers zählt, da sie sich auf eine Person und ihre Arbeit bezieht. Eine Firma, ein Shop, ein Produkt, ein Startup oder eine Agenturseite nicht. Wenn die Aufgabe eine davon ist, sage, dass diese Skill für persönliche Seiten gedacht ist, und wende sie nicht an.

Diese Skill ist eine Skill mit ihren Bestandteilen in assets/. Die folgende Tabelle zeigt, welcher Teil wann geladen wird, was jeder Teil während der Einrichtung tut und wann der Agent Änderungen darin vornehmen muss. Drei Teile werden jedes Mal geladen. Der Rest wird geladen, wenn die Aufgabe darauf Bezug nimmt.

Die Dateien

Datei	Aufruf	Ersteinrichtung	Auslöser zum Lesen	Auslöser zum Aktualisieren
design-principles	Immer	Wird nie eingerichtet. Wird während der Einrichtung wie geschrieben gelesen; nichts darin wird gefragt oder geändert.	Jedes Mal, wenn diese Skill geladen wird, vor der ersten Design- oder Code-Entscheidung.	Nie durch den Agenten. Nur bearbeiten, wenn der Benutzer explizit darum bittet, ein Prinzip zu ändern. Eine Abneigung geht in die design-dont-dos, nicht hierher.
design-dont-dos	Immer	Wird immer ausgeführt, wenn die Einrichtung läuft. Jede Richtung, Palette, Schriftart und Komponente, die während der Einrichtung vorgeschlagen wird, wird vor der Ansicht durch den Benutzer gegen jede Zeile geprüft. Jede Referenzseite oder Eigenschaft, die der Benutzer in seinen Einrichtungsantworten nicht mag, wird sofort zu einer Benutzerzeile. Bei einer bestehenden Seite werden die Zeilen aufgelistet, die sie bereits verletzt.	Jedes Mal, wenn diese Skill geladen wird, und erneut vor dem Schreiben oder Ändern von sichtbaren Inhalten der Seite.	Jedes Mal, wenn der Benutzer sagt, dass ihm etwas an der Seite nicht gefällt (eine Farbe, Form, Layout, Effekt, Wort, Schriftart, Bewegung oder eine Referenzseite). Eine Zeile unten anhängen, im selben Schritt, bevor die Arbeit fortgesetzt wird. Jede angehängte Zeile ist eine Benutzerzeile.
users-design-system	Immer	Wenn es kein echtes Designsystem gibt, zuerst einrichten. Kein echtes Designsystem bedeutet: Die Zeile „Richtung“ ist nicht als confirmed markiert, oder die Farb- und Schriftarttabellen haben keine confirmed-Zeilen. Dann vor der Designarbeit die Einrichtungsfragen aus der initial-setup stellen. Der Benutzer kann die Einrichtung auch jederzeit starten („Designsystem einrichten“, „das Aussehen neu beginnen“). Wenn der Benutzer mit „du entscheidest“ oder „richte es für mich ein“ antwortet, den Recherche-Pfad ausführen. Antworten des Benutzers werden confirmed, Recherche-Ergebnisse werden proposed, aus vorhandenem Code gelesene Werte werden extracted. Wenn ein echtes Designsystem existiert, nicht erneut fragen: nur nach den Zeilen fragen, die die aktuelle Aufgabe benötigt und die noch leer sind.	Jedes Mal, wenn diese Skill geladen wird. Seine bestätigten Werte überschreiben alle Standardwerte in den anderen Dateien.	Jedes Mal, wenn der Benutzer etwas in seinem Designsystem hinzufügt oder ändert (eine Farbe, Schriftart, Größe, Abstandsschritt, Radius, Schatten, Bewegungstoken, Komponentenregel, Logo oder Monogramm, Bildregel, Stimmregel). Die Zeile im selben Schritt aktualisieren und die Änderung protokollieren. Auch wenn die Einrichtung Tokens extrahiert oder recherchiert.
initial-setup	Wenn: eine neue Website oder ein neues Repository, der erste Durchlauf auf einer Seite, ein Neustart des Designs, oder users-design-system hat keine bestätigte Richtung.	Führt die Einrichtung aus, wenn eines der Signale ausgelöst wird: (1) users-design-system hat kein echtes Designsystem, (2) eine neue Website oder ein neues Repository, (3) der Benutzer bittet um Einrichtung oder Neugestaltung des Designsystems, (4) eine Neugestaltung beginnt. Stellt die Fragenrunden sofort in der ersten Antwort, vor der Designarbeit. Wenn der Benutzer „du entscheidest“, „löse es“ oder „richte es für mich ein“ sagt, stattdessen den Recherche-Pfad ausführen. Überspringen, wenn ein echtes Designsystem existiert und der Benutzer nicht darum gebeten hat.	Zu Beginn der Aufgabe, bevor eine Seite oder Komponente geschrieben wird.	Wenn der Benutzer ändert, wie eine Seite starten soll (die Fragen, den Stack, die Werkzeuge), oder wenn ein Einrichtungsschritt sich in der Praxis als falsch erweist.
design-directions	Wenn: die Einrichtung nach dem Gesamtlook fragt, der Recherche-Pfad ausgeführt wird oder der Benutzer bittet, das Aussehen der Seite zu ändern.	Wird ausgeführt, wenn die Einrichtung die Richtungsfrage stellt oder den Recherche-Pfad ausführt. Die erste Einrichtungsfrage bietet die 3 Richtungen an, die am besten zur Person passen, plus „Recherchiere es für mich“. Der Recherche-Pfad beginnt mit diesem Katalog und sucht dann nach Nischenrichtungen darüber hinaus.	Bevor die Richtungsfrage gestellt wird und vor einer Recherche zu Richtungen.	Wenn die Recherche eine Richtung findet, die nicht im Katalog enthalten ist, hinzufügen. Wenn der Benutzer eine Richtung auswählt oder ablehnt, protokollieren. Das definierende Merkmal einer abgelehnten Richtung geht auch in design-dont-dos.
hero-design	Wenn: die Aufgabe die Startseite oder ihren ersten Bildschirm erstellt, umgestaltet oder überprüft.	Wird ausgeführt, wenn die Einrichtung Q13 stellt (nur wenn die Person kein Arbeitsbild oder Foto hat). Die Antwort setzt die visuelle Quelle des Helden in users-design-system.	Im Schritt der Bildschirmplanung, bevor der Held gebaut wird, und bei der Überprüfung.	Wenn der Benutzer einen Helden genehmigt, protokollieren und in users-design-system eintragen. Ein abgelehnter Held geht in design-dont-dos. Der Prompt eines generierten Helden geht in sein Protokoll.
visual-modules	Wenn: die Aufgabe eine Seite oder einen Abschnitt plant, eine Seite als langweilig wahrgenommen wird oder der Benutzer nach „mehr Leben“ fragt.	Wird mit dem Recherche-Pfad ausgeführt: jeder Kandidat benennt 2 bis 4 Module.	Im Schritt der Bildschirmplanung, bevor ein Abschnitt gebaut wird, und bei der Überprüfung.	Wenn dem Benutzer ein Modul gefällt, protokollieren und in users-design-system eintragen. Ein abgelehntes Modul geht in design-dont-dos. Ein in der Recherche gefundenes Modul wird in seinen Katalog aufgenommen.
motion-design	Wenn: die Aufgabe Animationen, Übergänge, Hover- oder Drückzustände, Scrolleffekte, Ladeanimationen, Seiteneingänge oder alles, was sich bewegt, berührt.	Wird ausgeführt, wenn die Einrichtung die Bewegungsfrage stellt. Die Antwort setzt den Bewegungsregler in users-design-system. Nicht erneut fragen, sobald der Regler als confirmed markiert ist.	Bevor Bewegungs-Code geschrieben oder überprüft wird.	Wenn der Benutzer ein Bewegungsmuster genehmigt oder einen Bewegungswert ändert: in seiner Entscheidungstabelle festhalten. Eine Bewegung, die dem Benutzer nicht gefällt, geht in design-dont-dos.
copy-writing	Wenn: die Aufgabe Text schreibt, umschreibt oder überprüft, der auf der Seite sichtbar ist (Intro, Biografie, Projektbeschreibungen, Überschriften, Links, Alternativtexte, Meta-Tags).	Wird ausgeführt, wenn die Einrichtung die Stimmfrage stellt. Die Antwort setzt die Stimme in users-design-system. Nicht erneut fragen, sobald die Stimme als confirmed markiert ist.	Bevor das erste Wort des Textes geschrieben wird, und erneut vor der Übergabe.	Wenn der Benutzer eine Textregel formuliert, die über eine einzelne Zeichenfolge hinausgeht: in seiner Benutzertextregel-Tabelle hinzufügen. Ein nicht gemochter Ausdruck oder Ton geht auch in design-dont-dos. Eine Stimmregel geht in users-design-system.
review-gate	Wenn: vor der Übergabe einer Seite, eines Abschnitts oder einer Komponente, und wenn der Benutzer bittet, seine Seite zu überprüfen oder zu auditieren.	Wird nie eingerichtet. Wird während der Einrichtung nicht verwendet.	Nach dem Bau, vor dem Bericht an den Benutzer.	Wenn der Benutzer nach der Übergabe ein Problem findet, das vom Gate übersehen wurde: eine Prüfung in seine Benutzerprüf-Tabelle hinzufügen und das Problem zu design-dont-dos hinzufügen.

Was Geschmack hier bedeutet

Geschmack ist kein Stil. Es ist eine Reihe von Entscheidungen, die mit Absicht für diese Person getroffen wurden, wo ein Modell sonst den Standard nehmen würde.

• Spezifisch schlägt generisch. Jede persönliche Seite, die ein Modell schreibt, driftet in die Version, die zu jedem passen würde: „Hi, i'm [Name] 👋“, „a passionate developer who loves crafting digital experiences“, Fertigkeitsbalken, eine Zeitleiste, drei Projektkarten mit GitHub-Buttons, ein lila Glühen. Jede dieser Entscheidungen wurde von niemandem getroffen. Das Spezifische muss von der Person kommen: ihre Arbeit, ihre Worte, ihre Fotografien, ihr Designsystem. Niemals von einer Stilregel und niemals erfunden.
• Die Arbeit ist der Held. Ein Besucher kommt, um zu sehen, was diese Person gemacht, geschrieben oder gefunden hat. Platziere das Beste davon auf dem ersten Bildschirm oder eine Bildlaufweite entfernt. Dekoration (Kugeln, Partikel, 3D-Blitzen, Fake-Terminals, Demo-Widgets) füllt eine Seite, wenn die Arbeit fehlt.
• Eine Person, eine Stimme. Eine persönliche Seite klingt nach jemandem, nicht nach einer Recruiter-Vorlage. Kurze, einfache, spezifische Sätze in der Stimme, die die Person gewählt hat. Kein Selbstlob: Die Arbeit lobt sich selbst.
• Kuratieren, nicht archivieren. Drei bis sechs starke Stücke schlagen dreißig Miniaturansichten. Das beste führt und bekommt mehr Platz. Der Rest ist einen Link entfernt.
• Zurückhaltung ist der Luxus. Eine Palette. Eine Radius-Skala. Eine Link-Art. Ein Thema. Raum als Material verwendet. Eine Seite mit weniger, besseren Entscheidungen wirkt durchdachter.
• Lebendig, nicht langweilig. Eine Seite aus Text und Grautönen ist so generisch wie eine Seite aus Leuchten. Gib ihr Farbe: zwei zusammengehörige Farben und einen Akzent, der sie in der Kopfzeile und im Helden zum Singen bringt. Gib ihr einen gestalteten Helden und 2 bis 4 visuelle Module: die Arbeit der Person mit Handwerk gezeigt und Form aus der Palette, die nichts behauptet. Niemals einen gefälschten Abschnitt, um den Raum zu füllen.
• Hierarchie, die man durch Zusammenkneifen der Augen sehen kann. Verschwimme die Augen beim Screenshot. Eine Sache führt jeden Bildschirm: der Name, die Arbeit oder die Worte.
• Schrift trägt die Person. Wähle die Schriftart für diese Person, setze sie mit engem Auszeichnungsspur, einem lesbaren Textmaß (etwa 65 Zeichen) und echten Gewichtsabstufungen. Bei einem Autor ist der Fließtext das Design.
• Rhythmus, nicht Einheitlichkeit. Lass ein Projekt lang laufen und ein anderes nur zwei Zeilen sein. Identische Karten in einem Raster ist das Aussehen eines Themas.
• Bewegung antwortet, sie führt nicht auf. Das Intro kommt einmal an, ein gestalteter Moment verdient seinen Platz, und jeder Link antwortet dem Zeiger. Nichts tippt sich selbst aus, dreht sich oder blüht beim Scrollen ein, nur weil es kann.
• Klein und schnell ist eine Funktion. Eine persönliche Seite lädt im Handumdrehen, liest sich gut auf einem Telefon, funktioniert ohne JavaScript und funktioniert auch in fünf Jahren noch.
• Die Person wählt den Look, nicht der Agent. Ein Fotograf, ein Dichter, ein Backend-Ingenieur und ein Illustrator verdienen jeweils eine andere Antwort. Dieselbe Anfrage darf nicht zweimal dieselbe Seite hervorbringen.

Die Hausregeln

Diese haben Vorrang vor allem in den Assets, außer den eigenen Worten des Benutzers und dem bestätigten Designsystem.

1. Nur persönliche Websites. Eine Person und ihre Arbeit. Alles andere ist nicht in diesem Bereich.
2. Vor dem Design einrichten. Wenn es kein echtes Designsystem gibt (die Zeile „Richtung“ in users-design-system ist nicht als confirmed markiert, oder Farb- und Schriftart haben keine confirmed-Zeilen), zuerst initial-setup ausführen und die Fragenrunden in der ersten Antwort stellen. Der Benutzer kann die Einrichtung auch jederzeit starten oder „du entscheidest“ sagen, um den Agenten das System recherchieren und vorschlagen zu lassen. Niemals eine Seite mit angenommenem Geschmack beginnen.
3. Nie leuchten, nie Pille-mit-Leuchten, nie KI-Lila. Der Benutzer hat diese namentlich verboten. Kein äußerer Schein, Neon, leuchtende Kugel, leuchtender Rand oder lila und violetter Farbverlauf, auf keiner Oberfläche, jemals, es sei denn, das Designsystem des Benutzers bestätigt es.
4. Die Verbotsliste ist Gesetz. Bevor etwas Sichtbares geschrieben wird, prüfe es gegen design-dont-dos. Eine Benutzerzeile wird nie verletzt.
5. Zuhören und aufschreiben. Wenn der Benutzer sagt, dass ihm etwas nicht gefällt, füge die Verbotszeile im selben Schritt hinzu, bevor du es behandelst. Wenn der Benutzer eine Farbe, Schriftart oder ein Token benennt, aktualisiere users-design-system im selben Schritt. Die Skill darf niemals denselben Fehler zweimal für dieselbe Person machen.
6. Tokens, keine Werte. Jede Farbe, Größe, Radius, Schatten und Dauer stammen aus dem Designsystem, über einen CSS-Variablenblock oder ein Theme. Kein roher Hex-Wert in einer Komponente.
7. Die echte Arbeit zeigen. Echte Projektbilder, echtes Schreiben, echte Fotografien der Person, wenn sie eine will. Niemals eine gefälschte Projekt-Oberfläche aus grauen Kästen, niemals Stock- oder KI-Bilder, die als ihre eigenen ausgegeben werden. Ein lizenzfreies oder generiertes Bild ist nur als Heldenatmosphäre erlaubt, nachdem der Benutzer einem generierten zugestimmt hat, und zeigt niemals die Person oder ihre Arbeit.
8. Nichts erfinden. Keine erfundenen Testimonials, Kunden, Arbeitgeber, Auszeichnungen, Zahlen oder Lebensgeschichten. Alles, was angenommen wird, ist im Code markiert und im Bericht aufgelistet.
9. Der erste Bildschirm sagt, wer und was bei 1440x900 und bei 390x844: der Name, was sie in einer Zeile tun und der Weg zur Arbeit oder zum Kontakt.
10. Standardmäßig barrierefrei. Kontrast 4.5:1, sichtbarer Fokusring, Alternativtext auf jedem Arbeitsstück, 44px Antippziele, reduzierte Bewegung respektiert. Niemals gegen das Aussehen eingetauscht.
11. Vor der Übergabe prüfen. review-gate ausführen. Berichten, was fehlgeschlagen oder nicht zuerst überprüft wurde.

Die drei Regler

Nach der Einrichtung steuern drei Regler jede Layout-, Bewegungs- und Dichte-Entscheidung. Ihre Werte leben im Designsystem des Benutzers (die Einrichtung setzt sie; der Benutzer kann sie in einem Satz ändern: „mach es ruhiger“, „mehr Bewegung“, „dichter“).

Regler	1 bis 3	4 bis 6	7 bis 10
Varianz (Symmetrie zu Asymmetrie)	Zentriert, symmetrisch, eine Textspalte. Autoren, Akademiker, Lebenslauf-Seiten.	Linksbündig lesen, geteiltes Intro, gemischte Bildgrößen, abwechslungsreiche Abschnittslayouts.	Asymmetrische Raster, große leere Zonen, gesetzter Text als Bild, redaktionelle Unterbrechungen. Einzelspaltig unter 768px bei jeder Stufe.
Bewegung (ruhig bis filmisch)	Nur Hover- und Drückzustände.	Standard. Zusätzlich das Intro-Entry und ein gestalteter Moment.	Nur wenn die eigene Arbeit der Person interaktiv oder bewegt ist (kreatives Codieren, Motion-Design, Video). Der Besucher bekommt Bewegung dort, wo die Person Bewegung macht.
Dichte (viel Leerraum zu viel Inhalt)	Großzügige Abstände, minimierte Kopfzeilen, kleine Navigation, wenig Farbe, viel Weißraum. Design- und Fotografie-Portfolios, textlastige Seiten.	Normale Abstände, sichtbare Kopfzeile mit Navigation, eine Sekundärfarbe im Layout. Projektseiten mit Schreibmaterial.	Dichtes Layout, kleine Abstände, kompakte Kopfzeile wenige Graustufen, Navigation kann ein zweiseitiges Menü sein. Seiten mit vielen Links oder vielen kleinen Projekten.