New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Vite Proxy Folder Name Conflict

by divinevideo in divinevideo/divine-mobile

Fix 404 errors for frontend JS files when using Vite proxy. An agent skill from divinevideo/divine-mobile.

MPL-2.0Auto-check passedFrontend & Design

Install Vite Proxy Folder Name Conflict

skills CLI
$ npx skills add divinevideo/divine-mobile --skill vite-proxy-folder-name-conflict -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install divinevideo/divine-mobile vite-proxy-folder-name-conflict --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/divinevideo/divine-mobile.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/vite-proxy-folder-name-conflict .claude/skills/vite-proxy-folder-name-conflict && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
vite-proxy-folder-name-conflict
GitHub stars
266
Token cost
~1.3k tokens
SKILL.md length
350 words
Files
1
Skills in repo
103
Repo updated
First seen
Licence
MPL-2.0

At a glance

Fix 404 errors for frontend JS files when using Vite proxy. An agent skill from divinevideo/divine-mobile.

  • Works in 3 steps: Vite dev server with proxy configuration… → Client-side folder with the same name as… → Imports that resolve to the proxied path
  • Browser shows Failed to load resource: 404 for JS/JSX files that exist on disk
  • SKILL.md covers Problem, Context / Trigger Conditions, Root Cause and Solution, plus 4 more sections
  • Calls curl and npm

What it does

Vite Proxy Folder Name Conflict is an agent skill from divinevideo/divine-mobile. Fix 404 errors for frontend JS files when using Vite proxy. Use when: (1) Browser shows "Failed to load resource: 404" for JS/JSX files that exist on disk, (2) Vite serves HTML instead of JavaScript for module imports, (3) You have a client folder named "api" (or similar) AND a Vite proxy configured for "/api". The proxy intercepts requests for client-side files when folder names match proxy paths. Applies to Vite, Vite+React, Vite+Vue projects with dev server proxy configuration.

Its SKILL.md is about 1.3k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Frontend & Design, covering React components. It works with Vite, JavaScript, React and Vue.js. The licence is MPL-2.0.

When your agent uses it

  • Browser shows Failed to load resource: 404 for JS/JSX files that exist on disk
  • Vite serves HTML instead of JavaScript for module imports
  • You have a client folder named api (or similar) AND a Vite proxy configured for /api

Example prompts

  • “Failed to load resource: 404”
  • “(or similar) AND a Vite proxy configured for”
  • “/vite-proxy-folder-name-conflict”

Workflow steps

3 steps, taken from the first numbered list in SKILL.md.

  1. Vite dev server with proxy configuration in vite.config.js
  2. Client-side folder with the same name as the proxy path
  3. Imports that resolve to the proxied path

What it can do on your machine

Read from SKILL.md and the folder at commit 6487b05. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • curl
    • npm

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use curl and npm, which can reach the network depending on how they are called.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Vite Proxy Folder Name Conflict loads about 1.3k tokens when it runs. Until then it costs about 129 tokens; SKILL.md has 350 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~129
When it runs · the whole SKILL.md, loaded when a task matches
~1.3k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from divinevideo/divine-mobile at commit 6487b05, republished under its MPL-2.0 licence (© divinevideo). 350 words, ~1,318 tokens.

Download SKILL.mdSave it as .claude/skills/vite-proxy-folder-name-conflict/SKILL.md (or your agent's skills folder).
name
vite-proxy-folder-name-conflict
description
Fix 404 errors for frontend JS files when using Vite proxy. Use when: (1) Browser shows "Failed to load resource: 404" for JS/JSX files that exist on disk, (2) Vite serves HTML instead of JavaScript for module imports, (3) You have a client folder named "api" (or similar) AND a Vite proxy configured for "/api". The proxy intercepts requests for client-side files when folder names match proxy paths. Applies to Vite, Vite+React, Vite+Vue projects with dev server proxy configuration.
author
Claude Code
version
1.0.0
date
2026-01-21

Vite Proxy Folder Name Conflict

Problem

Frontend JavaScript/JSX files return 404 errors even though they exist on disk. The browser console shows errors like:

usePeople.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
useMedia.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)

