macalbert/envilder/website-responsive-validation
Claude Code and agent skill by macalbert/envilder
- community
Checking that the SKILL.md file is still in the repository.
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.
Install
npx vskill@latest install macalbert/envilder/website-responsive-validationSKILL.md
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:
Runs 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
Security
- Security scanPassed, 93 of 100Pattern checks on the skill's files.
- Model reviewNot runA model review is scheduled for the next rescan.
Quality evaluation
- Task evaluationNot runNo evaluation yet. Run one in Skill Studio.
Source
- SKILL.md in the repositoryChecking.github/skills/website-responsive-validation/SKILL.md
Popularity
- Repository stars
- 135
- Repository forks
- 4
- 7-day trend score
- 25
Stars and forks are for the whole GitHub repository, not this skill alone. Not refreshed yet.
Works with
Any agent vskill installs to: 56 targets in all. These 39 have a page on this site.
- Claude Code
- Cursor
- GitHub Copilot
- Windsurf
- Codex
- Gemini CLI
- Cline
- Amp
- Roo Code
- Goose
- Continue
- Kilo Code
- Junie
- Trae
- OpenHands
- Qwen Code
- AI Agent
- Tabnine Chat
- Sourcegraph Cody
- Amazon Q
- Firebase Genkit
- Sweep
- Devin
- Phind
- Mentat
- Claude Desktop
- Aider
- GPT Pilot
- Plandex
- bolt.new
- v0
- Replit Agent
- Anse
- TypingMind
- BetterChatGPT
- LibreChat
- Warp AI
- Pieces
- Fig AI
Embed badge
[](https://verified-skill.com/skills/macalbert/envilder/website-responsive-validation)