Ultracite Code Standards
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.
Commands
**Format code**: `npx ultracite fix`**Check for issues**: `npx ultracite check`**Diagnose setup**: `npx ultracite doctor`Biome provides extremely fast Rust-based linting and formatting with automatic fixes for most issues.
Core Principles
Write code that prioritizes **accessibility, performance, type safety, and maintainability**. Focus on clarity and explicit intent over brevity.
Type Safety & Explicitness
Use explicit types for function parameters and return values when they enhance clarityPrefer `unknown` over `any` when the type is genuinely unknownUse const assertions (`as const`) for immutable values and literal typesLeverage TypeScript's type narrowing instead of type assertionsExtract magic numbers into constants with descriptive namesModern JavaScript/TypeScript
Use arrow functions for callbacks and short functionsPrefer `for...of` loops over `.forEach()` and indexed `for` loopsUse optional chaining (`?.`) and nullish coalescing (`??`) for safer property accessPrefer template literals over string concatenationUse destructuring for object and array assignmentsUse `const` by default, `let` only when reassignment is needed, never `var`Async & Promises
Always `await` promises in async functionsUse `async/await` syntax instead of promise chains for better readabilityHandle errors with try-catch blocks in async codeDon't use async functions as Promise executorsReact & JSX
Use function components over class componentsCall hooks at the top level only, never conditionallySpecify all dependencies in hook dependency arrays correctlyUse the `key` prop for elements in iterables (prefer unique IDs over array indices)Nest children between opening and closing tags instead of passing as propsDon't define components inside other componentsUse semantic HTML and ARIA attributes: - Provide meaningful alt text for images
- Use proper heading hierarchy
- Add labels for form inputs
- Include keyboard event handlers alongside mouse events
- Use semantic elements (`<button>`, `<nav>`, etc.) instead of divs with roles
Error Handling & Debugging
Remove `console.log`, `debugger`, and `alert` statements from production codeThrow `Error` objects with descriptive messages, not stringsUse `try-catch` blocks meaningfully—don't catch errors just to rethrow themPrefer early returns over nested conditionals for error casesCode Organization
Keep functions focused and under reasonable cognitive complexity limitsExtract complex conditions into well-named boolean variablesUse early returns to reduce nestingPrefer simple conditionals over nested ternary operatorsGroup related code together and separate concernsSecurity
Add `rel="noopener"` when using `target="_blank"` on linksAvoid `dangerouslySetInnerHTML` unless absolutely necessaryDon't use `eval()` or assign directly to `document.cookie`Validate and sanitize user inputPerformance
Avoid spread syntax in accumulators within loopsUse top-level regex literals instead of creating them in loopsPrefer specific imports over namespace importsAvoid 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 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 instead of `React.forwardRef`**Solid/Svelte/Vue/Qwik:**
Use `class` and `for` attributes (not `className` or `htmlFor`)Testing
Write assertions inside `it()` or `test()` blocksAvoid done callbacks in async tests—use async/await insteadDon't use `.only` or `.skip` in committed codeKeep test suites reasonably flat—avoid excessive `describe` nestingWhen Biome Can't Help
Focus your attention on areas Biome can't automatically validate:
1. **Business logic correctness** — Biome can't validate your algorithms
2. **Meaningful naming** — Use descriptive names for functions, variables, and types
3. **Architecture decisions** — Component structure, data flow, and API design
4. **Edge cases** — Handle boundary conditions and error states
5. **User experience** — Accessibility, performance, and usability considerations
6. **Documentation** — Add comments for complex logic, but prefer self-documenting code
Workflow
Before committing code, run `npx ultracite fix` to automatically resolve most formatting and linting issues. Review any remaining warnings and address them according to these standards.