The files exist at paths like src/client/api/hooks/usePeople.js, but Vite returns 404 or serves HTML instead of JavaScript.

Context / Trigger Conditions

This issue occurs when ALL of these conditions are true:

  1. Vite dev server with proxy configuration in vite.config.js:

    javascript
    server: {
  proxy: {
    '/api': {
      target: 'http://localhost:3001',
      changeOrigin: true,
    },
  },
}

  2. Client-side folder with the same name as the proxy path:

    src/client/
├── api/           ← Folder name matches proxy path "/api"
│   ├── client.js
│   └── hooks/
│       ├── usePeople.js
│       └── useMedia.js

  3. Imports that resolve to the proxied path:

    javascript
    // In src/client/pages/Directory.jsx
import { usePeople } from '../api/hooks/usePeople.js';
// Vite transforms this to: /api/hooks/usePeople.js
// This matches the proxy rule and gets sent to backend!

Root Cause

Vite's module resolution transforms relative imports to absolute paths. When you import ../api/hooks/usePeople.js from a page, Vite resolves it to /api/hooks/usePeople.js.

The proxy configuration matches paths starting with /api and forwards them to the backend server. Since /api/hooks/usePeople.js starts with /api, it gets proxied to the backend instead of being served as a static file.

The backend doesn't have a route for /api/hooks/usePeople.js, so it returns 404.

Solution

Option 1: Rename the client folder (Recommended)

Rename the conflicting folder to something that won't match the proxy path:

bash
# Rename api to services (or lib, helpers, etc.)
mv src/client/api src/client/services

# Update all imports
find src/client -name "*.jsx" -o -name "*.js" | xargs sed -i '' 's|from.*['"'"'"]\.\.\/api|from "../services|g'

Option 2: Use a different proxy path

Change the proxy path to something more specific:

javascript
// vite.config.js
server: {
  proxy: {
    '/api/v1': {  // More specific path
      target: 'http://localhost:3001',
      changeOrigin: true,
    },
  },
}

Option 3: Configure proxy to exclude certain patterns

Use a custom function to exclude certain paths:

javascript
server: {
  proxy: {
    '/api': {
      target: 'http://localhost:3001',
      changeOrigin: true,
      bypass: (req) => {
        // Don't proxy requests for JS/TS files
        if (req.url.match(/\.(js|jsx|ts|tsx|mjs)$/)) {
          return req.url;
        }
      },
    },
  },
}
Show full SKILL.md (148 more words)Show less

Verification

After applying the fix:

  1. Clear Vite's cache: rm -rf node_modules/.vite
  2. Restart the dev server: npm run dev
  3. Check browser console - 404 errors should be gone
  4. Verify the app loads and API calls still work

Test both:

  • Frontend file serving: curl http://localhost:5173/services/hooks/usePeople.js should return JavaScript
  • API proxying: curl http://localhost:5173/api/people should return JSON from backend

Example

Before (broken):

src/client/
├── api/                    ← Conflicts with proxy
│   └── hooks/
│       └── usePeople.js
├── pages/
│   └── Directory.jsx       ← import from '../api/hooks/usePeople.js'

vite.config.js:
  proxy: { '/api': 'http://localhost:3001' }

Result: Browser gets 404 for usePeople.js

After (fixed):

src/client/
├── services/               ← Renamed to avoid conflict
│   └── hooks/
│       └── usePeople.js
├── pages/
│   └── Directory.jsx       ← import from '../services/hooks/usePeople.js'

vite.config.js:
  proxy: { '/api': 'http://localhost:3001' }  ← Unchanged

Result: Frontend files served correctly, API still proxied

