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…
Playwright-based visual validation procedure for Envilder website changes.
Install Website Responsive Validation
$ npx skills add macalbert/envilder --skill website-responsive-validation -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install macalbert/envilder website-responsive-validation --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/macalbert/envilder.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.github/skills/website-responsive-validation .claude/skills/website-responsive-validation && 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 "website-responsive-validation" agent skill from https://github.com/macalbert/envilder/tree/main/.github/skills/website-responsive-validation into .claude/skills/website-responsive-validation/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "website-responsive-validation", 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/macalbert/envilder/tree/main/.github/skills/website-responsive-validationType 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 macalbert/envilder --skill website-responsive-validation -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install macalbert/envilder website-responsive-validation --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/macalbert/envilder.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.github/skills/website-responsive-validation .agents/skills/website-responsive-validation && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "website-responsive-validation" agent skill from https://github.com/macalbert/envilder/tree/main/.github/skills/website-responsive-validation into .agents/skills/website-responsive-validation/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "website-responsive-validation", 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 macalbert/envilder --skill website-responsive-validation -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install macalbert/envilder website-responsive-validation --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/macalbert/envilder.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.github/skills/website-responsive-validation .cursor/skills/website-responsive-validation && 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 "website-responsive-validation" agent skill from https://github.com/macalbert/envilder/tree/main/.github/skills/website-responsive-validation into .cursor/skills/website-responsive-validation/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "website-responsive-validation", 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/macalbert/envilder.git --path .github/skills/website-responsive-validation--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 macalbert/envilder --skill website-responsive-validation -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install macalbert/envilder website-responsive-validation --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/macalbert/envilder.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.github/skills/website-responsive-validation .gemini/skills/website-responsive-validation && 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 "website-responsive-validation" agent skill from https://github.com/macalbert/envilder/tree/main/.github/skills/website-responsive-validation into .gemini/skills/website-responsive-validation/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "website-responsive-validation", 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 macalbert/envilder website-responsive-validationInstalls 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 macalbert/envilder --skill website-responsive-validation -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/macalbert/envilder.git skills-src && mkdir -p .github/skills && cp -r skills-src/.github/skills/website-responsive-validation .github/skills/website-responsive-validation && 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 "website-responsive-validation" agent skill from https://github.com/macalbert/envilder/tree/main/.github/skills/website-responsive-validation into .github/skills/website-responsive-validation/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "website-responsive-validation", 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 macalbert/envilder --skill website-responsive-validation -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install macalbert/envilder website-responsive-validation --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/macalbert/envilder.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.github/skills/website-responsive-validation .opencode/skills/website-responsive-validation && 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 "website-responsive-validation" agent skill from https://github.com/macalbert/envilder/tree/main/.github/skills/website-responsive-validation into .opencode/skills/website-responsive-validation/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "website-responsive-validation", 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
website-responsive-validation- GitHub stars
- 138
- Token cost
- ~739 tokens
- SKILL.md length
- 307 words
- Files
- 1
- Skills in repo
- 30
- Repo updated
- First seen
- Licence
- MIT
At a glance
Playwright-based visual validation procedure for Envilder website changes.
- Works in 5 steps: Resize the browser to the target viewport → Navigate to the page being edited (or… → Take a snapshot: verify accessibility… → …
- Verifying responsiveness across mobile
- SKILL.md covers When to Use, Prerequisites, Validation Breakpoints and 5-Step Validation Procedure, plus 3 more sections
- Calls pnpm
What it does
Website Responsive Validation is an agent skill from macalbert/envilder. Playwright-based visual validation procedure for Envilder website changes. Use when verifying responsiveness across mobile, tablet, and desktop breakpoints. Covers the validation workflow, viewport sizes, theme checking, and when to trigger validation.
Its SKILL.md is about 740 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, covering Responsive design and Browser testing. It works with Playwright. The repository describes itself as: One secret mapping for local dev, CI/CD, and runtime. Envilder resolves cloud secrets from your own vaults without SaaS middlemen, duplicated config, or .env drift. The licence is MIT.
When your agent uses it
- Verifying responsiveness across mobile
- Desktop breakpoints
Example prompts
- “/website-responsive-validation”
Workflow steps
5 steps, taken from the first numbered list in SKILL.md.
- Resize the browser to the target viewport
- Navigate to the page being edited (or reload if already there)
- Take a snapshot: verify accessibility tree and element structure
- Take a screenshot: verify visual layout and styling
- Toggle theme: click the theme switcher and repeat snapshot + screenshot
What it can do on your machine
Read from SKILL.md and the folder at commit b6a0327. 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:
pnpm
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md. Its commands use pnpm, 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
Website Responsive Validation loads about 739 tokens when it runs. Until then it costs about 71 tokens; SKILL.md has 307 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 macalbert/envilder at commit b6a0327, republished under its MIT licence (© macalbert). 307 words, ~739 tokens.
Download SKILL.mdSave it as
.claude/skills/website-responsive-validation/SKILL.md (or your agent's skills folder).- name
- website-responsive-validation
- description
- Playwright-based visual validation procedure for Envilder website changes. Use when verifying responsiveness across mobile, tablet, and desktop breakpoints. Covers the validation workflow, viewport sizes, theme checking, and when to trigger validation.
Website Responsive Validation
Visual validation procedure using Playwright browser tools to verify every website change is responsive and theme-compatible.
When to Use
- After creating a new component or page section
- After CSS changes (global or scoped)
- After layout modifications
- After i18n changes (verify text renders in each locale)
- Before marking any website work as complete (final pass)
Prerequisites
The Astro dev server must be running:
cd src/website && pnpm devRuns on http://localhost:4322/. Keep it running throughout the session.
If already running, reuse it.
Validation Breakpoints
| Breakpoint | Width × Height | What to check |
|---|---|---|
| Mobile | 375 × 812 | Single column, readable text, no horizontal overflow |
| Tablet | 768 × 1024 | 2-column grids, proper spacing, no cramped elements |
| Desktop | 1440 × 900 | Full layout, max-width containment, proper alignment |
5-Step Validation Procedure
For each breakpoint:
- Resize the browser to the target viewport
- Navigate to the page being edited (or reload if already there)
- Take a snapshot: verify accessibility tree and element structure
- Take a screenshot: verify visual layout and styling
- Toggle theme: click the theme switcher and repeat snapshot + screenshot to verify both retro and light themes
Playwright Tool Cheat Sheet
| Action | Tool | Example |
|---|---|---|
| Navigate to page | browser_navigate | http://localhost:4322/ |
| Resize viewport | browser_resize | { width: 375, height: 812 } |
| Accessibility snapshot | browser_snapshot | Verify structure & text |
| Visual screenshot | browser_take_screenshot | Verify layout & styling |
| Click element | browser_click | Toggle theme switcher |
| Full-page screenshot | browser_take_screenshot | { fullPage: true } |
Validation Triggers
| Change type | Validation scope |
|---|---|
| New component | Full 3-breakpoint validation |
| CSS changes | Full 3-breakpoint validation |
| i18n changes | Navigate to each locale, verify text renders |
| Layout modifications | Full 3-breakpoint validation |
| Before completion | Final full validation pass |
Common Issues to Watch
- Text overflow on mobile (long words, no
overflow-wrap) - Grid items not collapsing to single column on mobile
- Spacing too tight or too wide at tablet breakpoint
- Theme-specific contrast issues (check both themes)
- Missing hover/focus states on interactive elements
- Images or cards breaking out of container max-width
© macalbert, 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 .github/skills/website-responsive-validation of macalbert/envilder.
Open the folder on GitHubat commit b6a0327
Compare with similar skills
Website Responsive Validation 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 |
|---|---|---|---|---|---|---|
| Website Responsive Validation this skillmacalbert/envilder | 138 | — | ~739 | Automated safety check: Pass | MIT | |
| Visual Diffbitovi/ai-enablement-prompts | 121 | — | ~2.9k | Automated safety check: Pass | MIT | |
| Common Web Visual TestingHoangNguyen0403/agent-skills-standard | 570 | — | ~760 | Automated safety check: Pass | MIT | |
| Extract Design Systemespennilsen/pi | 122 | — | ~2k | Automated safety check: Pass | MIT | |
| Eval Graphicselvisun/newsjack | 1.5k | — | ~2k | Automated safety check: Pass | MIT | |
| Liteyuki Webui FrontendLiteyukiStudio/LiteyukiBot | 157 | — | ~2.5k | Automated safety check: Pass | Custom licence |
Similar skills
Common Web Visual Testing
HoangNguyen0403/agent-skills-standard
Standardizes visual audits, responsive design, and behavioral testing for web apps.
Extract Design System
espennilsen/pi
Reverse-engineer a design system from a live website (public URL or localhost).
Eval Graphics
elvisun/newsjack
Turn an eval study's numbers into on-brand, publish-ready figures using the Newsjack chart room (the eval design system), then validate them with Playwright.
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/.
Plugin Installer
IgorWarzocha/Opencode-Workflows
Find, install, and configure OpenCode plugins from the catalog or community.
More from macalbert/envilder
All 30 skills in this repoCode Review Perspectives
macalbert/envilder
Five independent analysis perspectives for code review: correctness, architecture, security, conventions, and complexity.
Common Architecture Decisions
macalbert/envilder
Index of Architecture Decision Records (ADRs) for cross-cutting technical decisions.
Common Git
macalbert/envilder
Git commit messages, PR workflow, and branching strategy using Conventional Commits and Semantic Versioning.
Common Testing Conventions
macalbert/envilder
Mandatory testing conventions including the narrow diagnostic exception for testing test-only code, AAA pattern, test naming, and assertions across all stacks (.NET, TypeScript, Python).
Doc Maintenance
macalbert/envilder
Workflow for maintaining changelogs, READMEs, and documentation files.
Doc Sync
macalbert/envilder
Audit and synchronize documentation across website, READMEs, and docs/.
Related
Works with
Categories
Questions about Website Responsive Validation
What does Website Responsive Validation do?
Playwright-based visual validation procedure for Envilder website changes. Website Responsive Validation is an agent skill from macalbert/envilder. Playwright-based visual validation procedure for Envilder website changes.
When should I use Website Responsive Validation?
Website Responsive Validation fits situations like: verifying responsiveness across mobile; desktop breakpoints.
How do I install Website Responsive Validation in Claude Code?
Run `npx skills add macalbert/envilder --skill website-responsive-validation -a claude-code`. Or copy the skill folder (.github/skills/website-responsive-validation in macalbert/envilder) into .claude/skills/website-responsive-validation in your project. Claude Code loads it when a task matches its description.
How do I install Website Responsive Validation in Codex?
Run `npx skills add macalbert/envilder --skill website-responsive-validation -a codex`. Or copy the skill folder (.github/skills/website-responsive-validation in macalbert/envilder) into .agents/skills/website-responsive-validation in your project. Codex loads it when a task matches its description.
Can I use Website Responsive Validation 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 macalbert/envilder --skill website-responsive-validation -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/website-responsive-validation, .gemini/skills/website-responsive-validation, .github/skills/website-responsive-validation and .opencode/skills/website-responsive-validation in your project.
What does Website Responsive Validation need to run?
Going by SKILL.md and its folder, Website Responsive Validation needs the command-line tools its instructions call (pnpm).
Does Website Responsive Validation 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 Website Responsive Validation 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 Website Responsive Validation use?
Website Responsive Validation 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 Website Responsive Validation use?
About 739 tokens (SKILL.md is roughly 3k 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 Website Responsive Validation?
Skills that share tags, products or a category with Website Responsive Validation: Visual Diff (bitovi/ai-enablement-prompts, 121 stars), Common Web Visual Testing (HoangNguyen0403/agent-skills-standard, 570 stars), Extract Design System (espennilsen/pi, 122 stars) and Eval Graphics (elvisun/newsjack, 1.5k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Website Responsive Validation?
macalbert (a GitHub user) maintains it in macalbert/envilder, which has 138 GitHub stars. The repository holds 30 skills in this directory. The repository was last updated on October 5, 2026.
Source: macalbert/envilder on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.