skills.rest
chronista-club
chronista-clubOFFICIAL
Explore all skills by this author →
WebsiteGitHub

DevTools Skills

Manage per-project tool versions with mise and automate Chrome DevTools MCP browser testing.

2|1|Updated Sep 5, 2025
Search Tags:#automation#testing#mcp#chrome devtools#mise#devtools#e2e testing#development tools
One-click install
npx skills add https://github.com/chronista-club/unison --skill devtools-skills
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: DevTools Skills
Source: https://github.com/chronista-club/unison/tree/main/.claude/devtools
Command: npx skills add https://github.com/chronista-club/unison --skill devtools-skills

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and examples (resource) components.

What problem does it solve?

This Skill standardizes development environments with mise for consistent tool versions and automates browser interactions for E2E testing and UI debugging using the Chrome DevTools MCP server, enhancing team efficiency and product quality.

Core Features & Use Cases

  • Environment Management with mise: Manages tool versions (Rust, Node.js, Python) per project, ensuring team consistency, simplifying onboarding, and automating task execution.
  • Browser Automation with Chrome DevTools MCP: Provides MCP tools for opening pages, taking DOM snapshots, clicking elements, inputting text, and executing JavaScript for robust UI testing.
  • E2E Testing & UI Debugging: Facilitates end-to-end testing of web UIs, capturing screenshots, verifying element presence, and interactively debugging browser-based issues.
  • Use Case: A new developer joins the team. They use mise install to automatically set up all required tool versions. Then, they run mise run test to execute E2E tests on the web dashboard using Chrome DevTools MCP, verifying critical UI flows.

Quick Start

Use the DevTools Skills to open a new Chrome page to http://localhost:8080, then take a DOM snapshot of the page to inspect its elements.

Frequently Asked Questions about DevTools Skills

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

FAQPage Schema
How do I automate end-to-end testing for web UIs with Chrome DevTools?▼

End-to-end testing with Chrome DevTools MCP automates browser interactions like opening pages, clicking elements, taking screenshots, and executing JavaScript. DevTools Skills provides MCP-based tools to define JSON test scenarios, run them against your web app, and capture DOM snapshots for verification without manual UI interaction.

Can I manage different tool versions across projects automatically?▼

Yes. mise enables per-project tool version management for languages like Rust, Node.js, and Python. DevTools Skills integrates mise to automatically switch versions based on project configuration, ensuring team consistency and eliminating version conflicts across multiple projects.

How do I set up a consistent development environment for my team?▼

Use mise to define tool versions in a project config file. DevTools Skills standardizes these versions across your team—new developers run `mise install` once to set up all required tools automatically, then execute tasks like E2E tests via `mise run` without manual setup steps.

What's the difference between using Chrome DevTools MCP versus manual UI testing?▼

Chrome DevTools MCP automation captures repeatable, scriptable browser interactions defined in JSON test scenarios, eliminating manual clicking and screenshot capture. This approach scales across multiple test cases, integrates into CI/CD workflows, and enables faster debugging compared to manual verification.

Can DevTools Skills work with my existing development workflow?▼

Yes. DevTools Skills integrates with CLI workflows through mise task orchestration and MCP-based browser automation. It works alongside your existing tools by providing command-driven automation for environment setup and E2E testing, fitting into both local development and automated testing pipelines.

Do I need Chrome installed to run browser-based tests?▼

Chrome DevTools MCP requires a Chrome browser instance to automate interactions like opening pages, clicking elements, and taking screenshots. DevTools Skills manages the orchestration of these browser commands; Chrome availability is a prerequisite for MCP-based E2E testing.

Related Skills

Explore More Software Engineering Skills→
pagerguildpagerguild

mise-expert

Configure runtime environments and tool versions using global and project mise.toml files.

Official
Advanced
johnlindquistjohnlindquist
16

chrome-devtools

Automate browser control and debugging via the Chrome DevTools Protocol.

Community
Advanced
taiidanitaiidani
1

mise

Install and manage tool versions with mise configuration files.

Community
Advanced
LambdaTestLambdaTest
350

test-framework-migration-skill

Migrate test automation scripts between Selenium, Playwright, Puppeteer, and Cypress.

Official
Advanced