Notes

  • This issue is not specific to React—it affects any Vite project with proxies
  • Common conflicting folder names: api, graphql, socket, ws
  • The issue only manifests in development (Vite dev server); production builds don't have this problem
  • If using TypeScript path aliases, ensure they also avoid proxy path conflicts
  • Always clear Vite's cache (node_modules/.vite) after changing folder structure
  • Similar issues can occur with other dev servers (webpack-dev-server, Create React App)
  • If using a monorepo, check proxy configs in both root and package-level configs

© divinevideo, MPL-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in .agents/skills/vite-proxy-folder-name-conflict of divinevideo/divine-mobile.

Open the folder on GitHubat commit 6487b05

Compare with similar skills

Vite Proxy Folder Name Conflict next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Vite Proxy Folder Name Conflict compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Vite Proxy Folder Name Conflict this skilldivinevideo/divine-mobile266—~1.3kAutomated safety check: PassMPL-2.0
Web Artifacts Builderanthropics/skills180k41 repos~769Automated safety check: PassApache-2.0
Tailwindcss Developmentanonaddy/anonaddy4.9k10 repos~865Automated safety check: PassMIT
React Router Developmentremix-run/react-router57k1 repos~1.5kAutomated safety check: PassMIT
GSAP Core Animationgreensock/gsap-skills16k4 repos~3.7kAutomated safety check: PassMIT
Chakra UI v3 Builderchakra-ui/chakra-ui41k—~3.1kAutomated safety check: PassMIT

Similar skills

  • Web Artifacts Builder

    anthropics/skills

    Official

    Builds multi-component claude.ai HTML artifacts as a small React, TypeScript and Tailwind project, then bundles it into one shareable HTML file.

    180k GitHub starsUsed in 41 repos~769 tokens
    Frontend & DesignAuto-check passed

  • Tailwindcss Development

    anonaddy/anonaddy

    Always invoke when the user's message includes 'tailwind' in any form.

    4.9k GitHub starsUsed in 10 repos~865 tokens
    Frontend & DesignAuto-check passed

  • React Router Development

    remix-run/react-router

    Guides work on React Router apps by first identifying whether the app uses Framework, Data or Declarative mode, then loading the matching reference and the installed package docs.

    57k GitHub starsUsed in 1 repo~1.5k tokens
    Frontend & DesignAuto-check passed

  • GSAP Core Animation

    greensock/gsap-skills

    Covers the GSAP core API for tweens, easing, staggers, defaults and matchMedia, and when to choose GSAP over CSS animations or other JavaScript animation libraries.

    16k GitHub starsUsed in 4 repos~3.7k tokens
    Frontend & DesignAuto-check passed

  • Chakra UI v3 Builder

    chakra-ui/chakra-ui

    Builds responsive, accessible Chakra UI v3 components and layouts, sets up Chakra in new or existing projects, and designs themes with tokens, semantic tokens and recipes.

    41k GitHub stars~3.1k tokensUpdated 3 days ago
    Frontend & DesignAuto-check passed

  • Creative Tim UI Blocks

    creativetimofficial/ui

    Helps install, generate and review Creative Tim UI blocks: shadcn/ui-based React and Tailwind sections that follow a restrained, production-minded design philosophy.

    12k GitHub stars~2.1k tokensUpdated 6 mo ago
    Frontend & DesignAuto-check: notes

More from divinevideo/divine-mobile

