develop-frontend
Next.js React-Frontends erstellen
Die Frontend-Entwicklung erfordert die Einhaltung bestimmter Projektkonventionen, Teststandards und Build-Prozesse. Diese Anleitung bietet Schritt-für-Schritt-Unterstützung für die Implementierung von Next.js/React-Features mit richtiger Komponentenarchitektur, API-Integration und Testabdeckung.
下载技能 ZIP
在 Claude 中上传
前往 设置 → 功能 → 技能 → 上传技能
开启并开始使用
测试它
正在使用“develop-frontend”。 Create a login page with email and password form
预期结果:
- ✓ Created views/login/LoginView.tsx (Container component)
- ✓ Created components/LoginForm/index.tsx (Presentational component)
- ✓ Implemented React Hook Form with Zod validation
- ✓ Added shadcn/ui Form components (Input, Button, Label)
- ✓ Created useLogin custom hook with iron-session
- ✓ Wrote 5 test cases with 92% coverage
- ✓ Passed Biome lint check (0 errors)
- ✓ Build successful
- ✓ Server running at http://localhost:3000
安全审计
安全Pure markdown documentation skill containing only frontend development guidance. No executable code, scripts, or dangerous capabilities. All static findings are false positives: cryptographic hash references in metadata were misidentified as weak crypto, shell command examples in documentation were flagged as backtick execution, and standard YAML frontmatter was flagged as obfuscation. This is a guidance-only skill that instructs AI agents on development workflows.
风险因素
📁 文件系统访问 (1)
⚙️ 外部命令 (62)
质量评分
你能构建什么
Neue Features erstellen
Neue Seiten und Komponenten nach Projektkonventionen mit richtigen Tests implementieren
UI-Komponenten erstellen
Wiederverwendbare Presentational-Komponenten mit Storybook und Tests entwickeln
Testabdeckung implementieren
Unit- und Integrationstests für React-Komponenten mit Vitest schreiben
试试这些提示
Erstelle eine neue Dashboard-Seite unter views/dashboard/ mit Benutzerstatistik-Anzeige. Binde eine Container-Komponente ein, die Daten mit dem Orval-API-Client abruft, und Presentational-Komponenten für die UI. Schreibe Vitest-Tests mit 80% Abdeckung.
Erstelle eine wiederverwendbare UserCard-Komponente mit shadcn/ui Card. Erstelle die Komponente in components/UserCard/ mit index.tsx, index.test.tsx und index.stories.tsx. Wende tablet-first responsives Design an.
Implementiere ein Kontaktformular mit React Hook Form und Zod-Validierung. Verwende shadcn/ui Form-Komponenten. Binde richtige Fehlerbehandlung und Ladezustände ein. Schreibe Tests für Validierung und Absenden.
Integriere die Benutzerprofil-API. Erstelle einen useUserProfile Custom Hook, der Lade-, Fehler- und Erfolgszustände handhabt. Verwende den Orval-generierten Client. Schreibe Tests mit MSW-Mock-Handlern.
最佳实践
- Vor dem Erstellen neuer Komponenten immer bestehende shadcn/ui-Komponenten prüfen
- Presentational (UI) und Container (Logik) Komponenten klar trennen
- Lint, Tests und Build lokal ausführen, bevor die Fertigstellung gemeldet wird
避免
- any statt unknown für Typsicherheit verwenden
- Business-Logik mit UI-Rendering in derselben Komponente mischen
- Testabdeckungsanforderungen für schnellere Lieferung überspringen