Ultracite Code Standards
Enforce **Ultracite** code quality standards in your project - a zero-config Biome preset that provides strict automated formatting and linting for TypeScript/JavaScript codebases.
Overview
This skill guides you to write **accessible, performant, type-safe, and maintainable** code following Ultracite standards. Biome provides Rust-based linting and formatting with automatic fixes for most issues.
Commands
Before working with code, ensure Ultracite compliance:
**Format code**: `npx ultracite fix`**Check for issues**: `npx ultracite check`**Diagnose setup**: `npx ultracite doctor`Code Standards
Type Safety & Explicitness
When writing or reviewing code:
Add explicit types for function parameters and return values when they enhance clarityUse `unknown` over `any` when the type is genuinely unknownApply const assertions (`as const`) for immutable values and literal typesLeverage TypeScript's type narrowing instead of type assertionsExtract magic numbers into meaningfully-named constantsModern JavaScript/TypeScript Patterns
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 accessUse template literals over string concatenationUse destructuring for object and array assignmentsDefault to `const`, use `let` only when reassignment is needed, never use `var`Async & Promises
Always `await` promises in async functions - don't ignore return valuesUse `async/await` syntax instead of promise chains for better readabilityHandle errors in async code with try-catch blocksNever use async functions as Promise executorsReact & JSX Best Practices
Use function components over class componentsCall hooks at the top level only, never conditionallySpecify all dependencies correctly in hook dependency arraysUse the `key` prop for elements in iterables (prefer unique IDs over array indices)Nest children between opening and closing tags instead of passing as propsNever define components inside other components#### Accessibility (a11y)
Use semantic HTML and ARIA attributes:
Provide meaningful alt text for imagesUse proper heading hierarchyAdd labels for form inputsInclude keyboard event handlers alongside mouse eventsUse semantic elements (`<button>`, `<nav>`, etc.) instead of divs with rolesError Handling & Debugging
Remove `console.log`, `debugger`, and `alert` statements from production codeThrow `Error` objects with descriptive messages, not strings or other valuesUse `try-catch` blocks meaningfully - don't catch errors just to rethrow themPrefer early returns over nested conditionals for error casesCode Organization
Keep functions focused with reasonable 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 codeKeep test suites reasonably flat - avoid excessive `describe` nestingWhat Biome Can't Validate
Focus your manual review on areas Biome cannot automatically check:
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:
1. Run `npx ultracite fix` to automatically resolve formatting and fixable linting issues
2. Run `npx ultracite check` to verify compliance
3. Manually review code for business logic, naming, architecture, and edge cases
4. Ensure all tests pass and accessibility requirements are met
Notes
Most formatting and common issues are automatically fixed by BiomeThe underlying engine (Biome) is extremely fast due to its Rust implementationThis configuration applies to `**/*.{ts,tsx,js,jsx}` filesRun `npx ultracite doctor` if you encounter setup issues