Ultracite Code Standards

Enforce strict code quality standards using **Ultracite**, a zero-config Biome preset that provides extremely fast Rust-based linting and formatting. This skill helps you write accessible, performant, type-safe, and maintainable code across JavaScript/TypeScript projects.

Overview

Ultracite provides automated code quality enforcement through Biome. When working on code, apply these standards to ensure consistency and catch common issues before they reach production.

Quick Commands

When you encounter code quality issues or need to format code:

**Auto-fix issues**: `npx ultracite fix`

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

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

Core Principles to Apply

Focus on code that is **accessible, performant, type-safe, and maintainable**. Prioritize clarity and explicit intent over brevity.

Type Safety & Explicitness

When writing TypeScript code:

Add explicit types for function parameters and return values when they enhance clarity

Use `unknown` instead of `any` when the type is genuinely unknown

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

Rely on TypeScript's type narrowing rather than type assertions

Extract magic numbers into named constants with descriptive names

Modern JavaScript/TypeScript Patterns

Apply these modern patterns consistently:

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

Use template literals instead of string concatenation

Destructure objects and arrays for cleaner assignments

Use `const` by default, `let` only when reassignment is needed, never `var`

Async & Promises

When working with asynchronous code:

Always `await` promises in async functions and use the return value

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

Handle errors with try-catch blocks in async code

Never use async functions as Promise executors

React & JSX Best Practices

When writing React components:

Use function components over class components

Call hooks at the top level only, never conditionally

Specify all dependencies correctly in hook dependency arrays

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

Never define components inside other components

Use semantic HTML and ARIA attributes for accessibility:

- Provide meaningful alt text for images

- Use proper heading hierarchy (h1 → h2 → h3)

- Add labels for all form inputs

- Include keyboard event handlers alongside mouse events

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

Error Handling & Debugging

Keep production code clean:

Remove `console.log`, `debugger`, and `alert` statements before committing

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

Use `try-catch` blocks meaningfully - avoid catching errors just to rethrow them

Prefer early returns over nested conditionals for error cases

Code Organization

Keep code maintainable:

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

Security Guidelines

Protect against common vulnerabilities:

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

Avoid `dangerouslySetInnerHTML` unless absolutely necessary

Never use `eval()` or assign directly to `document.cookie`

Always validate and sanitize user input

Performance Optimization

Write efficient code:

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

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

When writing tests:

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

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

Never commit `.only` or `.skip` in test code

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

Beyond Automated Linting

While Biome catches most issues automatically, focus your attention on:

1. **Business logic correctness** - Validate your algorithms and logic flows

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 thoughtfully

5. **User experience** - Consider accessibility, performance, and usability

6. **Documentation** - Add comments for complex logic, but prefer self-documenting code

File Scope

This skill applies to all TypeScript and JavaScript files: `**/*.{ts,tsx,js,jsx}`

Workflow Integration

Before committing code, always run:

```bash

npx ultracite fix

```

This ensures all automatically fixable issues are resolved and code is formatted consistently.

Ultracite Code Standards

Safety Concern

Ultracite Code Standards

Overview

Quick Commands

Core Principles to Apply

Type Safety & Explicitness

Modern JavaScript/TypeScript Patterns

Async & Promises

React & JSX Best Practices

Error Handling & Debugging

Code Organization

Security Guidelines

Performance Optimization

Framework-Specific Guidance

Testing Standards

Beyond Automated Linting

File Scope

Workflow Integration

Reviews (0)