frontend-frameworks
Provide framework-specific guidance for React, Vue, Svelte, Solid, Astro, and SSR architecture.
Quellinformationen
- Repository
- glayph/Agent
- Letzte Quellaktivität
- 19. September 2026 um 22:39
- Erkannte Sprache von SKILL.md
- Englisch
- Sterne
- 0
- Forks
- 0
Installationsoptionen
Standardmäßig ist der Prompt ausgewählt, der zuerst die Quelle prüft. Sie können zu einem direkten Befehl wechseln oder eine lokale Kopie herunterladen.
Quelldateien prüfen
Lesen Sie SKILL.md und alle von SkillsMP angezeigten Begleitdateien, bevor Sie sich für eine Installation entscheiden.
SKILL.md wird angezeigt
SKILL.md
Quellanweisungen · Schreibgeschützte Vorschau- name
- frontend-frameworks
- description
- Provide framework-specific guidance for React, Vue, Svelte, Solid, Astro, and SSR architecture.
- version
- 1.0.0
- author
- Miki
- license
- MIT
- platforms
- ["linux","macos","windows"]
- metadata
- {"Miki":{"tags":["react","vue","svelte","nextjs","ssr","spa"],"related_skills":["javascript","css-styling","responsive-design"]}}
# Front-End Frameworks
## Framework decision matrix
| Need | Choice |
|------|--------|
| Full SPA | React, Vue, Solid |
| SSR/SSG | Next.js, Nuxt, Astro, SvelteKit |
| Static content | Astro (zero JS by default) |
| Micro-frontends | Single-spa, Module Federation |
| Lightweight reactive | Solid, Preact, Svelte |
| Mobile + web | React Native + React |
## React patterns
- Components: function + hooks (no classes)
- State: `useState` for local, `useReducer` for complex, Zustand/Jotai for global
- Side effects: `useEffect` only for synchronization (not lifecycle)
- Memoization: `useMemo`/`useCallback` only for expensive computations
- Forms: React Hook Form + Zod validation
- Data fetching: TanStack Query (React Query)
## Vue patterns
- Composition API over Options API
- `<script setup>` for components
- Pinia for state management
- `v-model` for two-way binding
- `<KeepAlive>` for cached views
## SSR patterns (framework-agnostic)
- Hydrate interactive islands only (islands architecture)
- Stream HTML to the client
- Preload critical data on the server
- Avoid `window` access during SSR — guard with `typeof window`
- Use `Suspense` boundaries for streaming
## Performance targets
- LCP < 2.5s, TTI < 3.5s, CLS < 0.1
- First load JS bundle < 150KB (gzipped)
- Code-split by routes, lazy-load below-fold
- Prefetch link `rel="prefetch"` for likely next page
## Testing
| Layer | Tool |
|-------|------|
| Unit | Vitest, Testing Library |
| Component | Storybook, Testing Library |
| E2E | Playwright, Cypress |
| Visual | Percy, Chromatic |
Auf GitHub ansehen