ultracite by @haydenbleasel is a solid option if you're looking to try @biomejs for linting and formatting.
The AI-ready formatter that helps you write and generate code faster.
Ultracite is a zero-config Biome preset that provides a robust linting and formatting experience for your team and your AI integrations.
$
npx ultracite@latest init
Used by over 500 developers
Finally — a ⚡ lightning-fast formatter that ensures you, your team and your AI agents are writing code in harmony.
Subsecond linting and formatting
Built in Rust for instant code analysis and processing, making on-save checks feel seamless without interrupting your workflow.
✔ Backed up original state in git stash(5bda95f)❯ Running tasks for staged files...❯ packages / frontend /.lintstagedrc.json — 1 file↓ *.js — no files[SKIPPED]❯ *.{ ts, tsx, js, jsx } — 1 file⠹ npx ultracite format◼ Applying modifications from tasks...◼ Cleaning up temporary files...
Plays nice with others
Built-in scaffolding for Husky pre-commit hooks and lint-staged configuration, with support for all major package managers.
$Diagnostics not shown: 35.Checked 1740 files in 214ms.Found 2 errors.Found 53 warnings.Done in 312ms.
Intuitive and robust
Automatically reformats code and fixes lint issues on save, with clear error reporting for issues that need manual attention.
Missing Return
Function "getUser" lacks return type annotation.
Line 28, Column 20
Maximum type safety
Enforces strict type checking and best practices by default, catching type errors and preventing unsafe code patterns.
Designed for monorepos
Unified toolchain configuration across all packages and apps, eliminating thousands of lines of duplicate config files while maintaining consistency.
Don't use `accessKey` attribute on any HTML element.
Don't set `aria-hidden="true"` on focusable elements.
Don't add ARIA roles, states, and properties to elements that don't support them.
Don't use distracting elements like `<marquee>` or `<blink>`.
Only use the`scope` prop on`<th>` elements.
Don't assign non-interactive ARIA roles to interactive HTML elements.
Make sure label elements have text content and are associated with an input.
Don't assign interactive ARIA roles to non-interactive HTML elements.
Don't assign `tabIndex` to non-interactive HTML elements.
Don't use positive integers for `tabIndex` property.
Don't include "image", "picture", or "photo" in img `alt` prop.
Highly opinionated
Strict configuration and opinionated rules to ensure consistent code, eliminating formatting debates and streamlining code review.
Zero-config by design
Preconfigured rules optimized for Next.js, React and TypeScript projects with sensible defaults, while still allowing customization when needed.
biome.jsonc
{
"$schema": "https://biomejs.dev/schemas/2.0.0/schema.json",
"extends": ["ultracite"]
}Designed for humans and AI
Ensure consistent code style and quality across all team members and AI models, eliminating debates over formatting and reducing code review friction.
AI Editor Rules
Synchronized rule files for VS Code, Cursor, Windsurf and Zed keeps your AI responses consistent with your coding style.
Configurable spec
Extend the Ultracite spec to your liking.
Output panel
Biome uses the VS Code output panel to show problems.
.cursor
.rules
ultracite.mdc
index.tsx
layout.tsx
utils.ts
globals.css
biome.jsonc
import React from 'react';
interface User {
id: number;
name: string;
email: string;
}
const UserCard: React.FC<{ user: User }> = ({ user }) => {
return (
<div className="p-4 border rounded-lg shadow-sm">
<h3 className="text-lg font-semibold">{user.name}</h3>
<p className="text-gray-600">{user.email}</p>
</div>
);
};
export default UserCard;Problems
Biome (Ultracite)
index.tsx
/index.tsx
React is imported but not used
It is not necessary to wrap the return statement in a div.
Sure! I'll generate a new UserCard component for you.
Using Ultracite
I found several issues with the code. Here's a list of suggestions:
React is imported but not used. This is a common pattern in React codebases, but it's not necessary. You can destructure the import to use the React object.
It is not necessary to wrap the return statement in a div. You can return the JSX directly.
Extract types into a type definition rather than providing them inline. This will make the code more readable and maintainable.
MCP Support
Run external code through the Ultracite MCP server to lint without needing to install it locally, or connect it to an Agent for consistent code quality in background jobs.
Format on save
Format your code on save with Ultracite.
Works with all your favourite IDEs.
What the community is saying
Here's what some of the most FORWARD-THINKING, 1000 IQ developers in the React ecosystem have to say about Ultracite.
Zed, Zod, Claude, Ultracite (Biome) ... oooh my, what a relief 🥰 Finally, a productive and robust environment!
To all Typescript devs out there - try out Ultracite. Opinionated, auto-fixing & formatting on save, etc. My code is now prettier than it's ever been
I'm using Ultracite from @haydenbleasel. Is based on Biome. Is... Just *chef kiss*. ultracite.dev
Try ultracite, it’s based on biome ultracite.dev
maybe try biomejs, it's super fast. had a great experience so far. ultracite by @haydenbleasel is a solid option if you're going to try biome
I just updated the starter-kit with Ultracite ⚡️ github.com/rajatsandeepse…
Yeah ultracite has a few nice configs that I am also integatring into supastarter :)
Well-formatted & properly linted code bases will have such an advantage for AI. Huge alpha here Hats off to ultracite & biome helping us prettify the horrible code I wrote 6 months ago
Install in seconds. Run in milliseconds.
Install Ultracite and start shipping code faster.
$
npx ultracite@latest init