visant-skills-public

# visant-skills-public

Gives Claude Code skills for deciding interface, motion and copy, auditing a screen for generic AI design before a pull request, and cutting video. For front-end developers and designers.

Made by pedrojaques99 on GitHub. These notes are Mindket's, written from its README; the project's own files and license are in its repository.

## About

What it is: visant-skills-public is a set of Claude Code skills from Visant. Their topics are interface, motion and copy decisions, checking a screen before it goes into a pull request, and video editing. Each skill first checks what your repo already has, such as gates, primitives and tokens, and only then acts. The checks are real scripts, and npm test runs every rule against fixtures both ways.

Who it suits: It suits front-end developers and designers who use Claude Code and want interface, motion and copy work held to clear rules.

```table
Industry | Who uses it | How they use it | Example
Software products | Front-end developers | Audit a screen before the pull request | Scan a pricing card and get findings on palette classes, copy tics and visual noise
Product design | Designers who work in code | Decide each interface element by the business variable it moves | An element that moves no business variable gets removed
Marketing | Writers of product copy | Lint copy for signs it was written by AI | Catch an em dash or a hype word in landing page text
Video production | Editors of product demos | Cut footage of a recorded website | Turn a recorded website into a rough cut for Premiere
```

Teams with no web front end can skip it, and so can anyone who does not use agent skills.

Where to use it: Claude Code is the only agent it was tested on. Support depends on the type of project.

- Claude Code, where the skills load when your request matches
- React and Next projects with .tsx and .jsx files, where every tool works
- Vue, Svelte, Astro and HTML projects, for the judgment skills, the open-screen scans and copy-lint
- Other agents that read SKILL.md, which may work but are untested

```table
Use case | Who | What they get back
Anti-slop audit | A front-end developer | Findings by gate with file and line, then a judged score
Motion tuning | A developer | Easing and duration tokens for CSS and framer-motion
Metrics and charts | A developer | Charts, gauges, sparklines, sliders and metric tiles that share one structure
Portuguese copy | A writer | Brazilian Portuguese copy in a spoken voice, checked by copy-lint
```

How to set it up: You need Claude Code and, for most skills, Node.js 20 or newer.

- Claude Code
- Node.js 20 or newer, for every skill except visant-frontend
- Optional: Playwright for screen checks, and axe-core for target size and name checks

1. Run the first command below to pick skills from a list.
2. To add one skill, run the second command. To add the interface set, run the third.
3. You can also place a skill's folder in the ~/.claude/skills/ directory yourself.

```bash
npx skills add pedrojaques99/visant-skills-public                       # pick from the list
npx skills add pedrojaques99/visant-skills-public --skill visant-killer # just one
npx skills add pedrojaques99/visant-skills-public --skill visant-design visant-killer visant-frontend visant-motion visant-refine visant-copy # the interface set
```

How to use it: Ask Claude Code in English or Portuguese. These requests all work, and the second one means it looks like AI made it.

```text
audit this screen
tá com cara de IA
make this smoother
edit this lesson
```

The audit skill also runs from a terminal against a source folder, using the command below.

```bash
node visant-killer/scripts/killer-scan.mjs demo/src
```

```table
Tool | What it does
visant-design | The place to start. It reads your request and loads the right playbook
visant-killer | Audits a UI for generic AI design. Detectors act as a hard gate, then a counter-argument pass and a score follow
visant-frontend | Guides interface decisions. An element stays only if it names the business variable it moves
visant-motion | Gives easing and duration tokens for CSS and framer-motion, plus motion-lint and measurement from a URL
visant-refine | Covers metric tiles, gauges, charts, sparklines and sliders, all built on one common anatomy
visant-copy | Writes Brazilian Portuguese copy in a conversational voice, and copy-lint flags AI giveaways in Portuguese and English text
```

Example: You open a React project and say audit this screen. On the sample pricing card, the scan runs four gates and flags a Tailwind palette class that bypasses the project's tokens. It also flags an em dash and a hype word in the copy, an italic word in the headline, and a tightly spaced display serif. After that the skill loads the screen in a browser, challenges its own conclusion and gives a score.

For newcomers and experts: A skill is a folder of instructions that Claude Code loads when your request fits. These ones guide and check interface work. A good first try is to install the set, open a React or Next screen and ask Claude Code to audit it.

The detector scripts form a gate. A confirmed finding counts as a defect, not a taste call, so the agent lists it and asks before editing. The code detectors refuse non-React projects with exit code 2, so they never report a zero they did not read. The author calibrated the detectors on three public Next.js projects until what remained was defensible.

```flow
You ask Claude Code to audit a screen
The skill finds your repo's gates and tokens
Detector scripts scan the code and run the gates
The skill judges what detectors miss and scores it
It lists findings and asks before editing
```

Good to know:

- It was tested on Claude Code only, and other agents that read SKILL.md are untested
- The killer scan and the code detectors refuse Vue, Svelte, Astro and HTML projects with exit code 2
- Most skills need Node.js 20 or newer, and visant-frontend needs nothing
- Playwright and axe-core are optional extras for screen checks
- Commands in the skill docs use a skill-dir placeholder for the folder that holds SKILL.md
- The copy skill targets Brazilian Portuguese, and copy-lint also checks English

## On GitHub, 7 November 2026

- Stars: 84
- Forks: 2
- Open issues and pull requests: 1
- Language: JavaScript
- License: MIT
- Topics: claude-code, claude-skills, design-system, ui-audit

## Links

- Code: https://github.com/pedrojaques99/visant-skills-public
- Releases: https://github.com/pedrojaques99/visant-skills-public/releases
- Issues: https://github.com/pedrojaques99/visant-skills-public/issues
- Star history: https://www.star-history.com/#pedrojaques99/visant-skills-public&Date

## Get the code

```
git clone https://github.com/pedrojaques99/visant-skills-public.git
```

Then follow the setup in its README. Nothing in this kit runs by itself.

README.md  7 KB