Quasar Skilld
skilld-dev/vue-ecosystem-skills
Build, configure, and debug apps with the Quasar framework (quasar npm package, v2.33.1).
Read before changing any component, page, or styles. An agent skill from igrlk/storybook-addon-test-codegen.
Install Making UI Changes
$ npx skills add igrlk/storybook-addon-test-codegen --skill making-ui-changes -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install igrlk/storybook-addon-test-codegen making-ui-changes --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/igrlk/storybook-addon-test-codegen.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/making-ui-changes .claude/skills/making-ui-changes && 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 "making-ui-changes" agent skill from https://github.com/igrlk/storybook-addon-test-codegen/tree/main/.agents/skills/making-ui-changes into .claude/skills/making-ui-changes/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "making-ui-changes", 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/igrlk/storybook-addon-test-codegen/tree/main/.agents/skills/making-ui-changesType 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 igrlk/storybook-addon-test-codegen --skill making-ui-changes -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install igrlk/storybook-addon-test-codegen making-ui-changes --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/igrlk/storybook-addon-test-codegen.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.agents/skills/making-ui-changes .agents/skills/making-ui-changes && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "making-ui-changes" agent skill from https://github.com/igrlk/storybook-addon-test-codegen/tree/main/.agents/skills/making-ui-changes into .agents/skills/making-ui-changes/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "making-ui-changes", 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 igrlk/storybook-addon-test-codegen --skill making-ui-changes -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install igrlk/storybook-addon-test-codegen making-ui-changes --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/igrlk/storybook-addon-test-codegen.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.agents/skills/making-ui-changes .cursor/skills/making-ui-changes && 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 "making-ui-changes" agent skill from https://github.com/igrlk/storybook-addon-test-codegen/tree/main/.agents/skills/making-ui-changes into .cursor/skills/making-ui-changes/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "making-ui-changes", 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/igrlk/storybook-addon-test-codegen.git --path .agents/skills/making-ui-changes--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 igrlk/storybook-addon-test-codegen --skill making-ui-changes -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install igrlk/storybook-addon-test-codegen making-ui-changes --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/igrlk/storybook-addon-test-codegen.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.agents/skills/making-ui-changes .gemini/skills/making-ui-changes && 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 "making-ui-changes" agent skill from https://github.com/igrlk/storybook-addon-test-codegen/tree/main/.agents/skills/making-ui-changes into .gemini/skills/making-ui-changes/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "making-ui-changes", 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 igrlk/storybook-addon-test-codegen making-ui-changesInstalls 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 igrlk/storybook-addon-test-codegen --skill making-ui-changes -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/igrlk/storybook-addon-test-codegen.git skills-src && mkdir -p .github/skills && cp -r skills-src/.agents/skills/making-ui-changes .github/skills/making-ui-changes && 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 "making-ui-changes" agent skill from https://github.com/igrlk/storybook-addon-test-codegen/tree/main/.agents/skills/making-ui-changes into .github/skills/making-ui-changes/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "making-ui-changes", 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 igrlk/storybook-addon-test-codegen --skill making-ui-changes -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install igrlk/storybook-addon-test-codegen making-ui-changes --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/igrlk/storybook-addon-test-codegen.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.agents/skills/making-ui-changes .opencode/skills/making-ui-changes && 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 "making-ui-changes" agent skill from https://github.com/igrlk/storybook-addon-test-codegen/tree/main/.agents/skills/making-ui-changes into .opencode/skills/making-ui-changes/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "making-ui-changes", 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
making-ui-changes- GitHub stars
- 154
- Used in
- 1 other repo
- Token cost
- ~493 tokens
- SKILL.md length
- 260 words
- Files
- 1
- Skills in repo
- 5
- Repo updated
- First seen
- Licence
- MIT
At a glance
Read before changing any component, page, or styles. An agent skill from igrlk/storybook-addon-test-codegen.
- Works in 5 steps: Reuse before you create → Cover every state, in the same change → Check the blast radius → …
- Frontend & Design work in your project
- SKILL.md covers 1. Reuse before you create, 2. Cover every state, in the…, 3. Check the blast radius and 4. Prove it with a visual test, plus 2 more sections
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
Making UI Changes is an agent skill from igrlk/storybook-addon-test-codegen. Read before changing any component, page, or styles. Five moves to change UI without silently breaking another screen - reuse before you create, cover every state, check the blast radius, prove it with a visual test, kill flake at the source.
Its SKILL.md is about 490 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. It works with Storybook. The repository describes itself as: Addon for Storybook that generates test code for your stories. The licence is MIT.
When your agent uses it
- Frontend & Design work in your project
Example prompts
- “/making-ui-changes”
Workflow steps
5 steps, taken from the step headings in SKILL.md.
What it can do on your machine
Read from SKILL.md and the folder at commit cdfbf4e. 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
No scripts in the folder and no shell commands in SKILL.md.
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
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
Making UI Changes loads about 493 tokens when it runs. Until then it costs about 65 tokens; SKILL.md has 260 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
The full file from igrlk/storybook-addon-test-codegen at commit cdfbf4e, republished under its MIT licence (© igrlk). 260 words, ~493 tokens.
Download SKILL.mdSave it as
.claude/skills/making-ui-changes/SKILL.md (or your agent's skills folder).- name
- making-ui-changes
- description
- Read before changing any component, page, or styles. Five moves to change UI without silently breaking another screen - reuse before you create, cover every state, check the blast radius, prove it with a visual test, kill flake at the source.
Making UI changes
Run these five moves on any UI change.
1. Reuse before you create
Search for an existing component and extend it (variant="danger", a new prop) instead of adding a near-copy. Two components that look the same drift apart. Build net-new only when nothing fits - then it goes through move 2.
2. Cover every state, in the same change
Every component or state you add or change owes a story/capture in the same change, never a follow-up. Don't hand-write one per combination - generate them densely (economical-visual-tests). No visual testing wired yet? setup-visual-testing first.
3. Check the blast radius
Editing a shared component changes every screen that imports it. Grep the importers, decide which ones this touches, and make sure each has a story/capture so the diff will catch it.
4. Prove it with a visual test
Not done until you've looked at what moved: check-visual-changes mid-edit, or the PR check + triage-visual-changes. A story that changed which your diff shouldn't touch is a stop-and-look (usually move 3), not an accept.
5. Kill flake at the source
A story that comes back changed with no real change (clock, live data, animation, randomness) is flake. Fix it at capture time (storybook-/playwright-/vitest-visual-testing) - don't accept it, don't disable the check.
Wire it in
Add to AGENTS.md and CLAUDE.md so this runs on every UI change (setup-visual-testing does this for you):
Before changing any component, page, or styles, read making-ui-changes: reuse before you create, add or update the story/capture in the same change, check the blast radius, and prove it with a visual test.
© igrlk, MIT. 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/making-ui-changes of igrlk/storybook-addon-test-codegen.
Open the folder on GitHubat commit cdfbf4e
Used in 1 other repository
We found 1 copy of this SKILL.md (exact, near-identical or edited) in other folders, from 1 other GitHub owner. This page covers the copy in igrlk/storybook-addon-test-codegen, which our catalogue first saw on October 7, 2026.
Compare with similar skills
Making UI Changes 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 |
|---|---|---|---|---|---|---|
| Making UI Changes this skilligrlk/storybook-addon-test-codegen | 154 | 1 repos | ~493 | Automated safety check: Pass | MIT | |
| Quasar Skilldskilld-dev/vue-ecosystem-skills | 181 | — | ~1.6k | Automated safety check: Pass | MIT | |
| Eng UI Screenshotcompozy/compozy | 2.8k | — | ~1.6k | Automated safety check: Pass | MIT | |
| Storybook Storiespedronauck/skills | 633 | 1 repos | ~495 | Automated safety check: Pass | None | |
| Webapp TestingWellApp-ai/Well | 345 | — | ~522 | Automated safety check: Pass | MIT | |
| Pixel Perfectbitovi/ai-enablement-prompts | 121 | — | ~2.6k | Automated safety check: Pass | MIT |
Similar skills
Eng UI Screenshot
compozy/compozy
Screenshot capture for deterministic PNG evidence and visual-contract bundles for Compozy Storybook stories and local UI URLs.
Storybook Stories
pedronauck/skills
Create, update, refactor, or troubleshoot Storybook stories using project conventions.
Webapp Testing
WellApp-ai/Well
Test web app UI using Browser MCP and Storybook. An agent skill from WellApp-ai/Well.
Pixel Perfect
bitovi/ai-enablement-prompts
Orchestrate a complete visual QA workflow to make a dev/Storybook page match a baseline URL pixel-for-pixel.
Visual Diff
bitovi/ai-enablement-prompts
Compare a baseline URL against a dev or Storybook URL by taking Playwright screenshots at multiple breakpoints, running a pixel-level image diff, and reporting results to guide style and HTML…
More from igrlk/storybook-addon-test-codegen
Check Visual Changes
igrlk/storybook-addon-test-codegen
Check the visual impact of an edit mid-task with uiverify check — render just the components you're touching on the UI Verify fleet and diff them against the real CI baseline, without opening a PR…
Economical Visual Tests
igrlk/storybook-addon-test-codegen
Author economical visual tests — full visual coverage in the fewest billable snapshots.
Triage Visual Changes
igrlk/storybook-addon-test-codegen
Triage a UI Verify build from your coding agent via the UI Verify MCP — bucket a build's changed stories into real regressions vs cosmetic reflow vs rendering noise, summarize the real regressions…
Storybook Visual Testing
igrlk/storybook-addon-test-codegen
Make Storybook stories deterministic for UI Verify so captures stop coming back "changed" without a real change (flaky diffs).
Related
Works with
Categories
Questions about Making UI Changes
What does Making UI Changes do?
Read before changing any component, page, or styles. An agent skill from igrlk/storybook-addon-test-codegen. Making UI Changes is an agent skill from igrlk/storybook-addon-test-codegen. Read before changing any component, page, or styles.
When should I use Making UI Changes?
Making UI Changes fits situations like: frontend & Design work in your project.
How do I install Making UI Changes in Claude Code?
Run `npx skills add igrlk/storybook-addon-test-codegen --skill making-ui-changes -a claude-code`. Or copy the skill folder (.agents/skills/making-ui-changes in igrlk/storybook-addon-test-codegen) into .claude/skills/making-ui-changes in your project. Claude Code loads it when a task matches its description.
How do I install Making UI Changes in Codex?
Run `npx skills add igrlk/storybook-addon-test-codegen --skill making-ui-changes -a codex`. Or copy the skill folder (.agents/skills/making-ui-changes in igrlk/storybook-addon-test-codegen) into .agents/skills/making-ui-changes in your project. Codex loads it when a task matches its description.
Can I use Making UI Changes 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 igrlk/storybook-addon-test-codegen --skill making-ui-changes -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/making-ui-changes, .gemini/skills/making-ui-changes, .github/skills/making-ui-changes and .opencode/skills/making-ui-changes in your project.
What does Making UI Changes need to run?
SKILL.md names no scripts, command-line tools or credentials: Making UI Changes is instructions for the agent only.
Does Making UI Changes access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Making UI Changes 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 Making UI Changes use?
Making UI Changes is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Making UI Changes use?
About 493 tokens (SKILL.md is roughly 2k 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 Making UI Changes?
Skills that share tags, products or a category with Making UI Changes: Quasar Skilld (skilld-dev/vue-ecosystem-skills, 181 stars), Eng UI Screenshot (compozy/compozy, 2.8k stars), Storybook Stories (pedronauck/skills, 633 stars) and Webapp Testing (WellApp-ai/Well, 345 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Making UI Changes?
igrlk (a GitHub user) maintains it in igrlk/storybook-addon-test-codegen, which has 154 GitHub stars. The repository holds 5 skills in this directory. The repository was last updated on September 13, 2026.
Source: igrlk/storybook-addon-test-codegen on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.