frontend-design
Unverwechselbare Frontend-Oberflächen gestalten
Generische UI-Ausgaben lassen Produkte unfertig wirken und erschweren Vertrauen. Dieser Skill führt Claude, Codex und Claude Code zu ausgefeilter Frontend-Arbeit mit stärkerer visueller Richtung.
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/7spade-frontend-design.md and its manifest at https://skillstore.io/api/skills/7spade-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. Ein SaaS-Analytics-Dashboard soll hochwertig wirken und für die tägliche Überwachung nützlich sein.
Erwartetes Ergebnis:
Ein responsives Dashboard-Konzept mit fokussierter Navigation, kompakten Datenpanels, starker Typografie, kontrollierten Farbakzenten und praktischen Hover-Zuständen.
„frontend-design“ wird verwendet. Eine Landingpage für ein Kreativtool wirkt zu generisch.
Erwartetes Ergebnis:
Eine überarbeitete Seitenrichtung mit stärkerem visuellen Thema, mutigerer Komposition, charaktervoller Typografie, Bewegungshinweisen und klareren Conversion-Abschnitten.
„frontend-design“ wird verwendet. Eine React-Komponente braucht besseres Styling und Mikrointeraktionen.
Erwartetes Ergebnis:
Eine Komponentenbehandlung mit verfeinerten Abständen, zweckgerichteten Zuständen, zugänglichen Kontrastzielen und Animationsentscheidungen, die die Interaktion unterstützen.
Sicherheitsaudit
SicherAll three static findings are false positives caused by design-focused wording in SKILL.md. I found no prompt injection, exfiltration intent, external command use, network behavior, or unsafe filesystem behavior in the reviewed skill files.
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/7spade-frontend-design/audits/6?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdown-Badge
[](https://skillstore.io/skills/7spade-frontend-design?utm_source=security_passport_badge)HTML-Badge
<a href="https://skillstore.io/skills/7spade-frontend-design?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/7spade-frontend-design/security.svg" alt="Skillstore security assessment" loading="lazy"></a>Einbettungskarte
<iframe src="https://skillstore.io/embed/skills/7spade-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
7Spade. (2026). frontend-design security audit report (audit version 6) [Author version unspecified]. Skillstore. https://skillstore.io/skills/7spade-frontend-design/audits/6BibTeX-Zitat
@techreport{7spade-7spade-frontend-design-2026,
author = {7Spade},
title = {frontend-design security audit report (audit version 6)},
institution = {Skillstore},
year = {2026},
number = {6},
url = {https://skillstore.io/skills/7spade-frontend-design/audits/6},
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 6)"
version: "unspecified"
type: report
authors:
- name: "7Spade"
date-released: "2026-07-06"
url: "https://skillstore.io/skills/7spade-frontend-design/audits/6"
identifiers:
- type: other
value: "skillstore:7spade-frontend-design:audit:6"
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
Ein Produkt-Dashboard erstellen
Verwandle grobe Dashboard-Anforderungen in eine ausgefeilte Oberfläche mit stärkerer Hierarchie, besserem Layout und detaillierteren Interaktionen.
Eine Landingpage verbessern
Verfeinere eine Marketingseite, damit Layout, Typografie, Bewegung und visueller Ton bewusster gestaltet wirken.
Anwendungskomponenten gestalten
Wende eine unverwechselbare visuelle Richtung auf Komponenten an und halte die Implementierung zugleich praktikabel für die Frontend-Entwicklung.
Diese Prompts ausprobieren
Verwende den frontend-design Skill, um eine ausgefeilte Webseite für [product or topic] zu erstellen. Füge responsives HTML und CSS mit einer klaren visuellen Richtung hinzu.
Verwende den frontend-design Skill, um diese Oberfläche zu verbessern: [paste description]. Behalte den Workflow bei, aber verbessere Layout, Typografie, Farbe und Details.
Verwende den frontend-design Skill, um ein Dashboard für [users] zu gestalten. Beziehe wichtige Zustände, responsives Layout, Hierarchie und Interaktionsdetails für wiederholte Nutzung ein.
Verwende den frontend-design Skill, um eine unverwechselbare Frontend-Richtung für [product] zu definieren und umzusetzen. Stelle Komponenten, Layout-Regeln, Bewegungsleitlinien und Styling-Begründungen bereit.
Bewährte Praktiken
- Stelle Zielgruppe, Produktkontext, technischen Stack und gewünschten Ton bereit, bevor du um Implementierung bittest.
- Frage nach responsiven Zuständen, Leerzuständen, Ladezuständen und Interaktionsdetails, wenn du Anwendungs-UI erstellst.
- Prüfe Barrierefreiheit, Performance und Markenfit, bevor generierter Frontend-Code in Produktion verwendet wird.
Vermeiden
- Bitte nicht nur um ein schönes Design, ohne das Produkt oder die Nutzer zu erklären.
- Akzeptiere keine aufwendigen Animationen oder visuellen Effekte, wenn die Oberfläche Geschwindigkeit und Klarheit braucht.
- Behandle generiertes Styling nicht als Ersatz für Barrierefreiheitstests und Browser-Tests.