Common Web Visual Testing
HoangNguyen0403/agent-skills-standard
Standardizes visual audits, responsive design, and behavioral testing for web apps.
Operate Vite projects: inspect versions and configuration, run bounded development and production builds, diagnose dependency and asset failures, and configure environment-aware frontend delivery.
Install Vite
$ npx skills add magnus919/agent-skills --skill vite -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install magnus919/agent-skills vite --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/magnus919/agent-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/vite .claude/skills/vite && rm -rf skills-srcUse ~/.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/
Install the "vite" agent skill from https://github.com/magnus919/agent-skills/tree/main/vite into .claude/skills/vite/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "vite", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/magnus919/agent-skills/tree/main/viteType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add magnus919/agent-skills --skill vite -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install magnus919/agent-skills vite --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/magnus919/agent-skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/vite .agents/skills/vite && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "vite" agent skill from https://github.com/magnus919/agent-skills/tree/main/vite into .agents/skills/vite/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "vite", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add magnus919/agent-skills --skill vite -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install magnus919/agent-skills vite --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/magnus919/agent-skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/vite .cursor/skills/vite && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "vite" agent skill from https://github.com/magnus919/agent-skills/tree/main/vite into .cursor/skills/vite/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "vite", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/magnus919/agent-skills.git --path vite--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add magnus919/agent-skills --skill vite -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install magnus919/agent-skills vite --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/magnus919/agent-skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/vite .gemini/skills/vite && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "vite" agent skill from https://github.com/magnus919/agent-skills/tree/main/vite into .gemini/skills/vite/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "vite", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install magnus919/agent-skills viteInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add magnus919/agent-skills --skill vite -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/magnus919/agent-skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/vite .github/skills/vite && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "vite" agent skill from https://github.com/magnus919/agent-skills/tree/main/vite into .github/skills/vite/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "vite", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add magnus919/agent-skills --skill vite -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install magnus919/agent-skills vite --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/magnus919/agent-skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/vite .opencode/skills/vite && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "vite" agent skill from https://github.com/magnus919/agent-skills/tree/main/vite into .opencode/skills/vite/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "vite", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
vite- GitHub stars
- 116
- Token cost
- ~1.5k tokens
- SKILL.md length
- 600 words
- Files
- 8 (incl. scripts, references)
- Skills in repo
- 130
- Repo updated
- First seen
- Licence
- MIT
At a glance
Operate Vite projects: inspect versions and configuration, run bounded development and production builds, diagnose dependency and asset failures, and configure environment-aware frontend delivery.
- Works in 6 steps: Discover before changing. Read… → Check the actual toolchain. Run… → Keep configuration explicit. Review… → …
- A task names Vite
- SKILL.md covers Operating contract, Common workflow, Reference routing and Verification boundary, plus 1 more section
- Runs Python scripts from its folder; calls npm, pnpm and yarn
What it does
Vite is an agent skill from magnus919/agent-skills. Operate Vite projects: inspect versions and configuration, run bounded development and production builds, diagnose dependency and asset failures, and configure environment-aware frontend delivery. Use when a task names Vite, vite.config, Vite plugins, import.meta.env, dev-server behavior, or Vite build output. Do not use for frontend architecture or visual implementation (route to frontend-engineering), CI/platform provisioning (route to platform-engineering), browser automation (route to playwright), or…
Its SKILL.md is about 1.5k tokens, which your agent loads only when the skill is triggered. The skill folder holds 10 other files, including scripts and reference files (for example `README.md`, `evals/evals.json` and `references/build-and-deploy.md`). Compatibility notes: Requires Python 3.8+ for the bundled diagnostic script; Node.js and the project's package manager are required for Vite commands.
It sits in Frontend & Design, covering Frontend development, Platform engineering and Accessibility. It works with Vite and Playwright. The repository describes itself as: Curated collection of AI agent skills for Hermes and other agent frameworks. The licence is MIT.
When your agent uses it
- A task names Vite
- Import.meta.env
- Dev-server behavior
- Vite build output
Example prompts
- “/vite”
Requirements
- Python 3
- Node.js
- Compatibility (from SKILL.md): Requires Python 3.8+ for the bundled diagnostic script; Node.js and the project's package manager are required for Vite commands.
Workflow steps
6 steps, taken from the first numbered list in SKILL.md.
- Discover before changing. Read package.json, lockfile, vite.config.*, tsconfig*.json, scripts, framework plugin, and deployment…
- Check the actual toolchain. Run scripts/vite-doctor --json from this skill or the project root to capture Node, package-manager, Vite…
- Keep configuration explicit. Review root, base, resolve.alias, plugins, server.host/port, preview, build.outDir, build.rollupOptions, and…
- Build before claiming success. Use the project's existing script (normally npm run build, pnpm build, yarn build, or bun run build) with a…
- Treat mutations as gated. Read-only discovery may proceed. Before installing packages, editing config, deleting output, starting a server…
- Keep evidence bounded. Summarize logs and errors; do not paste .env contents, tokens, full bundles, or generated dependency trees.
What it can do on your machine
Read from SKILL.md and the folder at commit c545c2b. 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
Ships 2 files in scripts/ (Python), which the agent can run.
Shell commands in SKILL.md call:
npmpnpmyarnbun
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md. Its commands use npm, pnpm and yarn, 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.
Compatibility
Requires Python 3.8+ for the bundled diagnostic script; Node.js and the project's package manager are required for Vite commands.
From compatibility in the SKILL.md frontmatter.
Context cost
Vite loads about 1.5k tokens when it runs, and up to ~3.3k if it reads all its reference files. Until then it costs about 141 tokens; SKILL.md has 600 words of instructions outside code blocks.
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: notes
The automated check noted patterns worth knowing about, such as sudo or a known installer.
- NoteMentions a .env fileSKILL.md:29
Summarize logs and errors; do not paste `.env` contents, tokens, full bundles, or generated dependency trees. - NoteMentions a .env fileSKILL.md:35
- **Environment issue:** distinguish `.env`, `.env.local`, mode-specific files, and process environment. Only variables
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); the scripts in this folder are not scanned.
SKILL.md
The full file from magnus919/agent-skills at commit c545c2b, republished under its MIT licence (© magnus919). 600 words, ~1,462 tokens.
Download SKILL.mdSave it as
.claude/skills/vite/SKILL.md (or your agent's skills folder). This skill also uses 7 other files; get the full folder from GitHub.- name
- vite
- description
- Operate Vite projects: inspect versions and configuration, run bounded development and production builds, diagnose dependency and asset failures, and configure environment-aware frontend delivery. Use when a task names Vite, vite.config, Vite plugins, import.meta.env, dev-server behavior, or Vite build output. Do not use for frontend architecture or visual implementation (route to frontend-engineering), CI/platform provisioning (route to platform-engineering), browser automation (route to playwright), or accessibility design (route to web-accessibility).
- compatibility
- Requires Python 3.8+ for the bundled diagnostic script; Node.js and the project's package manager are required for Vite commands.
- license
- MIT
- metadata.source
- https://vite.dev/guide/
- metadata.spec
- https://vite.dev/config/
Vite Operations
Use this skill for the Vite toolchain itself: project discovery, config and plugin behavior, environment loading, dev-server diagnostics, production builds, and asset/deployment boundaries. Keep application architecture and UI implementation with frontend-engineering, infrastructure and CI design with platform-engineering, browser tests with playwright, and accessibility implementation/review with web-accessibility.
Operating contract
- Discover before changing. Read
package.json, lockfile,vite.config.*,tsconfig*.json, scripts, framework plugin, and deployment assumptions. Identify the package manager from the lockfile; do not invent a command. - Check the actual toolchain. Run
scripts/vite-doctor --jsonfrom this skill or the project root to capture Node, package-manager, Vite package, config, and environment evidence. A Vite version in documentation is not proof of the installed version. - Keep configuration explicit. Review
root,base,resolve.alias, plugins,server.host/port,preview,build.outDir,build.rollupOptions, anddefine. Treatdefineandimport.meta.envas compile-time/public data; never place secrets inVITE_*variables or client bundles. - Build before claiming success. Use the project's existing script (normally
npm run build,pnpm build,yarn build, orbun run build) with a bounded timeout. Inspect output files and warnings, then exercise the built app at its deployed base path when possible. - Treat mutations as gated. Read-only discovery may proceed. Before installing packages, editing config, deleting output, starting a server, or changing deployment settings, confirm the target, scope, and rollback path. Prefer a new output directory or version-controlled change and never overwrite a user's uncommitted work.
- Keep evidence bounded. Summarize logs and errors; do not paste
.envcontents, tokens, full bundles, or generated dependency trees.
Common workflow
- New project or migration: verify Node and package manager, inspect the existing app entry point, choose the framework plugin, preserve the lockfile, and use the official Vite scaffold only when the target directory is empty or explicitly approved.
- Config change: make the smallest change, explain why
baseand asset paths remain correct, and run a production build. Config files are executable code; do not load arbitrary config values intodefine. - Environment issue: distinguish
.env,.env.local, mode-specific files, and process environment. Only variables prefixedVITE_are exposed by default; restart the dev server after changes. Validate required values without printing their values. - Dev-server issue: check port/host/proxy and whether the request is same-origin. A server reachable from another device may require an explicit host and network policy review; do not expose it casually.
- Build issue: capture the first actionable error, check plugin and Node/Vite compatibility, clear only reproducible caches after approval, and rerun the smallest failing command. Do not paper over a module-resolution failure with broad alias changes.
- Deployment issue: confirm
base, SPA fallback, static asset caching, and the hosting platform's output directory. A successful build does not prove deep links or client routing work.
Show full SKILL.md (152 more words)Show less
Reference routing
| Load when | Reference |
|---|---|
| Config, plugins, modes, env variables, aliases, or public assets | references/config-and-environments.md |
| Build output, dependency failures, performance, or deployment | references/build-and-deploy.md |
| Dev server, proxy, preview, diagnostics, or safe operations | references/dev-server-and-diagnostics.md |
Verification boundary
A Vite task is complete when the requested config or artifact exists, the relevant command exits successfully, and the boundary is checked: build output for builds, a reachable route and assets for deployment, and user-visible browser behavior through playwright for E2E claims. State any untested browser, host, mode, or deployment assumption explicitly.
When not to use
- Frontend component architecture, state, responsive UI, or general web implementation: frontend-engineering.
- Infrastructure, CI runners, containers, hosting topology, or release policy: platform-engineering.
- Authoring or operating browser automation: playwright.
- WCAG audits, accessible interaction design, or semantic accessibility remediation: web-accessibility.
- Rollup internals or a non-Vite bundler migration: use the relevant tool or methodology skill; Vite-specific behavior may still be consulted for an existing Vite project.
© magnus919, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 7 other files (scripts, references) in vite of magnus919/agent-skills.
- SKILL.md
- README.md
- evals/evals.json
- references/build-and-deploy.md
- references/config-and-environments.md
- references/dev-server-and-diagnostics.md
- scripts/test_vite_doctor.py
- scripts/vite-doctor
Open the folder on GitHubat commit c545c2b
Compare with similar skills
Vite 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.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Vite this skillmagnus919/agent-skills | 116 | — | ~1.5k | Automated safety check: Notes | MIT | |
| Common Web Visual TestingHoangNguyen0403/agent-skills-standard | 571 | — | ~760 | Automated safety check: Pass | MIT | |
| Bdgszymdzum/browser-debugger-cli | 170 | — | ~2.4k | Automated safety check: Notes | MIT | |
| UI Visual DebuggingNangoHQ/nango | 13k | — | ~1.3k | Automated safety check: Pass | Custom licence | |
| Scout UI Testingelastic/kibana | 21k | — | ~3.1k | Automated safety check: Pass | Custom licence | |
| Liteyuki Webui FrontendLiteyukiStudio/LiteyukiBot | 157 | — | ~2.5k | Automated safety check: Pass | Custom licence |
Similar skills
Bdg
szymdzum/browser-debugger-cli
Use bdg CLI to drive and debug a real Chrome via Chrome DevTools Protocol - navigate, click, fill and submit forms, check what an action changed (navigation, new messages, pending requests), inspect…
UI Visual Debugging
NangoHQ/nango
A skill your agent uses when modifying or visually debugging Nango frontend UI, including packages/webapp, packages/connect-ui, browser interactions, screenshots, and visual regressions.
- Official
Scout UI Testing
elastic/kibana
A skill your agent uses when creating, updating, debugging, or reviewing Scout UI tests in Kibana (Playwright + Scout fixtures), including page objects, browser authentication, parallel UI tests…
Liteyuki Webui Frontend
LiteyukiStudio/LiteyukiBot
Build, review, or test LiteyukiBot v7's React/Vite WebUI under webui/ and its packaged static delivery in packages/webui/.
Verify Debbie Codes
debs-obrien/debbie.codes
Drive the live debbie.codes Nuxt site (web UI) the way a user does via Playwright — launch the dev server, doctor health, exercise mapped features, capture screenshots/ARIA evidence, and clean up.
More from magnus919/agent-skills
All 130 skills in this repoArtifact Pyramids
magnus919/agent-skills
Organize durable agent research outputs as summaries, analysis, and evidence dossiers.
Ascii City Engine
magnus919/agent-skills
Build portable, first-person colored ASCII city engines and small GIS-derived city packs.
Color Management
magnus919/agent-skills
Manage color workflows with ICC profiles, working spaces, gamut mapping, and color science.
Data Scientist
magnus919/agent-skills
A skill your agent uses for PhD-level expertise in data science, statistics, and machine learning: rigorous statistical analysis, experimental design, causal inference, advanced modeling, research…
Docker Compose
magnus919/agent-skills
Use Docker Compose to define, run, debug, and harden multi-container applications.
Fpga Development
magnus919/agent-skills
Design, review, simulate, and verify FPGA logic using explicit RTL contracts, clock and reset models, CDC analysis, timing constraints, and reproducible implementation evidence.
Related
Works with
Questions about Vite
What does Vite do?
Operate Vite projects: inspect versions and configuration, run bounded development and production builds, diagnose dependency and asset failures, and configure environment-aware frontend delivery. Vite is an agent skill from magnus919/agent-skills. Operate Vite projects: inspect versions and configuration, run bounded development and production builds, diagnose dependency and asset failures, and configure environment-aware frontend delivery.
When should I use Vite?
Vite fits situations like: A task names Vite; import.meta.env; dev-server behavior; vite build output.
How do I install Vite in Claude Code?
Run `npx skills add magnus919/agent-skills --skill vite -a claude-code`. Or copy the skill folder (vite in magnus919/agent-skills) into .claude/skills/vite in your project. Claude Code loads it when a task matches its description.
How do I install Vite in Codex?
Run `npx skills add magnus919/agent-skills --skill vite -a codex`. Or copy the skill folder (vite in magnus919/agent-skills) into .agents/skills/vite in your project. Codex loads it when a task matches its description.
Can I use Vite 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 magnus919/agent-skills --skill vite -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, .gemini/skills/vite, .github/skills/vite and .opencode/skills/vite in your project.
What does Vite need to run?
Going by SKILL.md and its folder, Vite needs Python for the scripts in its folder and the command-line tools its instructions call (npm, pnpm, yarn and bun). Our summary lists: Python 3; Node.js. Compatibility (from SKILL.md): Requires Python 3.8+ for the bundled diagnostic script; Node.js and the project's package manager are required for Vite commands..
Does Vite access the network?
SKILL.md contains no URLs. Its commands use npm, which can reach the network depending on how they are called. This is read from the text; nothing was executed.
Is Vite safe to install?
Our automated static check of SKILL.md found notes only (mentions a .env file), nothing it rates as a warning. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.
What licence does Vite use?
Vite is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Vite use?
About 1.5k tokens (SKILL.md is roughly 5.8k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 1.8k tokens, read only when the agent opens those files.
What are the alternatives to Vite?
Skills that share tags, products or a category with Vite: Common Web Visual Testing (HoangNguyen0403/agent-skills-standard, 571 stars), Bdg (szymdzum/browser-debugger-cli, 170 stars), UI Visual Debugging (NangoHQ/nango, 13k stars) and Scout UI Testing (elastic/kibana, 21k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Vite?
magnus919 (a GitHub user) maintains it in magnus919/agent-skills, which has 116 GitHub stars. The repository holds 130 skills in this directory. The repository was last updated on October 8, 2026.
Source: magnus919/agent-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.