All 103 skills in this repo

  • Argocd Externalsecret Namespace Permission

    divinevideo/divine-mobile

    Fix ArgoCD ExternalSecret deployment failing with "namespace X is not permitted in project Y".

    266 GitHub stars~931 tokensUpdated today
    Auto-check passed

  • Art Direct

    divinevideo/divine-mobile

    Art direction for any content — reads text, PDF, Word, HTML, PPT, then proposes 2-3 creative directions with photography style, mood, and visual language.

    266 GitHub stars~4.8k tokensUpdated today
    Auto-check passed

  • Async Await Null Race Condition

    divinevideo/divine-mobile

    Fix "Null check operator used on a null value" errors when an object is set to null during an async await.

    266 GitHub stars~881 tokensUpdated today
    Auto-check passed

  • AWS V4 Signing Custom Headers Gcs

    divinevideo/divine-mobile

    Add custom metadata headers (x-amz-meta-) to AWS v4 signed requests for GCS S3-compatible API.

    266 GitHub stars~1k tokensUpdated today
    Auto-check passed

  • Bash Herestring Newline Secrets

    divinevideo/divine-mobile

    Fix password/secret authentication failures caused by trailing newlines when creating Google Cloud secrets (or similar) with bash here-strings.

    266 GitHub stars~791 tokensUpdated today
    Auto-check passed

  • Blossom Content Addressed URL Filtering

    divinevideo/divine-mobile

    Fix silent video/media processing failures caused by URL extraction code that filters on file extensions (.mp4, .webm, .webp).

    266 GitHub stars~1.1k tokensUpdated today
    Auto-check passed

Works with

Categories

Questions about Vite Proxy Folder Name Conflict

What does Vite Proxy Folder Name Conflict do?

Fix 404 errors for frontend JS files when using Vite proxy. An agent skill from divinevideo/divine-mobile. Vite Proxy Folder Name Conflict is an agent skill from divinevideo/divine-mobile. Fix 404 errors for frontend JS files when using Vite proxy.

When should I use Vite Proxy Folder Name Conflict?

Vite Proxy Folder Name Conflict fits situations like: browser shows Failed to load resource: 404 for JS/JSX files that exist on disk; vite serves HTML instead of JavaScript for module imports; you have a client folder named api (or similar) AND a Vite proxy configured for /api.

How do I install Vite Proxy Folder Name Conflict in Claude Code?

Run `npx skills add divinevideo/divine-mobile --skill vite-proxy-folder-name-conflict -a claude-code`. Or copy the skill folder (.agents/skills/vite-proxy-folder-name-conflict in divinevideo/divine-mobile) into .claude/skills/vite-proxy-folder-name-conflict in your project. Claude Code loads it when a task matches its description.

How do I install Vite Proxy Folder Name Conflict in Codex?

Run `npx skills add divinevideo/divine-mobile --skill vite-proxy-folder-name-conflict -a codex`. Or copy the skill folder (.agents/skills/vite-proxy-folder-name-conflict in divinevideo/divine-mobile) into .agents/skills/vite-proxy-folder-name-conflict in your project. Codex loads it when a task matches its description.

Can I use Vite Proxy Folder Name Conflict in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add divinevideo/divine-mobile --skill vite-proxy-folder-name-conflict -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/vite-proxy-folder-name-conflict, .gemini/skills/vite-proxy-folder-name-conflict, .github/skills/vite-proxy-folder-name-conflict and .opencode/skills/vite-proxy-folder-name-conflict in your project.

What does Vite Proxy Folder Name Conflict need to run?

Going by SKILL.md and its folder, Vite Proxy Folder Name Conflict needs the command-line tools its instructions call (curl and npm).

Does Vite Proxy Folder Name Conflict access the network?

SKILL.md contains no URLs. Its commands use curl and npm, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Vite Proxy Folder Name Conflict safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Vite Proxy Folder Name Conflict use?

Vite Proxy Folder Name Conflict is published under the MPL-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Vite Proxy Folder Name Conflict use?

About 1.3k tokens (SKILL.md is roughly 5.3k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Vite Proxy Folder Name Conflict?

Skills that share tags, products or a category with Vite Proxy Folder Name Conflict: Web Artifacts Builder (anthropics/skills, 180k stars), Tailwindcss Development (anonaddy/anonaddy, 4.9k stars), React Router Development (remix-run/react-router, 57k stars) and GSAP Core Animation (greensock/gsap-skills, 16k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Vite Proxy Folder Name Conflict?

divinevideo (a GitHub organization) maintains it in divinevideo/divine-mobile, which has 266 GitHub stars. The repository holds 103 skills in this directory. The repository was last updated on October 9, 2026.

Source: divinevideo/divine-mobile on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.