Ultracite Code Standards

Enforce strict code quality standards using **Ultracite**, a zero-config Biome preset that provides automated formatting and linting for TypeScript/JavaScript projects.

Overview

This skill applies Ultracite code standards to ensure **accessible, performant, type-safe, and maintainable** code. Biome provides extremely fast Rust-based linting and formatting with automatic fixes for most issues.

Commands

**Format code**: `npx ultracite fix`

**Check for issues**: `npx ultracite check`

**Diagnose setup**: `npx ultracite doctor`

Type Safety & Explicitness

When writing or reviewing code, ensure:

Explicit types for function parameters and return values when they enhance clarity

Prefer `unknown` over `any` for genuinely unknown types

Use const assertions (`as const`) for immutable values and literal types

Leverage TypeScript's type narrowing instead of type assertions

Extract magic numbers into named constants with descriptive names

**Example:**

```typescript

// Good

const MAX_RETRIES = 3 as const;

function fetchData(url: string): Promise<Data> { ... }

// Avoid

function fetchData(url) { ... }

const retries = 3; // magic number without context

```

Modern JavaScript/TypeScript Practices

Follow these modern patterns:

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`

**Example:**

```typescript

// Good

const fullName = `${user.firstName} ${user.lastName}`;

const email = user?.contact?.email ?? '[email protected]';

// Avoid

var fullName = user.firstName + ' ' + user.lastName;

```

Async & Promises

Always `await` promises in async functions - don't ignore return values

Use `async/await` syntax instead of promise chains for readability

Handle errors with try-catch blocks in async code

Don't use async functions as Promise executors

**Example:**

```typescript

// Good

async function loadData() {

try {

const response = await fetch(url);

return await response.json();

} catch (error) {

console.error('Failed to load data:', error);

throw error;

}

// Avoid

function loadData() {

fetch(url).then(r => r.json()).then(data => { ... });

}

```

React & JSX Best Practices

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

**Example:**

```tsx

// Good

function UserList({ users }: { users: User[] }) {

return (

<ul>

{users.map(user => (

))}

</ul>

);

}

// Avoid

function UserList({ users }) {

return (

<ul>

{users.map((user, index) => (

))}

</ul>

);

}

```

Accessibility Requirements

Use semantic HTML and ARIA attributes:

Provide meaningful alt text for images

Use proper heading hierarchy (h1 → h2 → h3)

Add labels for form inputs

Include keyboard event handlers alongside mouse events

Use semantic elements (`<button>`, `<nav>`, etc.) instead of divs with roles

**Example:**

```tsx

// Good

Submit

</button>

// Avoid

<div onClick={handleClick}>Submit</div>

```

Error Handling & Debugging

Remove `console.log`, `debugger`, and `alert` statements from production code

Throw `Error` objects with descriptive messages, not strings

Use `try-catch` blocks meaningfully - don't catch errors just to rethrow them

Prefer early returns over nested conditionals for error cases

**Example:**

```typescript

// Good

function processUser(user: User | null) {

if (!user) {

throw new Error('User cannot be null');

}

// Process user...

}

// Avoid

function processUser(user) {

if (user) {

// deeply nested logic...

}

```

Code Organization

Keep functions focused and under reasonable cognitive complexity limits

Extract complex conditions into well-named boolean variables

Use early returns to reduce nesting

Prefer simple conditionals over nested ternary operators

Group related code together and separate concerns

**Example:**

```typescript

// Good

const isEligibleForDiscount = user.isPremium && order.total > 100;

if (!isEligibleForDiscount) return regularPrice;

// Avoid

return user.isPremium && order.total > 100 ? discountedPrice : regularPrice;

```

Security Guidelines

Add `rel="noopener"` when using `target="_blank"` on links

Avoid `dangerouslySetInnerHTML` unless absolutely necessary

Don't use `eval()` or assign directly to `document.cookie`

Validate and sanitize user input

**Example:**

```tsx

// Good

External Link

</a>

// Avoid

<a href={externalUrl} target="_blank">External Link</a>

```

Performance Optimization

Avoid spread syntax in accumulators within loops

Use top-level regex literals instead of creating them in loops

Prefer specific imports over namespace imports

Avoid barrel files (index files that re-export everything)

Use proper image components (e.g., Next.js `<Image>`) over `<img>` tags

**Example:**

```typescript

// Good

import { useState, useEffect } from 'react';

// Avoid

import * as React from 'react';

```

Framework-Specific Guidance

Next.js

Use Next.js `<Image>` component for images

Use `next/head` or App Router metadata API for head elements

Use 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 Best Practices

Write assertions inside `it()` or `test()` blocks

Avoid done callbacks in async tests - use async/await instead

Don't use `.only` or `.skip` in committed code

Keep test suites reasonably flat - avoid excessive `describe` nesting

**Example:**

```typescript

// Good

test('fetches user data', async () => {

const data = await fetchUser(123);

expect(data.name).toBe('John Doe');

});

// Avoid

test.only('fetches user data', (done) => {

fetchUser(123).then(data => {

expect(data.name).toBe('John Doe');

done();

});

```

Areas Requiring Manual Review

Biome's linter catches most issues automatically. Focus your attention on:

1. **Business logic correctness** - Validate algorithms and data transformations

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 Integration

**Before committing code:**

```bash

npx ultracite fix

```

This ensures all formatting and auto-fixable linting issues are resolved before code review.

Important Notes

Most formatting and common issues are automatically fixed by Biome

Run `npx ultracite fix` before committing to ensure compliance

Biome is extremely fast (Rust-based) and can process large codebases in milliseconds

The configuration is zero-config by design - no manual setup required

Ultracite Code Standards

Safety Concern

Ultracite Code Standards

Overview

Commands

Type Safety & Explicitness

Modern JavaScript/TypeScript Practices

Async & Promises

React & JSX Best Practices

Accessibility Requirements

Error Handling & Debugging

Code Organization

Security Guidelines

Performance Optimization

Framework-Specific Guidance

Next.js

React 19+

Solid/Svelte/Vue/Qwik

Testing Best Practices

Areas Requiring Manual Review

Workflow Integration

Important Notes

Reviews (0)