frontend-frameworks
Provide framework-specific guidance for React, Vue, Svelte, Solid, Astro, and SSR architecture.
معلومات المصدر
- المستودع
- glayph/Agent
- آخر نشاط في المصدر
- ١٩ سبتمبر ٢٠٢٦ في ٢٢:٣٩
- لغة SKILL.md المكتشفة
- الإنجليزية
- النجوم
- ٠
- التفرعات
- ٠
خيارات التثبيت
يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.
مراجعة ملفات المصدر
اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.
عرض SKILL.md
SKILL.md
تعليمات المصدر · معاينة للقراءة فقط- 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 |
عرض على GitHub