Prototypen in Frontend-Komponenten umwandeln
Teams verbringen oft Zeit damit, Prototype-Markup in wartbare Komponenten umzubauen. Diese Skill wandelt HTML, CSS und Figma-Exporte in typisierte Frontend-Komponenten mit Tokens und Hinweisen zur Barrierefreiheit um.
Kopieren Sie diese Anfrage in Ihren Agent. Sie enthält die maßgebliche Skill-Seite und das Manifest.
Review the Skillstore skill "prototype-to-production" from https://skillstore.io/skills/ariegoldkin-prototype-to-production.md and its manifest at https://skillstore.io/api/skills/ariegoldkin-prototype-to-production/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.Ihr Agent sollte weiterhin seinen Plan anzeigen und alle von der Sicherheitsrichtlinie verlangten Bestätigungen anfordern.
Verwenden Sie diese Links, wenn ein KI-Agent, Crawler oder Skript sauberen Kontext benötigt, statt die vollständige Seite zu lesen.
„prototype-to-production“ wird verwendet. Ein super-design-Screen mit Header, Produktkarten und Aktionsbuttons.
Erwartetes Ergebnis:
„prototype-to-production“ wird verwendet. Ein Figma-Export mit absoluter Positionierung und wiederholten Formularsteuerelementen.
Erwartetes Ergebnis:
„prototype-to-production“ wird verwendet. Ein älteres HTML-Mockup mit Inline-Styles und einfachen Interaktionen.
Erwartetes Ergebnis:
All 48 static findings are false positives caused by Markdown backticks, TSX template literals, an event key property, and a schema metadata URL. No command execution, credential material, active network request, prompt injection, or malicious intent was found.
Teile den versionierten Bewertungsbericht, das neutrale Badge, die Einbettungskarte und Zitate. Skillstore berichtet Nachweise, ohne zu entscheiden, ob dieser Skill sicher ist.
https://skillstore.io/skills/ariegoldkin-prototype-to-production/audits/9?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report[](https://skillstore.io/skills/ariegoldkin-prototype-to-production?utm_source=security_passport_badge)<a href="https://skillstore.io/skills/ariegoldkin-prototype-to-production?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/ariegoldkin-prototype-to-production/security.svg" alt="Skillstore security assessment" loading="lazy"></a><iframe src="https://skillstore.io/embed/skills/ariegoldkin-prototype-to-production.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>ArieGoldkin. (2026). prototype-to-production security audit report (audit version 9) [Author version 1.0.0]. Skillstore. https://skillstore.io/skills/ariegoldkin-prototype-to-production/audits/9@techreport{ariegoldkin-ariegoldkin-prototype-to-production-2026,
author = {ArieGoldkin},
title = {prototype-to-production security audit report (audit version 9)},
institution = {Skillstore},
year = {2026},
number = {9},
url = {https://skillstore.io/skills/ariegoldkin-prototype-to-production/audits/9},
note = {Author version 1.0.0}
}cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "prototype-to-production security audit report (audit version 9)"
version: "1.0.0"
type: report
authors:
- name: "ArieGoldkin"
date-released: "2026-07-23"
url: "https://skillstore.io/skills/ariegoldkin-prototype-to-production/audits/9"
identifiers:
- type: other
value: "skillstore:ariegoldkin-prototype-to-production:audit:9"
description: "Skillstore immutable audit report identifier"
Wandle einen statischen HTML- oder super-design-Screen in typisierte React-Komponenten um, die zum Zielprojekt passen.
Extrahiere wiederholte Farben, Abstände, Typografie und Varianten aus Prototypen, bevor gemeinsame Komponenten-APIs erstellt werden.
Refaktorisiere Prototype-Markup zu wartbaren Komponenten mit Barrierefreiheit, Props und Integrationshinweisen.
Verwende prototype-to-production für diese HTML-Datei. Identifiziere die Hauptkomponenten und erstelle React-TypeScript-Ausgabe, die dem Projektstil folgt.
Analysiere dieses Prototype-CSS und Inline-Styling. Fasse wiederverwendbare Farben, Typografie, Abstände, Radien, Schatten und Animation-Tokens zusammen.
Finde wiederholte Buttons, Cards und Formularsteuerelemente in diesem Prototyp. Erstelle Komponenten-APIs mit Varianten, Größen, deaktivierten Zuständen und Ladezuständen.
Konvertiere diesen Prototyp für das aktuelle Repository. Füge Komponentenplatzierung, Imports, Abhängigkeiten, Barrierefreiheitsprüfungen und anschließende Review-Schritte hinzu.
Autor
ArieGoldkinLizenz
MIT
Autorenversion
v1.0.0
Skillstore-Revision
r2
Ref.
89edfdc710d0846129dcee6a929477b04f08052c
Aktualität der Wartung
26.7.2026
Nutzung
8 Downloads · 411 Aufrufe
Dateistruktur
Architecture Decision Records erstellen
Architekturentscheidungen lassen sich schwer bewahren, nachdem Teams weitergezogen sind. Dieser Skill bietet Vorlagen, Beispiele und Review-Prüfungen für klare ADRs.
Produktionsreife API-Verträge entwerfen
Teams entwerfen APIs oft mit uneinheitlichen Ressourcen, Fehlern und Versionierung. Diese Skill bietet Muster, Checklisten und Vorlagen für REST-, GraphQL-, gRPC-, OpenAPI- und AsyncAPI-Arbeiten.
Ideen zu praktischen Designs verfeinern
Frühe Produkt- und technische Ideen haben oft keine klaren Einschränkungen, Abwägungen und Erfolgskriterien. Dieser Skill führt Claude, Codex und Claude Code durch Fragen, Optionen und validierte Designabschnitte.
Code-Reviews mit einem strukturierten Playbook verbessern
Uneinheitliche Reviews übersehen Fehler und erzeugen unklare Rückmeldungen für Autorinnen und Autoren. Dieser Skill bietet Checklisten, Kommentarformate und Vorlagen für zuverlässige Pull-Request-Reviews.
Zuverlässige Datenbankschemata entwerfen
Schlechte Schemata verlangsamen Teams und verursachen Datenfehler. Dieser Skill bietet Orientierung zu normalisierten Modellen, NoSQL-Abwägungen, Indexierung, Constraints und sicheren Migrationen.
Code anhand der DevPrep-Standards überprüfen
DevPrep AI-Projekte benötigen einheitliche Standards für TypeScript, Imports, Benennung und Architektur. Dieser Skill führt lokale Prüfungen aus und gibt gezielte Hinweise zur Behebung von Qualitätsverstößen.
Produktionsreife Frontend-Funktionen entwickeln
von davila7
Frontend-Teams benötigen projektübergreifend einheitliche Leitlinien für React und Next.js. Dieser Skill bietet Referenz-Workflows, Qualitätspraktiken und Hilfsskripte für die Frontend-Analyse.
React View Transitions implementieren
von vercel-labs
React View Transitions lassen sich leicht falsch platzieren, was zu unbemerkten oder störenden Animationen führt. Dieser Skill unterstützt Entscheidungen zu Animationen für Routen, Suspense, Listen und Shared Elements.
Typsichere React-Komponenten erstellen
von softaworks
React-TypeScript-Arbeit erfordert häufig präzise Typen für Events, Hooks und Routen. Diese Skill bietet fokussierte Muster für typisierte Komponenten, React 19 APIs und Routing.
Vue-Options-API-Komponenten verbessern
von vuejs-ai
Vue-Options-API-Projekte können Typsicherheit und korrektes this-Binding verlieren. Diese Skill bietet direkte Muster für sicherere Vue-Komponenten.
React- und Next.js-Performance optimieren
von vercel-labs
React- und Next.js-Apps verlieren oft durch Waterfalls, große Bundles und vermeidbare Re-Renderings an Geschwindigkeit. Diese Skill gibt Agenten konkrete Regeln für sicherere, performanceorientierte Änderungen.
Moderne React- und Next.js-Apps entwickeln
von sickn33
React- und Next.js-Projekte benötigen häufig konsistente Einrichtungsentscheidungen für Routing, Komponenten, Styling, Daten, Formulare, Tests und Deployment. Diese Skill gibt Claude, Codex und Claude Code einen phasenbasierten Workflow für die Planung und Entwicklung moderner Frontend-Anwendungen.