frontend-frameworks
Provide framework-specific guidance for React, Vue, Svelte, Solid, Astro, and SSR architecture.
Informations de source
- Dépôt
- glayph/Agent
- Dernière activité de la source
- 19 septembre 2026 à 22:39
- Langue détectée de SKILL.md
- anglais
- Étoiles
- 0
- Forks
- 0
Options d'installation
Le prompt qui vérifie d'abord la source est sélectionné par défaut. Vous pouvez passer à une commande directe ou télécharger une copie locale.
Vérifiez les fichiers source
Lisez SKILL.md et les fichiers associés affichés par SkillsMP avant de décider de l'installer.
Affichage de SKILL.md
SKILL.md
Instructions source · Aperçu en lecture seule- 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 |
Voir sur GitHub