菜单
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.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Workflow for investigating and reproducing bugs before fixing via TDD. Use when a bug report or GitHub issue is received. Covers issue fetching, root cause analysis, reproduction planning, and handoff to TDD cycle.
CRAP score quality gate for code complexity and test coverage. Use when reviewing methods for complexity risk, deciding whether to split methods, or determining minimum test coverage requirements.
Code smell detection and safe incremental refactoring patterns. Use when improving code structure, reducing technical debt, or cleaning up after a TDD cycle. Covers SOLID principles, smell catalog, and the propose-apply workflow.
Five independent analysis perspectives for code review: correctness, architecture, security, conventions, and complexity. Use when reviewing PRs, commits, or local changes. Includes severity model and output format.
Index of Architecture Decision Records (ADRs) for cross-cutting technical decisions. Use when making design choices, reviewing proposals for consistency with prior decisions, or onboarding to understand why specific tools or patterns were chosen. Covers test tooling, SDK architecture, code quality, and acceptance test infrastructure.
Git commit messages, PR workflow, and branching strategy using Conventional Commits and Semantic Versioning. Use when creating commits, pull requests, or managing Git workflow.
| 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. |
Visual validation procedure using Playwright browser tools to verify every website change is responsive and theme-compatible.
The Astro dev server must be running:
cd src/website && pnpm dev
Runs on http://localhost:4322/. Keep it running throughout the session.
If already running, reuse it.
| 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 |
For each breakpoint:
| 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 } |
| 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 |
overflow-wrap)