frontend-design-fix-react

Diese Fähigkeit verbessert automatisch generische Vue-Komponenten-Designs, indem sie systematische Verbesserungen in den Bereichen Typografie, Farbe, Bewegung, räumliche Komposition und Hintergründe anwendet. Sie analysiert bestehende Vue-Dateien, um einfarbige Muster zu identifizieren und wandelt diese mithilfe von Anthropics Design-Framework in markante Oberflächen um. Nutzen Sie sie, wenn Sie die visuelle Ästhetik Ihrer Vue-Komponenten schnell über grundlegendes Styling hinaus aufwerten müssen.

Diese Fähigkeit transformiert generische HTML/CSS-Designs, indem sie ästhetische Verbesserungen in Typografie, Farbe, Bewegung, räumlicher Komposition und Hintergründen anwendet. Sie analysiert vorhandenen Code, um einfache Muster zu identifizieren und verbessert diese systematisch mit Anthropics Design-Framework. Nutzen Sie sie, wenn Sie einfache Frontend-Designs schnell zu visuell markanteren Oberflächen aufwerten müssen.

Diese Fähigkeit verbessert automatisch generische Svelte-Komponentendesigns, indem sie ästhetische Verbesserungen in fünf Schlüsselbereichen anwendet: Typografie, Farbe, Bewegung, räumliche Komposition und Hintergründe. Sie analysiert bestehende Komponenten, identifiziert Design-Anti-Patterns und transformiert sie systematisch in visuell markantere Oberflächen. Verwenden Sie diese Fähigkeit, wenn Sie die visuelle Anziehungskraft langweiliger Svelte-Komponenten in Ihrem Projekt schnell steigern müssen.

Diese Skill bietet eine produktionsgetestete Einrichtung für Content Collections – ein TypeScript-first-Tool, das Markdown/MDX-Dateien in typsichere Datensammlungen mit Zod-Validierung umwandelt. Verwenden Sie ihn beim Erstellen von Blogs, Dokumentationsseiten oder inhaltsstarken Vite + React-Anwendungen, um Typsicherheit und automatische Inhaltsvalidierung zu gewährleisten. Er behandelt alles von der Vite-Plugin-Konfiguration und MDX-Kompilierung bis hin zur Deployment-Optimierung und Schema-Validierung.