Ultracite Code Standards for Copilot

This skill configures GitHub Copilot to follow **Ultracite** code standards, a zero-config Biome preset that enforces strict code quality through automated formatting and linting.

Overview

Ultracite provides extremely fast Rust-based linting and formatting via Biome. Most issues are automatically fixable. This skill ensures AI-generated code adheres to modern TypeScript/React best practices.

Quick Reference Commands

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

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

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

Core Principles

When generating code, prioritize **accessibility, performance, type safety, and maintainability**. 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

**Example:**

```typescript

// Good

const MAX_RETRIES = 3;

function processData(input: unknown): Result {

if (typeof input === 'string') {

return { success: true, data: input };

}

return { success: false };

}

// Avoid

function processData(input: any) {

return input;

}

```

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

const user = { name: 'Alice', email: null };

const displayEmail = user.email ?? 'No email';

for (const item of items) {

console.log(item);

}

// Avoid

var displayEmail = user.email || 'No email';

items.forEach(function(item, index) {

console.log(items[index]);

});

```

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

async function fetchUser(id: string): Promise<User> {

try {

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

return await response.json();

} catch (error) {

throw new Error(`Failed to fetch user: ${error}`);

}

// Avoid

function fetchUser(id: string): Promise<User> {

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

.then(r => r.json())

.catch(e => { throw e; });

}

```

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

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

const [selected, setSelected] = useState<string | null>(null);

useEffect(() => {

console.log('Selected user changed:', selected);

}, [selected]);

return (

<ul>

{users.map(user => (

<li key={user.id} onClick={() => setSelected(user.id)}>

{user.name}

</li>

))}

</ul>

);

}

// Avoid

function UserList({ users }) {

if (users.length > 0) {

const [selected, setSelected] = useState(null); // Conditional hook

}

return users.map((user, index) => <li key={index}>{user.name}</li>);

}

```

Accessibility Standards

Use semantic HTML and ARIA attributes for accessibility:

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>`, `<main>`) instead of divs with roles

**Example:**

```tsx

// Good

</button>

// Avoid

<img src="/icon.png" /> {/* Missing alt text */}

</div>

```

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

function processPayment(amount: number): void {

if (amount <= 0) {

throw new Error('Payment amount must be positive');

}

// Process payment

}

// Avoid

function processPayment(amount: number): void {

try {

if (amount <= 0) throw 'Invalid amount'; // String instead of Error

console.log('Processing:', amount); // Debug statement

} catch (e) {

throw e; // Useless catch

}

```

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

function canPurchase(user: User, product: Product): boolean {

const hasEnoughFunds = user.balance >= product.price;

const isProductAvailable = product.stock > 0;

const isVerifiedUser = user.verified;

return hasEnoughFunds && isProductAvailable && isVerifiedUser;

}

// Avoid

function canPurchase(user: User, product: Product): boolean {

return user.balance >= product.price ? product.stock > 0 ? user.verified ? true : false : false : false;

}

```

Security Best Practices

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

```

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';

const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

// Avoid

import * as React from 'react';

function validate(emails: string[]) {

for (const email of emails) {

const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; // Created in loop

}

```

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 Standards

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 user = await fetchUser('123');

expect(user.name).toBe('Alice');

});

// Avoid

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

fetchUser('123').then(user => {

expect(user.name).toBe('Alice');

done();

});

```

When Biome Can't Help

Biome's linter will catch most issues automatically. Focus your 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:

1. Run `npx ultracite fix` to automatically fix formatting and common issues

2. Run `npx ultracite check` to verify no linting errors remain

3. Review any remaining warnings and address them manually

Most formatting and common issues are automatically fixed by Biome. The skill ensures all generated code complies with these standards by default.

Ultracite Code Standards for Copilot

Safety Concern

Ultracite Code Standards for Copilot

Overview

Quick Reference Commands

Core Principles

Type Safety & Explicitness

Modern JavaScript/TypeScript

Async & Promises

React & JSX

Accessibility Standards

Error Handling & Debugging

Code Organization

Security Best Practices

Performance Optimization

Framework-Specific Guidance

Next.js

React 19+

Solid/Svelte/Vue/Qwik

Testing Standards

When Biome Can't Help

Workflow Integration

Reviews (0)