# devtools-imports

> Claude/Codex skill by [@chromedevtools](https://omgskills.com/library/chromedevtools/index.md) · 4k stars · 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.

Tags: chrome, chrome-devtools, devtools, instrumentation, javascript

## Install

```sh
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.

## Links

- HTML page: https://omgskills.com/skills/chromedevtools/devtools-frontend/devtools-imports/
- GitHub: https://github.com/ChromeDevTools/devtools-frontend
- Author: [@chromedevtools](https://omgskills.com/library/chromedevtools/index.md)

## More skills by this author

- [chrome-devtools](https://omgskills.com/skills/chromedevtools/chrome-devtools-mcp/chrome-devtools/index.md) — Uses Chrome DevTools via MCP for efficient debugging, troubleshooting and browser automation.
   - [@chromedevtools](https://omgskills.com/library/chromedevtools/index.md) · 54k stars
- [a11y-debugging](https://omgskills.com/skills/chromedevtools/chrome-devtools-mcp/a11y-debugging/index.md) — Uses Chrome DevTools MCP for accessibility (a11y) debugging and auditing based on web.dev guidelines.
   - [@chromedevtools](https://omgskills.com/library/chromedevtools/index.md) · 54k stars
- [chrome-devtools-cli](https://omgskills.com/skills/chromedevtools/chrome-devtools-mcp/chrome-devtools-cli/index.md) — Used to write shell scripts or run shell commands to automate tasks in the browser or otherwise use Chrome DevTools via...
   - [@chromedevtools](https://omgskills.com/library/chromedevtools/index.md) · 54k stars