Handsontable Visual Test Demos
handsontable/handsontable
Explains how to add or change the demo pages that Handsontable's visual regression suite photographs, including per-feature routes in the js demo and the shared grid.
Vite integration for Editframe development with local video transcoding, asset serving, file API endpoints, and visual regression testing.
Install Vite Plugin
$ npx skills add shadcn-labs/framecn --skill vite-plugin -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install shadcn-labs/framecn vite-plugin --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/shadcn-labs/framecn.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/vite-plugin .claude/skills/vite-plugin && 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-plugin" agent skill from https://github.com/shadcn-labs/framecn/tree/main/.agents/skills/vite-plugin into .claude/skills/vite-plugin/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "vite-plugin", 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/shadcn-labs/framecn/tree/main/.agents/skills/vite-pluginType 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 shadcn-labs/framecn --skill vite-plugin -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install shadcn-labs/framecn vite-plugin --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/shadcn-labs/framecn.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.agents/skills/vite-plugin .agents/skills/vite-plugin && 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-plugin" agent skill from https://github.com/shadcn-labs/framecn/tree/main/.agents/skills/vite-plugin into .agents/skills/vite-plugin/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "vite-plugin", 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 shadcn-labs/framecn --skill vite-plugin -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install shadcn-labs/framecn vite-plugin --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/shadcn-labs/framecn.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.agents/skills/vite-plugin .cursor/skills/vite-plugin && 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-plugin" agent skill from https://github.com/shadcn-labs/framecn/tree/main/.agents/skills/vite-plugin into .cursor/skills/vite-plugin/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "vite-plugin", 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/shadcn-labs/framecn.git --path .agents/skills/vite-plugin--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 shadcn-labs/framecn --skill vite-plugin -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install shadcn-labs/framecn vite-plugin --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/shadcn-labs/framecn.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.agents/skills/vite-plugin .gemini/skills/vite-plugin && 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-plugin" agent skill from https://github.com/shadcn-labs/framecn/tree/main/.agents/skills/vite-plugin into .gemini/skills/vite-plugin/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "vite-plugin", 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 shadcn-labs/framecn vite-pluginInstalls 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 shadcn-labs/framecn --skill vite-plugin -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/shadcn-labs/framecn.git skills-src && mkdir -p .github/skills && cp -r skills-src/.agents/skills/vite-plugin .github/skills/vite-plugin && 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-plugin" agent skill from https://github.com/shadcn-labs/framecn/tree/main/.agents/skills/vite-plugin into .github/skills/vite-plugin/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "vite-plugin", 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 shadcn-labs/framecn --skill vite-plugin -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install shadcn-labs/framecn vite-plugin --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/shadcn-labs/framecn.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.agents/skills/vite-plugin .opencode/skills/vite-plugin && 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-plugin" agent skill from https://github.com/shadcn-labs/framecn/tree/main/.agents/skills/vite-plugin into .opencode/skills/vite-plugin/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "vite-plugin", 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-plugin- GitHub stars
- 150
- Token cost
- ~350 tokens
- SKILL.md length
- 86 words
- Files
- 6 (incl. references)
- Skills in repo
- 8
- Repo updated
- First seen
- Licence
- Proprietary
At a glance
Vite integration for Editframe development with local video transcoding, asset serving, file API endpoints, and visual regression testing.
- Tasks that involve Visual regression testing
- SKILL.md covers Features, Installation and Configuration
- Calls npm
- Tasks that involve REST APIs
What it does
Vite Plugin is an agent skill from shadcn-labs/framecn. Vite integration for Editframe development with local video transcoding, asset serving, file API endpoints, and visual regression testing.
Its SKILL.md is about 350 tokens, which your agent loads only when the skill is triggered. The skill folder holds 6 other files, including reference files (for example `references/file-api.md`, `references/getting-started.md` and `references/jit-transcoding.md`).
It sits in Testing & QA, covering Visual regression testing and REST APIs. It works with Vite. The repository describes itself as: Beautiful video components, built on Editframe. 100% Free, Zero config, one command setup.
When your agent uses it
- Tasks that involve Visual regression testing
- Tasks that involve REST APIs
Example prompts
- “/vite-plugin”
Requirements
- Node.js
What it can do on your machine
Read from SKILL.md and the folder at commit 7717708. 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:
npm
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md. Its commands use 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 Plugin loads about 350 tokens when it runs, and up to ~4k if it reads all its reference files. Until then it costs about 38 tokens; SKILL.md has 86 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 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
Its licence (Proprietary) doesn't allow us to republish the file, so here is its outline and opening line. It has 86 words (~350 tokens).
“The @editframe/vite-plugin adds local development capabilities to your Vite project. It handles on-demand video transcoding, local asset serving, and visual regression testing so you can develop Editframe compositions without cloud API dependencies.”
- name
- vite-plugin
- license
- PROPRIETARY
- metadata.package
- @editframe/vite-plugin
- metadata.version
- 0.37.3-beta
- metadata.type
- vite-plugin
Files
SKILL.md and 5 other files (references) in .agents/skills/vite-plugin of shadcn-labs/framecn.
- SKILL.md
- references/file-api.md
- references/getting-started.md
- references/jit-transcoding.md
- references/local-assets.md
- references/visual-testing.md
Open the folder on GitHubat commit 7717708
Compare with similar skills
Vite Plugin 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 Plugin this skillshadcn-labs/framecn | 150 | — | ~350 | Automated safety check: Pass | Proprietary | |
| Handsontable Visual Test Demoshandsontable/handsontable | 22k | — | ~1.3k | Automated safety check: Pass | Custom licence | |
| Desktop App Driving with Reticlereticlehq/reticle | 1.2k | — | ~1.3k | Automated safety check: Pass | Apache-2.0 | |
| Shadmin CLIahaodev/shadmin | 174 | — | ~1.1k | Automated safety check: Notes | MIT | |
| Projectlin-97/gi-demo | 188 | — | ~1.4k | Automated safety check: Notes | Apache-2.0 | |
| Claimable Postgressickn33/agentic-awesome-skills | 47k | 1 repos | ~3.2k | Automated safety check: Notes | Apache-2.0 |
Similar skills
Desktop App Driving with Reticle
reticlehq/reticle
Drives and verifies Electron or Tauri desktop apps through Reticle, which sees the renderer and the IPC calls that a browser-based testing tool cannot observe.
Shadmin CLI
ahaodev/shadmin
A skill your agent uses when the user asks to query Shadmin admin platform resources (users, roles, menus, registered API resources) from a terminal — for example "list shadmin users", "show shadmin…
Project
lin-97/gi-demo
后台管理模板的项目总览与前端强制规范。涵盖 Vue 3 + Arco Design + Gi 组件库、目录结构、自动导入、CRUD/API 约定与代码风格。在当前仓库内开发、新增页面、查阅架构或不确定项目规范时使用。
Claimable Postgres
sickn33/agentic-awesome-skills
Provision instant temporary Postgres databases via Claimable Postgres by Neon (neon.new) with no login, signup, or credit card.
Figma To Static
LeoYeAI/openclaw-master-skills
Convert Figma design files to pixel-level mobile-first static HTML/CSS pages.
More from shadcn-labs/framecn
All 8 skills in this repoLaunch Shadcn Registry
shadcn-labs/framecn
Launch and promote a custom shadcn/ui registry end-to-end: validate registry.json, prepare the official shadcn-ui/ui directory PR, community directory PRs (registry.directory, shadcntemplates…
Composition
shadcn-labs/framecn
Create video compositions with Editframe using HTML web components or React.
Editframe API
shadcn-labs/framecn
JavaScript/TypeScript SDK for Editframe's video rendering API.
Editor Gui
shadcn-labs/framecn
Build video editing interfaces with Editframe's GUI components.
Webhooks
shadcn-labs/framecn
Webhook notifications for render completion and file processing events.
Editframe CLI
shadcn-labs/framecn
Command-line tools for Editframe video development. An agent skill from shadcn-labs/framecn.
Related
Works with
Categories
Questions about Vite Plugin
What does Vite Plugin do?
Vite integration for Editframe development with local video transcoding, asset serving, file API endpoints, and visual regression testing. Vite Plugin is an agent skill from shadcn-labs/framecn. Vite integration for Editframe development with local video transcoding, asset serving, file API endpoints, and visual regression testing.
When should I use Vite Plugin?
Vite Plugin fits situations like: tasks that involve Visual regression testing; tasks that involve REST APIs.
How do I install Vite Plugin in Claude Code?
Run `npx skills add shadcn-labs/framecn --skill vite-plugin -a claude-code`. Or copy the skill folder (.agents/skills/vite-plugin in shadcn-labs/framecn) into .claude/skills/vite-plugin in your project. Claude Code loads it when a task matches its description.
How do I install Vite Plugin in Codex?
Run `npx skills add shadcn-labs/framecn --skill vite-plugin -a codex`. Or copy the skill folder (.agents/skills/vite-plugin in shadcn-labs/framecn) into .agents/skills/vite-plugin in your project. Codex loads it when a task matches its description.
Can I use Vite Plugin 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 shadcn-labs/framecn --skill vite-plugin -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-plugin, .gemini/skills/vite-plugin, .github/skills/vite-plugin and .opencode/skills/vite-plugin in your project.
What does Vite Plugin need to run?
Going by SKILL.md and its folder, Vite Plugin needs the command-line tools its instructions call (npm). Our summary lists: Node.js.
Does Vite Plugin 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 Plugin 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 Plugin use?
Vite Plugin carries a proprietary licence (declared in SKILL.md). It is published on GitHub, but it is not open source: read the licence file before using or sharing it.
How many tokens does Vite Plugin use?
About 350 tokens (SKILL.md is roughly 1.4k 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 3.6k tokens, read only when the agent opens those files.
What are the alternatives to Vite Plugin?
Skills that share tags, products or a category with Vite Plugin: Handsontable Visual Test Demos (handsontable/handsontable, 22k stars), Desktop App Driving with Reticle (reticlehq/reticle, 1.2k stars), Shadmin CLI (ahaodev/shadmin, 174 stars) and Project (lin-97/gi-demo, 188 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Vite Plugin?
shadcn-labs (a GitHub organization) maintains it in shadcn-labs/framecn, which has 150 GitHub stars. The repository holds 8 skills in this directory. The repository was last updated on October 7, 2026.
Source: shadcn-labs/framecn on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.