القائمة
Vite — next-generation frontend build tool with instant HMR, native ESM dev server, and optimized production builds.
يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.
اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
يتجاوز الأمر المباشر Prompt المخصّص للمراجعة. افحص المصدر قبل تشغيله.
npx skills add https://github.com/skeletorflet/opencode-supreme-setup --skill viteيبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.
تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى SkillsMP.
Hyperframes-based video template for retro pixel deck motion design. Use when users want a high-fidelity, multi-scene HTML-to-video composition with advanced transitions, interactive preview controls, and ready-to-render default style.
Generate and iterate ad creative including headlines, descriptions, and primary text. Useful for paid social and search ad iteration.
Browser automation CLI for AI agents. Use when the user needs to inspect, test, or automate browser behavior: navigating pages, filling forms, clicking buttons, taking screenshots, extracting page data, testing web apps, dogfooding Open Design previews, QA, bug hunts, or reviewing app quality. Prefer local Open Design preview URLs unless the user explicitly asks for external browsing.
استنادا إلى تصنيف SOC المهني
عرض SKILL.md
| name | vite |
| description | Vite — next-generation frontend build tool with instant HMR, native ESM dev server, and optimized production builds. |
vite.config.ts: defineConfig({ plugins: [react()], resolve: { alias: { '@': '/src' } }, build: { rollupOptions: {...} } }). Type-safe with defineConfig helper. Environment mode via --mode.
Official: @vitejs/plugin-react, @vitejs/plugin-vue, @vitejs/plugin-legacy. Community: vite-plugin-pwa, vite-plugin-svgr, vite-tsconfig-paths. vite.config.ts plugins array order matters.
Native ESM dev server — instant module updates. Full page reload only on file addition/deletion. import.meta.hot API for custom HMR boundaries. accept(), dispose(), invalidate().
PostCSS config auto-detected (postcss.config.js). CSS modules: *.module.css → styles.className. Pre-processors: npm i -D sass then *.scss. @import resolution built-in.
ESBuild transpilation (no type-checking). Use tsc --noEmit for type checking in CI. isolatedModules: true required. Path aliases mirror in tsconfig.json and vite.config.ts.
Rollup-based production build. Code splitting via manualChunks. CSS code splitting (per-entry CSS). Asset hashing. Tree-shaking. build.target for browser targets. build.minify (esbuild/terser).
vite.ssr() export. Node.js-compatible build. ssrLoadModule() for dev. ssrManifest for preload directives. Framework integrations: vike, @vitejs/plugin-react with react-dom/server.
VITE_* prefix exposed via import.meta.env. Modes: development, production, custom. .env, .env.local, .env.[mode]. import.meta.env.SSR for server check.
build.rollupOptions.input = { main: '/index.html', admin: '/admin/index.html' }. Shared config via build.rollupOptions. HTML entry points must be real files.
Use build.chunkSizeWarningLimit. Leverage optimizeDeps for pre-bundling. Enable build.sourcemap only in dev. Prefer import() for lazy routes. Use vite preview to test production build.