Best practices for Claude Code

Hi everyone,

Does anyone have best practices for developing Hilla-based applications with Claude Code?

I saw an MCP server in the forum already for up to date docs.

One issue I am running into is Claude not seeing when it produces typescript errors in .tsx files. These will show in the browser and I manually copy them over. Is there a way to get these errors somehow in the terminal available for claude code directly?

Thanks!
David

I would configure it to use the Vaadin docs MCP, which should help it to utilize e.g. Vaadin components in better way. I would also create CLAUDE.md file and there instruct Claude to use Vaadin components when possible, and especially the field components. This is necessary for the Binder logic to work. There are lot of opinion based things related to this question. You could instruct in CLAUDE.md to prefer useSignal over useState etc. Also you could define guidelines regarding testing. It is rather peculiar if it produces syntax errors with .tsx files as React should be one of the better understood libraries by AI. I have not been using Claude Code myself, I use GitHub Copilot currently.

A simple approach could be to add a script to run the Typescript type checker to package.json:

"lint:types": "tsc --noEmit"

Then add a section to CLAUDE.md that explains how to use the linter:

### Linting and Type Checking

- `npm run lint:types` - Run TypeScript type checker after making changes

That might be enough to let CC run the type checker after making changes.

There is also a concept called hooks that allow to consistently run specific CLI tools at certain points: Get started with Claude Code hooks - Anthropic

2 Likes

That seems to work well! Thank you for the suggestion!