Compétences cc-skill-frontend-patterns
📦

cc-skill-frontend-patterns

Sûr

Moderne React-Muster anwenden

Warten Sie React-Anwendungen mit bewährten Mustern für Komponentenkomposition, State-Management und Leistungsoptimierung.

Prend en charge: Claude Codex Code(CC)
🥉 72 Bronze
1

Télécharger le ZIP du skill

2

Importer dans Claude

Allez dans Paramètres → Capacités → Skills → Importer un skill

3

Activez et commencez à utiliser

Tester

Utilisation de "cc-skill-frontend-patterns". Create a compound Tabs component with TabList, Tab, and TabPanel

Résultat attendu:

Eine vollständige Implementierung mit geteiltem State über React Context, korrekten Typdefinitionen und Verwendungsbeispiel

Utilisation de "cc-skill-frontend-patterns". Write a useDebounce hook for search input

Résultat attendu:

Ein benutzerdefinierter Hook, der Value-Updates um eine angegebene Verzögerung verzögert, mit TypeScript-Typen

Utilisation de "cc-skill-frontend-patterns". Add error boundary to catch component errors

Résultat attendu:

Eine klassenbasierte ErrorBoundary-Komponente mit getDerivedStateFromError und componentDidCatch

Audit de sécurité

Sûr
v1 • 2/25/2026

This is a legitimate frontend development documentation skill. All 54 static findings are false positives triggered by code examples in markdown documentation. The skill teaches standard React patterns including composition, hooks, state management, and performance optimization. No actual security risks present.

1
Fichiers analysés
639
Lignes analysées
0
résultats
1
Total des audits
Aucun problème de sécurité trouvé
Audité par: claude

Score de qualité

38
Architecture
90
Maintenabilité
85
Contenu
50
Communauté
100
Sécurité
87
Conformité aux spécifications

Ce que vous pouvez construire

Wiederverwendbare Komponentenbibliotheken erstellen

Erstellen Sie flexible, wiederverwendbare Komponenten-APIs mit Compound Components und Kompositionsmustern.

Komplexen Anwendungs-State verwalten

Implementieren Sie skalierbares State-Management mit React Context und useReducer.

React-Anwendungsleistung optimieren

Wenden Sie Memoization, Lazy Loading und Virtualisierung für schnelle Benutzeroberflächen an.

Essayez ces prompts

Compound Components erstellen 
Erstellen Sie ein Compound-Component-Muster für eine [component name] in React. Fügen Sie [sub-component-1], [sub-component-2] und [sub-component-3] hinzu, die State über Context teilen.
Benutzerdefinierten Hook implementieren 
Schreiben Sie einen benutzerdefinierten React-Hook namens use[Feature], der [specific behavior wie Data Fetching, Formularvalidierung oder Local Storage] behandelt.
Leistung optimieren 
Überprüfen Sie diese React-Komponente und wenden Sie Leistungsoptimierungen an, einschließlich useMemo, useCallback und React.memo wo angemessen.
Formularvalidierung hinzufügen 
Erstellen Sie ein kontrolliertes Formular mit Validierung für Felder: [list fields]. Fügen Sie Fehlermeldungen und Submission-Handling hinzu.

Bonnes pratiques

  • Bevorzugen Sie Komposition gegenüber Vererbung für Komponentenwiederverwendung
  • Halten Sie benutzerdefinierte Hooks auf einzelne Verantwortlichkeiten fokussiert
  • Memoize teure Berechnungen und Callback-Funktionen
  • Verwenden Sie TypeScript für bessere Komponentenverträge

Éviter

  • Vermeiden Sie State-Updates während des Renderings, die zu Endlosschleifen führen
  • Mutieren Sie Objekte nicht direkt; verwenden Sie immutable Updates
  • Vermeiden Sie das Übergeben neuer Objektreferenzen als Props ohne Memoization
  • Vergessen Sie nicht, alle Abhängigkeiten in useEffect-Abhängigkeitsarrays einzuschließen

Foire aux questions

Was ist der Unterschied zwischen useMemo und useCallback?
useMemo memoisiert einen berechneten Wert, während useCallback eine Funktion memoisiert. Verwenden Sie useMemo für teure Berechnungen und useCallback beim Übergeben von Callbacks an optimierte Kindkomponenten.
Wann sollte ich useReducer anstelle von useState verwenden?
Verwenden Sie useReducer, wenn Sie komplexe State-Logik mit mehreren Unterwerten haben oder wenn der nächste State vom vorherigen abhängt. Es bietet vorhersehbarere State-Übergänge.
Wie funktionieren Compound Components?
Compound Components verwenden React Context, um impliziten State zwischen verwandten Komponenten zu teilen. Die übergeordnete Komponente verwaltet den State und stellt ihn über Context bereit, sodass Kinder darauf zugreifen und ihn ändern können.
Was ist Code-Splitting und warum ist es wichtig?
Code-Splitting teilt Ihr Bundle in kleinere Chunks auf, die bei Bedarf geladen werden. Es verbessert die initiale Ladezeit, indem nur der für die aktuelle Ansicht benötigte Code geladen wird.
Wie verhindere ich unnötige Re-Renders?
Verwenden Sie React.memo für reine Komponenten, useMemo für teure Berechnungen, useCallback für Funktion-Props und stellen Sie sicher, dass State-Updates stabile Referenzen sind.
Kann mir dieser Skill bei der Next.js-Entwicklung helfen?
Ja, die Muster gelten für Next.js einschließlich Server Components, Client Components und dem App Router. Die State-Management- und Leistungsmuster funktionieren sowohl in React als auch in Next.js.

Détails du développeur

Auteur

affaan-m

Licence

MIT

Dépôt

https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/cc-skill-frontend-patterns

Réf

main

Structure de fichiers

📄 SKILL.md