스킬 cc-skill-frontend-patterns
📦

cc-skill-frontend-patterns

안전

Moderne React-Muster anwenden

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

지원: Claude Codex Code(CC)
📊 69 적절함
1

스킬 ZIP 다운로드

2

Claude에서 업로드

설정 → 기능 → 스킬 → 스킬 업로드로 이동

3

토글을 켜고 사용 시작

테스트해 보기

"cc-skill-frontend-patterns" 사용 중입니다. Create a compound Tabs component with TabList, Tab, and TabPanel

예상 결과:

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

"cc-skill-frontend-patterns" 사용 중입니다. Write a useDebounce hook for search input

예상 결과:

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

"cc-skill-frontend-patterns" 사용 중입니다. Add error boundary to catch component errors

예상 결과:

Eine klassenbasierte ErrorBoundary-Komponente mit getDerivedStateFromError und componentDidCatch

보안 감사

안전
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
스캔된 파일
639
분석된 줄 수
0
발견 사항
1
총 감사 수
보안 문제를 찾지 못했습니다
감사자: claude

품질 점수

38
아키텍처
90
유지보수성
85
콘텐츠
31
커뮤니티
100
보안
87
사양 준수

만들 수 있는 것

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.

이 프롬프트를 사용해 보세요

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.

모범 사례

  • 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

피하기

  • 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

자주 묻는 질문

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.

개발자 세부 정보

작성자

affaan-m

라이선스

MIT

리포지토리

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

참조

main

파일 구조

📄 SKILL.md