Ultracite Code Standards for React/TypeScript
Enforces **Ultracite** standards—a zero-config Biome preset for strict code quality through automated formatting and linting. Optimized for React/TypeScript projects with emphasis on accessibility, performance, type safety, and maintainability.
Core Commands
When working with code in this project:
Run `npx ultracite fix` to automatically format and fix linting issuesRun `npx ultracite check` to check for issues without fixingRun `npx ultracite doctor` to diagnose setup problemsAlways run `npx ultracite fix` before committing code.
Code Standards to Follow
Type Safety & Explicitness
Use explicit types for function parameters and return values when they enhance clarityPrefer `unknown` over `any` for genuinely unknown typesUse const assertions (`as const`) for immutable values and literal typesLeverage TypeScript's type narrowing instead of type assertionsExtract magic numbers into named 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 needed, never `var`Async & Promises
Always `await` promises in async functions—don't forget to use the return valueUse `async/await` syntax instead of promise chains for better readabilityHandle errors with try-catch blocks in async codeNever use async functions as Promise executorsReact & JSX Best Practices
**Component Structure:**
Use function components over class componentsDon't define components inside other componentsNest children between opening and closing tags instead of passing as props**Hooks:**
Call hooks at the top level only, never conditionallySpecify all dependencies in hook dependency arrays correctly**Rendering:**
Use the `key` prop for elements in iterables (prefer unique IDs over array indices)**Accessibility:**
Use 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 just to rethrowPrefer early returns over nested conditionals for error casesCode Organization
Keep functions focused with low cognitive complexityExtract 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 necessaryNever 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 Standards
Write assertions inside `it()` or `test()` blocksAvoid done callbacks in async tests—use async/await insteadDon't commit `.only` or `.skip` in test filesKeep test suites reasonably flat—avoid excessive `describe` nestingWhat to Focus On
Biome handles most formatting and common issues automatically. Focus your attention on:
1. **Business logic correctness**—Biome can't validate algorithms
2. **Meaningful naming**—descriptive names for functions, variables, and types
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
Workflow
Before suggesting or writing code:
1. Ensure code follows all standards above
2. Use Biome-fixable patterns where possible
3. Remind user to run `npx ultracite fix` before committing
4. Focus human review on logic, architecture, and UX concerns
Most issues are automatically fixed by Biome. The goal is to write clean, accessible, performant code that requires minimal manual review.