Grundlagen von Frontend-Komponenten überprüfen
Frontend-Reviews übersehen häufig Architektur-, State-, Barrierefreiheits- und Performance-Probleme, bis Komponenten schwer wartbar werden. Dieser Skill führt Claude, Codex und Claude Code mit gezielten Checklistenfragen und Review-Mustern durch die Bewertung der Komponentenqualität.
Kopieren Sie diese Anfrage in Ihren Agent. Sie enthält die maßgebliche Skill-Seite und das Manifest.
Review the Skillstore skill "frontend-fundamentals" from https://skillstore.io/skills/danielpodolsky-frontend-fundamentals.md and its manifest at https://skillstore.io/api/skills/danielpodolsky-frontend-fundamentals/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-fundamentals“ wird verwendet. Eine Dashboard-Komponente übernimmt Datenladen, Routing-Entscheidungen, State-Updates und die gesamte Darstellung.
Erwartetes Ergebnis:
Das Review würde empfehlen, die Container-Verantwortlichkeiten von kleineren Präsentationskomponenten zu trennen und die Logik zum Laden der Daten zu extrahieren.
„frontend-fundamentals“ wird verwendet. Eine Komponente reicht dasselbe user-Objekt durch vier verschachtelte Ebenen an ein Widget weiter.
Erwartetes Ergebnis:
Das Review würde Prop Drilling markieren und fragen, ob eine nähere Datenquelle oder ein geteilter Context die Abhängigkeit klarer machen würde.
„frontend-fundamentals“ wird verwendet. Eine Listenansicht filtert Elemente bei jedem Rendern und verwendet generische Container für interaktive Steuerelemente.
Erwartetes Ergebnis:
Das Review würde vorschlagen, teure abgeleitete Werte zu memoisiert und nichtsemantische interaktive Elemente durch barrierefreie Steuerelemente zu ersetzen.
All eight static findings are false positives caused by Markdown fenced examples in SKILL.md, not Ruby or shell backtick execution. The skill is prose guidance for frontend code review, and no semantic evidence of prompt injection, data exfiltration, or unsafe operational 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/danielpodolsky-frontend-fundamentals/audits/8?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report[](https://skillstore.io/skills/danielpodolsky-frontend-fundamentals?utm_source=security_passport_badge)<a href="https://skillstore.io/skills/danielpodolsky-frontend-fundamentals?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/danielpodolsky-frontend-fundamentals/security.svg" alt="Skillstore security assessment" loading="lazy"></a><iframe src="https://skillstore.io/embed/skills/danielpodolsky-frontend-fundamentals.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>DanielPodolsky. (2026). frontend-fundamentals security audit report (audit version 8) [Author version unspecified]. Skillstore. https://skillstore.io/skills/danielpodolsky-frontend-fundamentals/audits/8@techreport{danielpodolsky-danielpodolsky-frontend-fundamentals-2026,
author = {DanielPodolsky},
title = {frontend-fundamentals security audit report (audit version 8)},
institution = {Skillstore},
year = {2026},
number = {8},
url = {https://skillstore.io/skills/danielpodolsky-frontend-fundamentals/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-fundamentals security audit report (audit version 8)"
version: "unspecified"
type: report
authors:
- name: "DanielPodolsky"
date-released: "2026-07-06"
url: "https://skillstore.io/skills/danielpodolsky-frontend-fundamentals/audits/8"
identifiers:
- type: other
value: "skillstore:danielpodolsky-frontend-fundamentals:audit:8"
description: "Skillstore immutable audit report identifier"
Eine strukturierte Checkliste anwenden, bevor Änderungen an Frontend-Komponenten gemergt werden.
Geführte Fragen verwenden, um einem Entwickler zu helfen, Probleme beim Aufteilen, bei State und bei der Benennung zu erkennen.
Eine Komponentensammlung auf wiederkehrende Muster prüfen, die Komplexität und Review-Aufwand erhöhen.
Überprüfe diese Frontend-Komponente mit der frontend-fundamentals-Checkliste. Konzentriere dich auf eine einzelne Verantwortung, die Anzahl der Props und Barrierefreiheit.
Überprüfe diese zusammengehörigen Komponenten im Hinblick auf State Management. Ermittle, welcher State lokal bleiben, nach oben verschoben oder mit Server-State-Tools verwaltet werden sollte.
Auditiere diese UI-Änderung auf vermeidbare Re-Renders, aufwendige Rendering-Arbeit, Möglichkeiten für Lazy Loading, semantisches HTML und Tastaturzugänglichkeit.
Überprüfe diesen Pull Request als Mentor. Stelle zuerst sokratische Fragen und liste anschließend die Frontend-Architekturänderungen mit der größten Wirkung auf.
Autor
DanielPodolskyLizenz
MIT
Skillstore-Revision
r1
Versionshinweis
Der Autor hat keine Version angegeben.
Repository
https://github.com/DanielPodolsky/mentor-spec/tree/main/.claude/skills/fundamentals/frontendRef.
34f316ba14ef36c7a620fc09f2676d2429997a77
Aktualität der Wartung
18.7.2026
Nutzung
15 Downloads · 181 Aufrufe
Dateistruktur
📄 SKILL.md
Code-Grundlagen überprüfen
Kleine Lesbarkeitsprobleme machen Code-Reviews langsamer und erschweren die Wartung. Dieser Skill überprüft Benennung, Struktur, Wiederverwendung und Kommentare, damit Claude, Codex oder Claude Code klare Hinweise mit PASS oder SUGGESTIONS zurückgeben kann.
Engineering-Grundlagen überprüfen
Teams benötigen häufig konsistentes Feedback zu Lesbarkeit, Benennung und Codeorganisation. Dieser Skill gibt Claude, Codex und Claude Code eine praktische Checkliste für alltägliche Reviews der Codequalität.
Performance-Risiken vor dem Release prüfen
Performance-Risiken treten oft auf, nachdem der Code funktioniert, aber bevor Skalierung schwache Pfade offenlegt. Dieser Skill führt Claude, Codex und Claude Code durch gezielte Fragen zur Performance-Überprüfung.
Grundlagen der Fehlerbehandlung überprüfen
Schlechte Fehlerbehandlung verbirgt Fehler, verwirrt Benutzer und verlangsamt das Debugging in der Produktion. Dieser Skill lenkt Reviews auf klare Meldungen, Wiederherstellungspfade und nützliche Logs.
React-Grundlagen zur Barrierefreiheit überprüfen
Interaktive React-Oberflächen verfehlen oft Anforderungen an Tastaturbedienung, Beschriftung und Fokus. Dieser Skill führt Claude, Codex und Claude Code durch praktische WCAG-Prüfungen für JSX, Formulare, Navigation und Dialoge.
Sicherheit vor dem Release prüfen
Teams übersehen Sicherheitsprobleme, wenn Release-Prüfungen informell ablaufen. Dieser Skill führt Claude, Codex und Claude Code durch strukturierte Sicherheitsfragen und Warnvorlagen.
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.
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.
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.
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.
Vue Router Navigation Guards verbessern
von vuejs-ai
Vue Router-Probleme können veraltete Daten, fehlerhafte Weiterleitungen und schwache Routenprüfungen verursachen. Diese Skill bietet fokussierte Muster für Guards, Params, Cleanup und Routing in der Produktion.
Code mit strukturierten Qualitätsprüfungen reviewen
von alirezarezvani
Code-Reviews können Qualitäts-, Sicherheits- und Wartbarkeitsprobleme übersehen. Dieser Skill unterstützt strukturierte Reviews mit Skripten, Checklisten und Berichtserstellung.