frontend-design
Individuelle Frontend-Oberflächen erstellen
Generische KI-Oberflächen wirken oft repetitiv und unfertig. Diese Skill leitet Claude, Codex und Claude Code zu ausgereifter Frontend-Arbeit mit klarer visueller Richtung an.
Mit meinem Agent installieren
Kopieren Sie diese Anfrage in Ihren Agent. Sie enthält die maßgebliche Skill-Seite und das Manifest.
Review the Skillstore skill "frontend-design" from https://skillstore.io/skills/yyh211-frontend-design.md and its manifest at https://skillstore.io/api/skills/yyh211-frontend-design/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.
Agent-lesbare Ressourcen
Verwenden Sie diese Links, wenn ein KI-Agent, Crawler oder Skript sauberen Kontext benötigt, statt die vollständige Seite zu lesen.
Testen
„frontend-design“ wird verwendet. Eine SaaS-Landingpage für ein Workflow-Automatisierungsprodukt.
Erwartetes Ergebnis:
Ein responsives Seitenkonzept mit markantem Hero-Bereich, asymmetrischem Abschnittslayout, fokussierten Handlungsaufrufen und barrierefreier visueller Hierarchie.
„frontend-design“ wird verwendet. Ein dunkles Analytics-Dashboard, das zu schlicht wirkt.
Erwartetes Ergebnis:
Eine verfeinerte Dashboard-Richtung mit dichterer Informationsgruppierung, klareren Cards, zurückhaltender Bewegung und stärkerem Diagrammkontrast.
„frontend-design“ wird verwendet. Ein Satz Buttons für eine benutzerdefinierte Komponentenbibliothek.
Erwartetes Ergebnis:
Ein Button-System, das primäre, sekundäre, Text-, Lade-, deaktivierte, Hover- und Fokuszustände mit konsistenten visuellen Regeln abdeckt.
Sicherheitsaudit
SicherAll static findings were adjudicated as false positives. The external command alerts matched Markdown backticks and inline code, while the blocker and entropy alerts matched readable frontend guidance. No prompt injection, data exfiltration intent, or executable installer logic was found.
Risikofaktoren
⚙️ Externe Befehle (19)
Diesen Bericht teilen & zitieren
Teile den versionierten Bewertungsbericht, das neutrale Badge, die Einbettungskarte und Zitate. Skillstore berichtet Nachweise, ohne zu entscheiden, ob dieser Skill sicher ist.
Berichtslink kopieren
https://skillstore.io/skills/yyh211-frontend-design/audits/7?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdown-Badge
[](https://skillstore.io/skills/yyh211-frontend-design?utm_source=security_passport_badge)HTML-Badge
<a href="https://skillstore.io/skills/yyh211-frontend-design?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/yyh211-frontend-design/security.svg" alt="Skillstore security assessment" loading="lazy"></a>Einbettungskarte
<iframe src="https://skillstore.io/embed/skills/yyh211-frontend-design.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>Wissenschaftliche Zitate (APA · BibTeX · CFF)
APA-Zitat
YYH211. (2026). frontend-design security audit report (audit version 7) [Author version unspecified]. Skillstore. https://skillstore.io/skills/yyh211-frontend-design/audits/7BibTeX-Zitat
@techreport{yyh211-yyh211-frontend-design-2026,
author = {YYH211},
title = {frontend-design security audit report (audit version 7)},
institution = {Skillstore},
year = {2026},
number = {7},
url = {https://skillstore.io/skills/yyh211-frontend-design/audits/7},
note = {Author version unspecified}
}CITATION.cff
cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "frontend-design security audit report (audit version 7)"
version: "unspecified"
type: report
authors:
- name: "YYH211"
date-released: "2026-07-08"
url: "https://skillstore.io/skills/yyh211-frontend-design/audits/7"
identifiers:
- type: other
value: "skillstore:yyh211-frontend-design:audit:7"
description: "Skillstore immutable audit report identifier"
Varianten vergleichen
18 installierbare VariantenJeder Autor bleibt ein eigener installierbarer Skill. Die empfohlene Variante wird nach Skillstore-Nachweisen bewertet.
Warum diese Variante zuerst steht
atman36-frontend-design
2026-10-25
frontend-design
2026-09-09
zhanlincui-frontend-design
2026-09-09
yyh211-frontend-design
2026-09-09
1bertogit-frontend-design
2026-10-13
92bilal26-frontend-design
2026-10-19
am-will-frontend-design
2026-10-23
adamaugustinsky-frontend-design
2026-10-21
azeem-2-frontend-design
2026-09-09
cesaraugustusgrob-frontend-design
2026-09-09
davila7-frontend-design
2026-09-09
anthropics-frontend-design
2026-10-24
pbakaus-frontend-design
2026-09-09
7spade-frontend-design
2026-10-18
sickn33-frontend-design
2026-09-09
agentworkforce-frontend-design
2026-10-22
ajv009-frontend-design
2026-10-22
dennisliuck-frontend-design
2026-09-09
Skillstore-Score
Warum dieser Score Evidenzvertrauen: HochWas Sie erstellen können
Eine Produkt-Landingpage erstellen
Verwandle ein Produktkonzept in eine eigenständige responsive Seite mit starker Typografie, starkem Layout und konversionsorientierten Abschnitten.
Ein internes Dashboard verbessern
Überarbeite eine datenintensive Oberfläche mit klarerer visueller Hierarchie, nutzbaren Abständen, barrierefreiem Kontrast und fokussierten Interaktionsdetails.
Benutzerdefinierte Webkomponenten erstellen
Entwirf wiederverwendbare Buttons, Cards, Panels und Zustände, die Standard-Framework-Styling vermeiden und bewusst gestaltet wirken.
Diese Prompts ausprobieren
Entwirf und erstelle eine responsive Landingpage für mein Produkt. Wähle eine starke visuelle Richtung und erkläre die wichtigsten Designentscheidungen vor der Implementierung.
Gestalte diese Komponente neu, damit sie eigenständiger und produktionsreif wirkt. Verbessere Typografie, Abstände, Zustände, Bewegung und Barrierefreiheit.
Erstelle eine ausgereifte Dashboard-Oberfläche für diese Workflows. Priorisiere schnelles Erfassen, Vergleichen, responsives Layout und klare Datenhierarchie.
Erstelle eine Frontend-Designrichtung für ein kleines Komponentensystem. Definiere Typografie, Farbe, Abstände, Bewegung, Zustände und Nutzungsregeln.
Bewährte Praktiken
- Gib Produktziel, Zielbenutzer und technischen Stack an, bevor du eine Implementierung anforderst.
- Fordere Barrierefreiheit, responsives Verhalten und Interaktionszustände in derselben Anfrage an.
- Prüfe generierte Designs anhand deiner Markenregeln und bestehenden Komponentenmuster.
Vermeiden
- Bitte nicht um generisches modernes Design ohne Produktkontext.
- Akzeptiere keine visuelle Ausarbeitung, die Lesbarkeit oder Tastaturzugang verschlechtert.
- Kombiniere diese Anleitung nicht mit strengen Designsystemen, ohne die Einschränkungen zu benennen.