Zwei Agent Skills — rund 11.800 Wörter Methode — die Claude den Arbeitsprozess eines Webstudios geben: planen vor gestalten, spezifisch statt generisch, und Bewegung nur dort, wo sie etwas leistet. Einmal installiert, ins Repo committet, und jede künftige Sitzung erbt es.
Im Projektverzeichnis:
$ npx cg-web-skills install --all
✔ Installed cg-web-animate to .claude/skills/cg-web-animate
✔ Installed cg-web-designer to .claude/skills/cg-web-designer
Benötigt Node.js 20 oder neuer und Claude Code.
Du installierst Anweisungen in ein Verzeichnis, das Claude liest. Das verdient eine klare Antwort, bevor irgendetwas anderes kommt.
Sie sind unabhängig — installiere einen oder beide. Sind beide vorhanden, führt cg-web-designer das Projekt und behandelt Motion als Teil der Designrichtung, während cg-web-animate das handwerkliche Detail liefert. Du musst sie nie beim Namen nennen.
cg-web-designerLead Web Designer, UX- und Content-Strategie, Frontend-Qualität
Er behandelt jede Anfrage wie ein kleines Studio-Projekt, statt direkt zur Startseite zu springen. Das Ergebnis ist eine Website, die entschieden wurde — nicht generiert.
5.832 Wörter Methode
cg-web-animateSenior Design Engineer und Motion Designer
Seine Aufgabe ist ausdrücklich nicht, überall Animation hinzuzufügen. Sie ist, Bewegung zu schaffen, die Bedeutung trägt — und den Rest still zu lassen.
5.952 Wörter Methode
Weil ein Prompt persönlich ist, keine Version hat und leicht vergessen wird. Das ist der ehrliche Vergleich, kein Strohmann.
| Warum nicht einfach einen guten Prompt behalten? | Prompt | Skill |
|---|---|---|
| Wo es liegt | In einer Notiz, einem Gist, der Zwischenablage | In einem Ordner im Repo, committet und reviewt wie Code |
| Wer es hat | Du — wenn du daran denkst, ihn einzufügen | Jede Person, die das Projekt klont, in jeder Sitzung |
| Kosten ungenutzt | Tokens in jeder Konversation, in die du ihn einfügst | Keine — Claude lädt einen Skill nur, wenn die Aufgabe zu seiner Beschreibung passt |
| Aktualisierung | Manuell, und deine Kopie driftet unbemerkt | npx cg-web-skills@latest update --all, lokale Änderungen geschützt |
Agent Skills sind Ordner mit Anweisungen, die Claude bei Bedarf lädt. Jeder hat eine SKILL.md, deren Beschreibung Claude sagt, wann sie relevant ist. Passt deine Anfrage, liest Claude sie und folgt ihr. Passt sie nicht, bleibt der Skill aus dem Weg.
Diese Website wurde mit den beiden Skills geplant und gebaut, die sie dokumentiert. Der Prozess lief in seiner Reihenfolge: Discovery, Strategie, Informationsarchitektur, Designrichtung, dann Code. Diese Artefakte liegen im Ordner docs/ dieses Repositories — einschließlich der Designrichtung, die erklärt, warum diese Seite keine Verläufe, keine runden Ecken, keine Stockfotos und Farbe ausschließlich innerhalb von Terminal-Ausgaben hat.
Das Paket wurde am 24. September 2026 veröffentlicht. Auf dieser Seite stehen keine Download-Zahlen, Testimonials oder Kundenlogos, weil es noch keine gibt. Die Skills verbieten es, sie zu erfinden — also tut die Seite es nicht.
$ npx cg-web-skills install --all
Danach Claude Code im selben Projekt öffnen und beschreiben, was du brauchst — zum Beispiel: „Plane und baue eine Website für meine Physiotherapie-Praxis.“