Ultracite Code Standards for TypeScript/React

This skill enforces strict code quality standards using **Ultracite**, a zero-config Biome preset. It provides comprehensive guidelines for writing accessible, performant, type-safe, and maintainable TypeScript and React code.

Overview

Ultracite leverages Biome's Rust-based engine for extremely fast linting and formatting. Most issues are automatically fixable, allowing you to focus on higher-level code quality concerns.

Quick Commands

When working with Ultracite in a project:

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

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

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

Core Principles

Follow these principles when writing or reviewing code:

1. 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

Extract magic numbers into named constants with descriptive names

**Example:**

```typescript

// Good - explicit types and named constants

const MAX_RETRIES = 3;

function fetchData(url: string): Promise<Response> {

return fetch(url);

}

// Avoid - magic numbers and implicit types

function fetchData(url) {

if (retries > 3) return;

return fetch(url);

}

```

2. 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`

**Example:**

```typescript

// Good - modern patterns

const userName = user?.profile?.name ?? 'Anonymous';

for (const item of items) {

console.log(`Processing ${item.name}`);

}

// Avoid - old patterns

var userName = user && user.profile && user.profile.name || 'Anonymous';

items.forEach((item, i) => {

console.log('Processing ' + items[i].name);

});

```

3. 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

**Example:**

```typescript

// Good - proper async/await with error handling

async function loadUserData(id: string) {

try {

const response = await fetch(`/api/users/${id}`);

const data = await response.json();

return data;

} catch (error) {

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

throw error;

}

// Avoid - unhandled promises and chains

function loadUserData(id: string) {

fetch(`/api/users/${id}`)

.then(response => response.json());

}

```

4. 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

**Example:**

```typescript

// Good - proper React patterns

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

const [filter, setFilter] = useState('');

const filteredUsers = useMemo(

() => users.filter(u => u.name.includes(filter)),

[users, filter]

);

return (

<ul>

{filteredUsers.map(user => (

))}

</ul>

);

}

// Avoid - defining components inside, missing dependencies

function UserList({ users }) {

const [filter, setFilter] = useState('');

const filteredUsers = useMemo(

() => users.filter(u => u.name.includes(filter)),

[users] // Missing 'filter' dependency

);

function UserItem({ user }) { // Don't define components inside

return <li>{user.name}</li>;

}

return <ul>{filteredUsers.map((user, i) => <UserItem key={i} user={user} />)}</ul>;

}

```

5. Accessibility

Use semantic HTML and ARIA attributes for accessible interfaces:

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

**Example:**

```typescript

// Good - accessible form

<form>

<label htmlFor="email">Email address</label>

<button type="submit">Submit</button>

</form>

// Avoid - inaccessible form

<div>

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

</div>

```

6. Error Handling & Debugging

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

Throw `Error` objects with descriptive messages, not strings or other values

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 - proper error handling with early returns

function processOrder(order: Order): ProcessedOrder {

if (!order.items.length) {

throw new Error('Order must contain at least one item');

}

if (!order.customerId) {

throw new Error('Order must have a customer ID');

}

return {

id: order.id,

total: calculateTotal(order.items)

};

}

// Avoid - nested conditionals and string errors

function processOrder(order) {

if (order.items.length > 0) {

if (order.customerId) {

return {

id: order.id,

total: calculateTotal(order.items)

};

} else {

throw 'No customer ID';

}

} else {

throw 'No items';

}

```

7. 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 - clear, focused function with early returns

function canUserEditPost(user: User, post: Post): boolean {

if (!user) return false;

const isAuthor = post.authorId === user.id;

const isAdmin = user.role === 'admin';

const isWithinEditWindow = Date.now() - post.createdAt < 3600000;

return isAuthor && isWithinEditWindow || isAdmin;

}

// Avoid - nested conditionals

function canUserEditPost(user, post) {

if (user) {

if (post.authorId === user.id) {

if (Date.now() - post.createdAt < 3600000) {

return true;

}

} else if (user.role === 'admin') {

return true;

}

return false;

}

```

8. Security

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:**

```typescript

// Good - secure external link

External Link

</a>

// Avoid - security risk

<a href="https://example.com" target="_blank">External Link</a>

```

9. Performance

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 - efficient accumulation

const result = items.reduce((acc, item) => {

acc.push(item.value);

return acc;

}, [] as string[]);

// Avoid - inefficient spread in loop

const result = items.reduce((acc, item) => [...acc, item.value], []);

```

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 - clean async test

it('should fetch user data', async () => {

const data = await fetchUserData('123');

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

});

// Avoid - done callback

it('should fetch user data', (done) => {

fetchUserData('123').then(data => {

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

done();

});

```

What Biome Can't Catch

Focus your manual review attention on:

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 Integration

Before committing code:

```bash

Fix all auto-fixable issues

npx ultracite fix

Verify no remaining issues

npx ultracite check

```

Consider adding these as pre-commit hooks to ensure compliance automatically.

Constraints

This skill applies to TypeScript and JavaScript files (`.ts`, `.tsx`, `.js`, `.jsx`)

Ultracite must be installed in the project (Biome is the underlying engine)

Most rules are auto-fixable; focus on the principles that require human judgment

Some rules may conflict with project-specific conventions - configure Biome accordingly if needed

Ultracite Code Standards for TypeScript/React

Safety Concern

Ultracite Code Standards for TypeScript/React

Overview

Quick Commands

Core Principles

1. Type Safety & Explicitness

2. Modern JavaScript/TypeScript

3. Async & Promises

4. React & JSX

5. Accessibility

6. Error Handling & Debugging

7. Code Organization

8. Security

9. Performance

Framework-Specific Guidance

Next.js

React 19+

Solid/Svelte/Vue/Qwik

Testing Best Practices

What Biome Can't Catch

Workflow Integration

Fix all auto-fixable issues

Verify no remaining issues

Constraints

Reviews (0)