frontend-dev-guidelines
Next.js-Frontends mit modernen Mustern erstellen
Moderne Next.js-Projekte benötigen konsistente Muster für Komponenten, Routing, Datenabruf und Styling. Dieser Skill gibt Claude, Codex und Claude Code praktische Frontend-Anleitungen für React 19 und Next.js 15.
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-dev-guidelines" from https://skillstore.io/skills/0chan-smc-frontend-dev-guidelines.md and its manifest at https://skillstore.io/api/skills/0chan-smc-frontend-dev-guidelines/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-dev-guidelines“ wird verwendet. Erstelle eine Produktlisten-Route mit Lade- und Fehlerzuständen.
Erwartetes Ergebnis:
Der Skill würde eine App Router-Seite, eine loading-Datei, eine Error Boundary, Feature-Komponenten und Datenabruf in Server Components empfehlen.
„frontend-dev-guidelines“ wird verwendet. Prüfe diesen Plan für eine interaktive Formularkomponente.
Erwartetes Ergebnis:
Der Skill würde Anforderungen an Client Components, typisierte Props, Validierung, Server Actions, Shadcn/ui-Nutzung und die Organisation von Tailwind-Klassen prüfen.
„frontend-dev-guidelines“ wird verwendet. Verbessere die Performance einer Dashboard-Seite.
Erwartetes Ergebnis:
Der Skill würde Server Components, Suspense Boundaries, optimierte Bilder, Schriftartenbehandlung und den sorgfältigen Einsatz von Client-Hooks vorschlagen.
Sicherheitsaudit
SicherAll static findings are false positives caused by Markdown formatting, placeholder example code, or JSX snippets. No prompt injection, malicious intent, credential access, command execution, or real network behavior was found in SKILL.md.
Risikofaktoren
⚙️ Externe Befehle (81)
🌐 Netzwerkzugriff (2)
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/0chan-smc-frontend-dev-guidelines/audits/8?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdown-Badge
[](https://skillstore.io/skills/0chan-smc-frontend-dev-guidelines?utm_source=security_passport_badge)HTML-Badge
<a href="https://skillstore.io/skills/0chan-smc-frontend-dev-guidelines?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/0chan-smc-frontend-dev-guidelines/security.svg" alt="Skillstore security assessment" loading="lazy"></a>Einbettungskarte
<iframe src="https://skillstore.io/embed/skills/0chan-smc-frontend-dev-guidelines.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
0Chan-smc. (2026). frontend-dev-guidelines security audit report (audit version 8) [Author version unspecified]. Skillstore. https://skillstore.io/skills/0chan-smc-frontend-dev-guidelines/audits/8BibTeX-Zitat
@techreport{0chan-smc-0chan-smc-frontend-dev-guidelines-2026,
author = {0Chan-smc},
title = {frontend-dev-guidelines security audit report (audit version 8)},
institution = {Skillstore},
year = {2026},
number = {8},
url = {https://skillstore.io/skills/0chan-smc-frontend-dev-guidelines/audits/8},
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-dev-guidelines security audit report (audit version 8)"
version: "unspecified"
type: report
authors:
- name: "0Chan-smc"
date-released: "2026-07-06"
url: "https://skillstore.io/skills/0chan-smc-frontend-dev-guidelines/audits/8"
identifiers:
- type: other
value: "skillstore:0chan-smc-frontend-dev-guidelines:audit:8"
description: "Skillstore immutable audit report identifier"
Varianten vergleichen
7 installierbare VariantenJeder Autor bleibt ein eigener installierbarer Skill. Die empfohlene Variante wird nach Skillstore-Nachweisen bewertet.
Warum diese Variante zuerst steht
briandai22-frontend-dev-guidelines
2026-09-09
0chan-smc-frontend-dev-guidelines
2026-10-11
dojocodinglabs-frontend-dev-guidelines
2026-09-09
sickn33-frontend-dev-guidelines
2026-09-09
bom-98-frontend-dev-guidelines
2026-09-09
dimon94-frontend-dev-guidelines
2026-09-09
diet103-frontend-dev-guidelines
2026-09-09
Skillstore-Score
Warum dieser Score Evidenzvertrauen: HochWas Sie erstellen können
Feature-Seiten erstellen
Eine neue App Router-Seite mit Komponenten, Lade-UI, Fehlerbehandlung und Datenabrufmustern planen.
Komponentenarbeit standardisieren
Konsistente Konventionen für Server Component, Client Component, TypeScript, Shadcn/ui und Tailwind CSS anwenden.
Frontend-Architektur prüfen
Prüfen, ob ein Next.js-Feature modernen Praktiken für Dateiorganisation, Performance und Typisierung folgt.
Diese Prompts ausprobieren
Nutze den frontend-dev-guidelines Skill, um eine Next.js 15-Seite für eine Beitragsliste mit Lade- und Fehlerzuständen zu planen.
Nutze den frontend-dev-guidelines Skill, um zu entscheiden, welche Teile dieses Features Server Components oder Client Components sein sollten.
Nutze den frontend-dev-guidelines Skill, um einen Formularablauf mit Validierung, Server Actions und Shadcn/ui-Formularkomponenten zu entwerfen.
Nutze den frontend-dev-guidelines Skill, um meinen Next.js-Feature-Plan auf Routing, Dateiorganisation, Performance und TypeScript-Probleme zu prüfen.
Bewährte Praktiken
- Mit Server Components beginnen und Client Components nur für Interaktion, Hooks oder Browser-APIs hinzufügen.
- Routendateien, Feature-Komponenten, Server Actions und gemeinsame UI an klaren App Router-Positionen halten.
- TypeScript, Shadcn/ui, Tailwind CSS und die cn-Utility konsistent im gesamten Frontend-Code verwenden.
Vermeiden
- Allen Komponenten use client hinzufügen, ohne zu prüfen, ob Browser-APIs oder Hooks benötigt werden.
- Routenlogik, gemeinsame UI, Feature-Code und Datenmutationen in einem unstrukturierten Ordner vermischen.
- Platzhalter-API-URLs oder Beispiel-Datenmodelle ohne Anpassung in die Produktion kopieren.