Next.js-Frontend-Komponenten erstellen
Next.js-Teams vermischen Server Components und Client Components oft falsch. Diese Skill bietet wiederverwendbare Muster für barrierefreie, typisierte App Router-Komponenten.
Kopieren Sie diese Anfrage in Ihren Agent. Sie enthält die maßgebliche Skill-Seite und das Manifest.
Review the Skillstore skill "frontend-component" from https://skillstore.io/skills/asmayaseen-frontend-component.md and its manifest at https://skillstore.io/api/skills/asmayaseen-frontend-component/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.
„frontend-component“ wird verwendet. Plane eine geschützte Dashboard-Route in einem Next.js App Router-Projekt.
Erwartetes Ergebnis:
Die Antwort identifiziert sie als Client Component, weil sie Hooks und Navigation verwendet. Sie enthält Lade-, Weiterleitungs- und Autorisierungszustände.
„frontend-component“ wird verwendet. Verbessere eine Formular-Komponente für die Registrierung.
Erwartetes Ergebnis:
Die Antwort trennt Formulardaten, Validierungsfehler, API-Fehler und Ladezustand. Sie empfiehlt außerdem barrierefreie Labels und klares Feedback beim Absenden.
„frontend-component“ wird verwendet. Füge einer Aufgabenliste Offline-Unterstützung hinzu.
Erwartetes Ergebnis:
Die Antwort schlägt IndexedDB-Speicher, Nachverfolgung des Synchronisierungsstatus, Online-Wiederherstellung und Fehlerbehandlung vor. Sie weist auf eine Datenschutzprüfung für den Logging-Kontext hin.
Reviewed 107 static findings in SKILL.md. The dynamic imports, backticks, key matches, reconnaissance matches, and same-origin fetch are documentation examples, not executable malicious behavior. No prompt injection or data-exfiltration 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/asmayaseen-frontend-component/audits/8?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report[](https://skillstore.io/skills/asmayaseen-frontend-component?utm_source=security_passport_badge)<a href="https://skillstore.io/skills/asmayaseen-frontend-component?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/asmayaseen-frontend-component/security.svg" alt="Skillstore security assessment" loading="lazy"></a><iframe src="https://skillstore.io/embed/skills/asmayaseen-frontend-component.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>Asmayaseen. (2026). frontend-component security audit report (audit version 8) [Author version unspecified]. Skillstore. https://skillstore.io/skills/asmayaseen-frontend-component/audits/8@techreport{asmayaseen-asmayaseen-frontend-component-2026,
author = {Asmayaseen},
title = {frontend-component security audit report (audit version 8)},
institution = {Skillstore},
year = {2026},
number = {8},
url = {https://skillstore.io/skills/asmayaseen-frontend-component/audits/8},
note = {Author version unspecified}
}cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "frontend-component security audit report (audit version 8)"
version: "unspecified"
type: report
authors:
- name: "Asmayaseen"
date-released: "2026-07-05"
url: "https://skillstore.io/skills/asmayaseen-frontend-component/audits/8"
identifiers:
- type: other
value: "skillstore:asmayaseen-frontend-component:audit:8"
description: "Skillstore immutable audit report identifier"
Typisierte Komponentenpläne generieren, die den Grenzen von Server Components und Client Components folgen.
Formulare, geschützte Routen, Toasts, Inline-Bearbeitung und Ladezustände mit konsistenter Struktur erstellen.
Komponentenvorschläge anhand von Erwartungen an Barrierefreiheit, TypeScript, Tailwind und Next.js App Router prüfen.
Verwende den frontend-component skill, um zu entscheiden, ob meine neue Next.js-Komponente eine Server Component oder Client Component sein sollte. Erkläre die Wahl.
Verwende den frontend-component skill, um eine TypeScript-Komponentenstruktur für ein wiederverwendbares Dashboard-Widget mit Props, Ladezustand und Tailwind-Klassen zu skizzieren.
Verwende den frontend-component skill, um diesen Plan für eine interaktive Komponente auf Lücken bei der Barrierefreiheit nach WCAG 2.1 AA zu prüfen und konkrete Verbesserungen vorzuschlagen.
Verwende den frontend-component skill, um eine fortgeschrittene Aufgabenlisten-Komponente mit Drag-and-drop, Offline-Synchronisierung, Caching, Error Boundaries und datenschutzbewusstem Logging zu planen.
Autor
AsmayaseenLizenz
MIT
Skillstore-Revision
r1
Versionshinweis
Der Autor hat keine Version angegeben.
Ref.
6eec4a59f63ff83440a84c18d1aef79743bc714e
Aktualität der Wartung
22.7.2026
Nutzung
6 Downloads · 331 Aufrufe
Dateistruktur
📄 SKILL.md
Zuverlässige Agenten-Tools entwerfen
Agenten scheitern, wenn Tool-Namen, Eingaben, Ausgaben oder Fehler mehrdeutig sind. Dieser Skill bietet praktische Muster für Tool-Beschreibungen, Schemas, Antwortformate und Tests.
Softwareprobleme systematisch debuggen
Unstrukturiertes Beheben von Bugs verschwendet Zeit und kann den eigentlichen Fehler verdecken. Dieser Skill führt Claude, Codex und Claude Code durch evidenzbasierte Ursachenanalyse.
Zuverlässigkeit von Produktionsservices verbessern
Produktionsteams benötigen klare Zuverlässigkeitsziele und wiederholbare Incident-Praktiken. Diese Skill stellt SRE-Vorlagen für SLOs, Error Budgets, Alerting und Postmortems bereit.
shadcn/ui-Oberflächen in Next.js erstellen
React-Teams benötigen konsistente UI-Muster, die mit modernem Next.js funktionieren. Dieser Skill bietet Anleitungen zur Einrichtung von shadcn/ui, Komponentenbeispiele, Formularvalidierung, Tabellen, Sidebars und Muster für den Dunkelmodus.
Streaming-KI-Chatoberflächen erstellen
KI-Chat in Echtzeit wirkt fehlerhaft, wenn Benutzer keinen Fortschritt, Antwortstatus oder UI-Änderungen sehen können. Diese Skill bietet Claude, Codex und Claude Code Muster für Streaming-Lebenszyklen, Fortschrittsereignisse, Client-Effekte und Client-Tools.
Kontextdegradation diagnostizieren
Lange KI-Sitzungen können an Genauigkeit verlieren, wenn der Kontext wächst, Konflikte enthält oder ablenkendes Material einschließt. Diese Skill hilft Claude, Codex und Claude Code, Degradationsmuster zu erkennen und praktische Gegenmaßnahmen auszuwählen.
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.
Fullstack-Apps mit Senior-Anleitung erstellen
von alirezarezvani
Fullstack-Projekte benötigen oft ein konsistentes Setup, Architekturentscheidungen und Qualitätsprüfungen. Dieser Skill bietet Skripte und Referenzen für Arbeiten mit React, Next.js, Node.js, GraphQL und PostgreSQL.
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.
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.