Download for macOS
Skill

devtools-imports

@chromedevtools Updated 2026-08-30

Conventions for importing code in Devtools to avoid build errors. Covers cross-module imports, internal imports, and the "import * as" requirement.

chromechrome-devtoolsdevtoolsinstrumentationjavascript

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.