skills.rest
macalbert
macalbertCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

website-responsive-validation

Validates website responsiveness across mobile, tablet, and desktop breakpoints using Playwright browser tools.

138|5|Updated Sep 19, 2024
Search Tags:#frontend#responsive design#playwright#astro#breakpoints#visual validation#theme testing
One-click install
npx skills add https://github.com/macalbert/envilder --skill website-responsive-validation-macalbert
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: website-responsive-validation
Source: https://github.com/macalbert/envilder/tree/main/.github/skills/website-responsive-validation
Command: npx skills add https://github.com/macalbert/envilder --skill website-responsive-validation-macalbert

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Website changes often break layouts on specific screen sizes or themes without anyone noticing until users report it. This Skill provides a repeatable Playwright-based validation procedure that catches responsive layout and theme issues before work is marked complete. ## Core Features & Use Cases - Multi-Breakpoint Validation: Checks pages at mobile (375x812), tablet (768x1024), and desktop (1440x900) viewports for overflow, spacing, and grid collapse issues. - Theme Compatibility Checks: Toggles between retro and light themes at each breakpoint to verify contrast and styling in both modes. - Structured 5-Step Procedure: Combines viewport resizing, accessibility snapshots, screenshots, and theme toggling into a consistent workflow triggered by component, CSS, layout, or i18n changes. - Use Case: After adding a new section to the Envilder Astro site, run the full validation pass to confirm the layout holds on all three breakpoints and both themes before committing. ## Quick Start Start the Astro dev server in src/website with pnpm dev, then ask the AI to validate the page at http://localhost:4322/ across mobile, tablet, and desktop breakpoints in both themes.

Frequently Asked Questions about website-responsive-validation

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I test website responsiveness with Playwright?▼

Resize the browser viewport to target dimensions using browser_resize, then take accessibility snapshots and screenshots at each size. This procedure checks 375x812 for mobile, 768x1024 for tablet, and 1440x900 for desktop.

What breakpoints should I use for responsive design testing?▼

Use 375x812 for mobile to check single-column layout and text overflow, 768x1024 for tablet to verify grid spacing, and 1440x900 for desktop to confirm max-width containment and alignment.

How do I test dark mode or theme switching with Playwright?▼

Click the theme switcher element using browser_click, then repeat the snapshot and screenshot steps to compare rendering. This verifies contrast and styling in both retro and light themes at every breakpoint.

Does this validation require a running dev server?▼

Yes, the Astro dev server must be running via pnpm dev in the src/website directory. The site is served at http://localhost:4322/ and should stay running throughout the validation session.

What responsive layout issues are most common on mobile?▼

Common issues include text overflow from long words without overflow-wrap, grids failing to collapse to a single column, and images breaking out of container max-width. Theme-specific contrast problems also appear when only one theme is tested.

Related Skills

Explore More Software Engineering Skills→
astronomerastronomer
419

managing-astro-local-env

Manage local Airflow environments using Astro CLI lifecycle commands.

Official
Advanced
kieranpottskieranpotts

resolve

Implements, verifies, and resolves open review comments on a pull request.

Community
Advanced
asmortongptasmortongpt

visual-testing

Automate Playwright visual regression, accessibility, and performance checks across browsers.

Community
Advanced
vecearvecear

visual-regression-tester

Automate visual regression testing of UI with Playwright, Chromatic, or Percy.

Community
Advanced