technickai/ai-coding-config
Overview
This skill automates browser tasks using Playwright to run scripts, capture screenshots, test UI, and verify flows. It executes Playwright code via a provided runner (run.js) and auto-installs Playwright on first use. Designed for headless default runs but supports headed mode for interactive debugging.
How this skill works
You write Playwright scripts to /tmp or provide inline code strings and execute them with node $SKILL_DIR/run.js. The runner injects useful variables (BASE_URL, CI_ARGS, EXTRA_HEADERS and playwright browser objects) for convenient scripting. Screenshots default to /tmp, and the runner handles installation and execution so you can focus on test logic rather than environment setup.
When to use it
- Automating end-to-end browser tests for web apps
- Taking screenshots for visual regression or documentation
- Verifying login flows and session persistence
- Testing responsive behavior across viewports and devices
- Running CI-compatible browser checks with safe args
Best practices
- Keep ephemeral scripts in /tmp for quick iterations and cleanup
- Use BASE_URL and injected headers to avoid hardcoding endpoints or secrets
- Run headless by default for CI; set { headless: false } and slowMo: 100 when debugging interactively
- Use CI_ARGS when running in containerized or sandboxed CI environments
- Persist auth state or use network mocking for stable, repeatable tests
Example use cases
- Headless smoke test: navigate to site, assert page title, and exit
- Interactive debug: launch chromium with headless: false and slowMo: 100 to watch actions
- Visual snapshot: load a page at different viewports and save screenshots to /tmp
- Login flow: fill credentials, submit, wait for navigation, and verify protected page content
- Responsive check: iterate device presets from devices to capture mobile and desktop layouts
FAQ
Pass the code string to the runner: node $SKILL_DIR/run.js "const b = await chromium.launch(); const p = await b.newPage(); await p.goto(BASE_URL || 'http://localhost:3000'); console.log(await p.title()); await b.close();"
Where are screenshots and outputs stored?
Screenshots and temporary artifacts are written to /tmp by default. You can change paths inside your script if you need persistent storage.
5 skills
This skill enables automated browser tasks with Playwright by generating and executing scripts, taking screenshots, and validating UI flows.
This skill downloads and analyzes YouTube transcripts to extract actionable insights and relate video concepts to your projects.
This skill lets you test and debug MCP servers directly, view raw responses, and diagnose issues during development sessions.
This skill helps you author reusable AI skill templates with clear frontmatter, structure, and guidance for scalable, discoverable skill development.
This skill guides rough ideas into structured designs through collaborative dialogue, exploring options and validating incrementally.
