devtools-imports
Conventions for importing code in Devtools to avoid build errors. Covers cross-module imports, internal imports, and the "import * as" requirement.
Install
git clone https://github.com/ChromeDevTools/devtools-frontend /tmp/devtools-frontend && ln -s /tmp/devtools-frontend/.agents/skills/devtools-imports ~/.claude/skills/devtools-imports
From README
Imports This codebase follows a special convention for importing code that must be followed to avoid build errors. In DevTools each folder of code is considered a module: frontend/models/trace is the trace module. frontend/panels/timeline is the timeline module. Within each module there are multiple TypeScript files. The file that is named the same as the folder name is called the entrypoint. frontend/models/trace/trace.ts is the trace module's entrypoint frontend/models/trace/ModelImpl.ts is part of the implementation of the trace module. Importing from another module When you want to reuse code from other modules, you must import that module via its entrypoint. Imagine we are in frontend/panels/timeline/TimelinePanel.ts. This import is GOOD: This import is BAD because we import a file that is NOT the entrypoint: Additionally, you must import using the import as syntax.
More skills
chrome-devtools
Uses Chrome DevTools via MCP for efficient debugging, troubleshooting and browser automation.
a11y-debugging
Uses Chrome DevTools MCP for accessibility (a11y) debugging and auditing based on web.dev guidelines.
chrome-devtools-cli
Used to write shell scripts or run shell commands to automate tasks in the browser or otherwise use Chrome DevTools via...
