Skip to main content
affpapa.org
RU EN
skill CX Codex

vinext-vite-nextjs — Claude Code skill: what it does, how to install

Guides your AI assistant through running Next.js codebases on Vite and deploying them to Cloudflare Workers.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add reason-machines/trending-skills --skill vinext-vite-nextjs -a claude-code
Open on GitHub

What vinext-vite-nextjs does

This skill equips coding assistants with instructions for vinext. The plugin re-creates the public surface of Next.js on top of Vite, aiming for around 94% API coverage. It accommodates SSR, standard next/* imports, and both directory structures: pages/ and app/.

Migration avoids breaking current workflows: Next.js still functions alongside Vite. Simple setups read next.config.js directly without an extra config file. However, App Router setups strictly demand @vitejs/plugin-rsc and react-server-dom-webpack.

Cloud deployment targets Cloudflare Workers out of the box via vinext deploy. Other cloud providers connect using Nitro presets configured inside vite.config.ts.

What it helps with

  • switch an existing Next.js build over to Vite
  • deploy a Next.js application to Cloudflare Workers
  • verify code compatibility using vinext check
  • configure Vite for React Server Components

Example prompts for the agent

  • Help me transition this repository from Next.js to Vite using vinext
  • Set up Cloudflare Workers deployment for our Next.js frontend
  • Inspect this codebase for vinext compatibility and generate a Vite config

How to install vinext-vite-nextjs

1Skills CLI (Vercel)

npx skills add reason-machines/trending-skills --skill vinext-vite-nextjs -a claude-code

2Manually: put the files in place

~/.claude/skills/vinext-vite-nextjs/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/vinext-vite-nextjs/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about vinext-vite-nextjs

How do I install vinext-vite-nextjs in Claude Code?

Run npx skills add reason-machines/trending-skills --skill vinext-vite-nextjs -a claude-code. The skill file will be created at ~/.claude/skills/vinext-vite-nextjs/SKILL.md.

What does vinext-vite-nextjs do?

It instructs AI coding tools on migrating Next.js applications to Vite via the vinext plugin. The setup preserves routing, server components, and public Next.js APIs.

Does running vinext migration break standard Next.js builds?

No, the migration process is non-destructive. Next.js remains fully functional alongside Vite because the initialization only adds complementary scripts and dependencies.

Similar skills

Everything for Frontend and UI →
frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. 1,025,790installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. CX Codex +1 678,700installs prototype Matt Pocock Creates throwaway prototypes for checking state logic or exploring UI before committing the decision to the main codebase. 986,201installs hyperframes heygen-com Instructs coding agents on creating, validating, and rendering HTML-based videos using the HyperFrames framework and CLI. CX Codex +1 1,200,000installs hyperframes-cli heygen-com Controls HyperFrames video workflows from the CLI: audits layouts and contrast, edits timeline clips, captures snapshots, and renders locally or in cloud runtimes. CX Codex +1 1,300,000installs webapp-testing official anthropics This skill tests local web apps with Playwright, helping agents debug UI behavior, capture screenshots, and inspect browser logs. 186,758installs

From the same set49

daily-stock-analysis Automates stock analysis across US, Hong Kong, and Chinese markets using LLMs. It calculates entry targets, stop-losses, and delivers reports via chat webhooks. CX Codex +1 2,000installs deepseek-ocr Teaches your coding agent to run DeepSeek-OCR for document parsing and markdown extraction. Works with images and PDFs via vLLM or Transformers. CX Codex +1 1,600installs paperclip-ai-orchestration Teaches coding assistants to manage Paperclip, an open-source platform that runs autonomous AI agents with org charts, task tickets, and budget caps. CX Codex +1 1,500installs lightpanda-browser A skill that teaches your agent to run Lightpanda: install the Zig headless browser, start a CDP server, and hook Playwright or Puppeteer to it. CX Codex +1 1,500installs minecraftconsoles-lce This skill guides you through compiling, running, and modding the C++ Minecraft Legacy Console Edition project. It covers CMake builds, dedicated servers, and controls setup. CX Codex +1 1,400installs open-autoglm-phone-agent A skill for Open-AutoGLM that walks your coding agent through deploying the model and driving Android, HarmonyOS NEXT or iOS devices. CX Codex +1 1,400installs voicebox-voice-synthesis Tells your agent how to run Voicebox and talk to its REST API on localhost:17493: speech generation, voice profiles, effects, queue. CX Codex +1 1,400installs edict-multi-agent-orchestration Orchestrates 12 specialized AI agents through an OpenClaw pipeline with quality gates, per-agent model configs, and a React kanban board. CX Codex +1 1,400installs

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor