playwright-ux-ui-capture
Playwright UX/UI Capture (Artifact-first)
When to use
Use this skill when implementing or modifying Playwright E2E to:
- capture screenshots for a set of routes
- emit per-route artifacts immediately to disk
- keep the process robust and deterministic
Repo conventions
- Playwright config:
edgequake_webui/playwright.config.ts - Tests live in:
edgequake_webui/e2e/ - UX/UI output dir:
ux_ui_map/(repo root)
Route discovery
Prefer enumerating concrete page.tsx files under edgequake_webui/src/app/**/page.tsx.
- Ignore route groups: folders like
(dashboard)do not appear in URL paths. - Avoid dynamic segments: paths with
[param],[...param],[[...param]]are not capturable without fixture data.
Helper script (no dependencies):
More from raphaelmansuy/edgequake
copilotkit-nextjs-integration
Integrate CopilotKit AI components into Next.js frontend for building agentic UIs. Enables context-aware AI agents that can read app state and trigger tools/actions. Supports custom adapters for self-hosted LLMs and multiple provider integrations.
33pdf-markdown-validator
Validate PDF to Markdown conversion quality using multi-dimensional metrics. Assess table accuracy, style preservation (bold/italic/headings), robustness, and performance with standardized F1-scoring methodology.
3ux-ui-analyze-single-page
Analyze exactly one captured UI page (from ux_ui_map screenshots + request JSON) and immediately write/update ux_ui_map/pages/{page}.md in neutral descriptive language. Use when asked to analyze screenshots, rewrite corresponding analysis immediately, or avoid memory/context saturation.
3reverse-documentation
Automatically generate comprehensive documentation for Rust and TypeScript codebases by analyzing code structure, patterns, and relationships. Supports trait-based patterns, async operations, React components, and Next.js applications.
2ux-ui-map-page-by-page
Produce the EdgeQuake WebUI UX/UI map one route at a time (capture screenshots, then immediately write per-page docs and per-page analysis requests). Use when asked to map UI, capture screens page-by-page, avoid agent memory saturation, or generate ux_ui_map artifacts.
2makefile-dev-workflow
Unified development workflow for EdgeQuake using Makefile commands. Use when starting services, running tests, or managing the full development stack (database, backend, frontend). Provides simplified alternatives to raw cargo/npm commands.
2