visant-skills-public
Visant skills for Claude Code: anti-AI-slop UI audit, design, motion and copy decisions, video editing and website showreels
- 89 ★ on the repository
- Last commit
- MIT
Extended access
Why this level
- The skills run Node and Python scripts, open pages in a browser and write files into the project, and site recording uses Chrome and ffmpeg.
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/visant-skills-publicDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- The skills run Node and Python scripts, open pages in a browser and write files into the project, and site recording uses Chrome and ffmpeg.
This is third-party code. Review the repository files before installing.
What it does
The repository gathers the Visant studio skills for interface, video and process. Each skill first discovers what the project repository already has: gates, primitives, tokens, and only then acts. The detectors are real scripts, and `npm test` proves each rule both ways against fixtures. The interface set: `visant-design` is the single entry point, `visant-killer` runs an anti-AI-slop audit with hard detectors and a score, `visant-frontend` makes every element name the business variable it moves, `visant-motion` defines animation tokens, `visant-refine` covers charts and metric tiles and `visant-copy` writes Brazilian Portuguese copy and checks it with the `copy-lint` linter. For video there are `site-reels` (records the best scenes of a site as 1080p MP4), `visant-premiere-editor` and `visant-video-editor`.
Who it is for. Frontend developers and designers who want to check a screen for template AI patterns before a pull request and drive interface decisions through Claude Code.
Good fit when
- Before a pull request a screen goes through `visant-killer`: palette, noise patterns, copy
- A project needs animation tokens and a `motion-lint` check of durations and easing
- Interface copy in Brazilian Portuguese is checked with the `copy-lint` linter
- The best scenes of a site are recorded to MP4 for a Remotion showreel
Not a fit when
- The project is not React or Next, since the `killer-scan` code detectors refuse Vue, Svelte and Astro code
- You want checks in Codex, Cursor or Gemini, while the set is tested on Claude Code only
- You need copy in another language, while `visant-copy` and `copy-lint` target Portuguese and English
Example request
Audit this screen with visant-killer and show findings on palette and noise patterns with no editsLimitations
The set is tested on Claude Code only. Other agents that read `SKILL.md` should work through the open format, but the author has not run them. The `killer-scan` code detectors handle React and Next (`.tsx`, `.jsx`) and on Vue, Svelte, Astro and HTML exit with code 2, never a false zero. Many skills need Node 20 or newer, video skills need Chrome or Edge, ffmpeg and Python, and the Premiere skill needs Premiere Pro with premiere-pro-mcp. The `visant-mcp-connect` skill requires a Visant Labs account.
How to disable. Delete the `visant-*` and `site-reels` folders from `~/.claude/skills` or the project skills directory. Recorded clips and reports the skills create live in your project, so delete them separately.
FAQ
How do I install the set?
Run `npx skills add pedrojaques99/visant-skills-public` and pick skills from the list. One skill installs with `--skill visant-killer`, or copy a skill folder into `~/.claude/skills/`.
Which skill should I start with?
With `visant-design`, which reads the ask and loads the right playbook. `visant-killer` fits screen audits and `visant-copy` fits copy.
What does visant-killer do?
It runs detectors as a hard gate, then judges what scripts cannot see, argues against its own verdict and scores the result. A detector finding counts as a defect.
Which requests trigger the skills?
Requests in English and Portuguese work, such as "audit this screen", "make this smoother" or "tá com cara de IA".
Do I need a separate design tool?
No, the skills use the tokens and primitives they find in the repository. The paired @visant/ui React component set connects through a shadcn registry and is optional.
Discussion
No questions or reviews yet.
Related
SkillsA skill for interfaces without the generic AI look: typography, color, motion, component states and a critique of the result.
A Codex skill: three distinct visual concepts, screenshot review and cutting excess, so interfaces look less templated.
Skills for design engineers: quick UI cleanup, accessibility, metadata and animation performance fixes
A UI, presentation and graphics design skill for coding agents: canvas drafts driven through the superdesign CLI
A design skill against templated AI interfaces: new pages, audits, redesigns and design extraction from a screenshot or URL
A skill for Claude Code and other agents that builds websites directed like films: art direction before code, local CLI asset generation and an anti-slop linter
README in short
The README lists skills by interface, video and process groups, gives a compatibility table for React, Vue, Svelte and Astro, a `killer-scan` sample, results from three public Next.js projects and the needs of each skill.