2025-07-24 14:41:34 -07:00
---
description: Ultracite Rules - AI-Ready Formatter and Linter
globs: "**/*.{ts,tsx,js,jsx}"
alwaysApply: true
---
# Project Context
2025-09-02 23:07:11 +02:00
2025-07-24 14:41:34 -07:00
Ultracite enforces strict type safety, accessibility standards, and consistent code quality for JavaScript/TypeScript projects using Biome's lightning-fast formatter and linter.
## Key Principles
2025-09-02 23:07:11 +02:00
2025-07-24 14:41:34 -07:00
- Zero configuration required
- Subsecond performance
- Maximum type safety
- AI-friendly code generation
## Before Writing Code
2025-09-02 23:07:11 +02:00
2025-07-24 14:41:34 -07:00
1. Analyze existing patterns in the codebase
2. Consider edge cases and error scenarios
3. Follow the rules below strictly
4. Validate accessibility requirements
2025-08-05 05:47:29 +02:00
5. Avoid code duplication
2025-07-24 14:41:34 -07:00
## Rules
### Accessibility (a11y)
2025-09-02 23:07:11 +02:00
2025-08-05 05:47:29 +02:00
- Always include a `title` element for icons unless there's text beside the icon.
2025-07-24 14:41:34 -07:00
- Always include a `type` attribute for button elements.
- Accompany `onClick` with at least one of: `onKeyUp`, `onKeyDown`, or `onKeyPress`.
- Accompany `onMouseOver`/`onMouseOut` with `onFocus`/`onBlur`.
### Code Complexity and Quality
2025-09-02 23:07:11 +02:00
2025-07-24 14:41:34 -07:00
- Don't use primitive type aliases or misleading types.
- Don't use the comma operator.
- Use for...of statements instead of Array.forEach.
- Don't initialize variables to undefined.
- Use .flatMap() instead of map().flat() when possible.
### React and JSX Best Practices
2025-09-02 23:07:11 +02:00
2025-08-05 05:47:29 +02:00
- Don't import `React` itself.
2025-07-24 14:41:34 -07:00
- Don't define React components inside other components.
- Don't use both `children` and `dangerouslySetInnerHTML` props on the same element.
- Don't insert comments as text nodes.
- Use `<>...</>` instead of `<Fragment>...</Fragment>`.
2025-08-22 23:02:43 +02:00
### Function Parameters and Props
2025-09-02 23:07:11 +02:00
2025-08-22 23:02:43 +02:00
- Always use destructured props objects instead of individual parameters in functions.
- Example: `function helloWorld({ prop }: { prop: string })` instead of `function helloWorld(param: string)`.
- This applies to all functions, not just React components.
2025-07-24 14:41:34 -07:00
### Correctness and Safety
2025-09-02 23:07:11 +02:00
2025-07-24 14:41:34 -07:00
- Don't assign a value to itself.
2025-08-05 05:47:29 +02:00
- Avoid unused imports and variables.
2025-07-24 14:41:34 -07:00
- Don't use await inside loops.
- Don't hardcode sensitive data like API keys and tokens.
- Don't use the TypeScript directive @ts-ignore.
- Make sure the `preconnect` attribute is used when using Google Fonts.
- Don't use the `delete` operator.
2025-09-02 23:07:11 +02:00
- Don't use `require()` in TypeScript/ES modules - use proper `import` statements.
2025-07-24 14:41:34 -07:00
### TypeScript Best Practices
2025-09-02 23:07:11 +02:00
2025-07-24 14:41:34 -07:00
- Don't use TypeScript enums.
- Use either `T[]` or `Array<T>` consistently.
2025-08-05 05:47:29 +02:00
- Don't use the `any` type.
2025-07-24 14:41:34 -07:00
### Style and Consistency
2025-09-02 23:07:11 +02:00
2025-07-24 14:41:34 -07:00
- Don't use global `eval()`.
- Use `String.slice()` instead of `String.substr()` and `String.substring()`.
- Don't use `else` blocks when the `if` block breaks early.
- Put default function parameters and optional function parameters last.
- Use `new` when throwing an error.
- Use `String.trimStart()` and `String.trimEnd()` over `String.trimLeft()` and `String.trimRight()`.
### Next.js Specific Rules
2025-09-02 23:07:11 +02:00
2025-07-24 14:41:34 -07:00
- Don't use `<img>` elements in Next.js projects.
- Don't use `<head>` elements in Next.js projects.
## Example: Error Handling
2025-09-02 23:07:11 +02:00
2025-07-24 14:41:34 -07:00
```typescript
// ✅ Good: Comprehensive error handling
try {
const result = await fetchData();
return { success: true, data: result };
} catch (error) {
2025-09-02 23:07:11 +02:00
console.error("API call failed:", error);
2025-07-24 14:41:34 -07:00
return { success: false, error: error.message };
}
// ❌ Bad: Swallowing errors
try {
return await fetchData();
} catch (e) {
console.log(e);
}
2025-08-22 23:02:43 +02:00
```
