Ultracite Code Standards - Biome Preset
Enforce strict code quality standards using **Ultracite**, a zero-config Biome preset for TypeScript and React projects. This skill guides you to write accessible, performant, type-safe, and maintainable code following modern best practices.
Overview
Ultracite leverages Biome's Rust-based linting and formatting engine to automatically enforce code standards. This skill ensures AI-generated code adheres to the same principles.
Core Commands
Before implementing changes, verify setup:
```bash
npx ultracite check # Identify issues
npx ultracite fix # Auto-fix formatting and linting issues
npx ultracite doctor # Diagnose configuration problems
```
Type Safety & Explicitness
**Always prioritize explicit types and clear intent:**
Declare function parameter types and return types when they enhance clarityUse `unknown` over `any` for genuinely unknown typesApply const assertions (`as const`) for immutable values and literal typesLeverage TypeScript's type narrowing instead of type assertions (`as Type`)Extract magic numbers into named constants with descriptive names**Example:**
```typescript
// Good
const MAX_RETRIES = 3 as const;
function fetchData(url: string): Promise<ApiResponse> { ... }
// Avoid
function fetchData(url) { ... } // Missing types
const retries = 3; // Magic number without context
```
Modern JavaScript/TypeScript Patterns
Use arrow functions for callbacks and concise functionsPrefer `for...of` loops over `.forEach()` and indexed `for` loopsUse optional chaining (`?.`) and nullish coalescing (`??`) for safe property accessPrefer template literals over string concatenationUse destructuring for object/array assignmentsDefault to `const`; use `let` only when reassignment is needed; never use `var`Async & Promises
Always `await` promises in async functions and use the returned valueUse `async/await` syntax instead of promise chains for readabilityWrap async code in try-catch blocks for proper error handlingNever use async functions as Promise executorsReact & JSX Best Practices
Use function components exclusively (avoid class components)Call hooks at the top level only—never conditionally or in loopsSpecify all dependencies correctly in hook dependency arraysUse the `key` prop for list elements (prefer unique IDs over array indices)Nest children between opening/closing tags instead of passing as propsNever define components inside other componentsUse semantic HTML and ARIA attributes: - Provide meaningful `alt` text for images
- Use proper heading hierarchy (`<h1>` to `<h6>`)
- Add labels for form inputs
- Include keyboard event handlers alongside mouse events
- Use semantic elements (`<button>`, `<nav>`, `<main>`) instead of divs with ARIA roles
Error Handling & Debugging
Remove `console.log`, `debugger`, and `alert` from production codeThrow `Error` objects with descriptive messages, not stringsUse try-catch meaningfully—avoid catching errors just to rethrowPrefer early returns for error cases to reduce nestingCode Organization
Keep functions focused and under reasonable cognitive complexityExtract complex conditions into well-named boolean variablesUse early returns to reduce nesting depthPrefer simple conditionals over nested ternary operatorsGroup related code together and separate concernsSecurity
Add `rel="noopener"` when using `target="_blank"` on linksAvoid `dangerouslySetInnerHTML` unless absolutely necessaryNever use `eval()` or assign directly to `document.cookie`Always validate and sanitize user inputPerformance
Avoid spread syntax in accumulators within loopsUse top-level regex literals instead of creating them inside loopsPrefer named imports over namespace imports (`import * as`)Avoid barrel files (index files that re-export everything)Use proper image components (e.g., Next.js `<Image>`) over `<img>` tagsFramework-Specific Guidance
**Next.js:**
Use Next.js `<Image>` component for optimized imagesUse `next/head` or App Router metadata API for head elementsUse Server Components for async data fetching instead of async Client Components**React 19+:**
Use `ref` as a prop directly instead of `React.forwardRef`**Solid/Svelte/Vue/Qwik:**
Use `class` and `for` attributes (not `className` or `htmlFor`)Testing Standards
Write assertions inside `it()` or `test()` blocksUse `async/await` in async tests instead of done callbacksDon't commit tests with `.only` or `.skip`Keep test suites reasonably flat—avoid excessive `describe` nestingWhat Biome Can't Validate
Focus manual review on areas Biome cannot automate:
1. **Business logic correctness** - Algorithm validity
2. **Meaningful naming** - Descriptive function, variable, and type names
3. **Architecture decisions** - Component structure, data flow, API design
4. **Edge cases** - Boundary conditions and error states
5. **User experience** - Accessibility, performance, usability
6. **Documentation** - Comments for complex logic (prefer self-documenting code)
Implementation Checklist
When writing code:
1. Follow all type safety and explicitness rules
2. Use modern JavaScript/TypeScript patterns
3. Handle async operations correctly with try-catch
4. Apply React and accessibility best practices
5. Remove debugging statements before committing
6. Run `npx ultracite fix` before finalizing changes
7. Verify issues are resolved with `npx ultracite check`
Constraints
Never bypass Biome rules without documented justificationPrioritize accessibility in all UI codeSecurity checks are mandatory for user input and external linksAll production code must pass `npx ultracite check` without errors