Ultracite Code Standards for Chat Template

This skill enforces **Ultracite** code quality standards for TypeScript/React projects, particularly those using the AI SDK. Ultracite is a zero-config Biome preset providing fast Rust-based linting and formatting.

Quick Commands

When working in this codebase:

Core Principles

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

Type Safety & Explicitness

1. **Explicit types**: Add type annotations to function parameters and return values when they enhance clarity

2. **Prefer `unknown` over `any`** when the type is genuinely unknown

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

4. **Leverage type narrowing** instead of type assertions (`as`)

5. **Extract magic numbers** into named constants with descriptive names

Modern JavaScript/TypeScript Patterns

1. **Arrow functions** for callbacks and short functions

2. **`for...of` loops** over `.forEach()` and indexed `for` loops

3. **Optional chaining** (`?.`) and **nullish coalescing** (`??`) for safe property access

4. **Template literals** over string concatenation

5. **Destructuring** for object and array assignments

6. **`const` by default**, `let` only when reassignment needed, never `var`

Async & Promises

1. **Always `await` promises** in async functions—don't forget to use the return value

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

3. **Handle errors** with try-catch blocks in async code

4. **Don't use async functions** as Promise executors

React & JSX Best Practices

1. **Function components** over class components

2. **Call hooks at the top level** only—never conditionally

3. **Specify all dependencies** correctly in hook dependency arrays

4. **Use `key` prop** for elements in iterables (prefer unique IDs over array indices)

5. **Nest children** between opening and closing tags instead of passing as props

6. **Don't define components** inside other components

Accessibility (A11Y)

1. **Meaningful alt text** for images

2. **Proper heading hierarchy** (h1 → h2 → h3)

3. **Labels for form inputs** (associated with `id` or wrapped)

4. **Keyboard event handlers** alongside mouse events

5. **Semantic HTML** (`<button>`, `<nav>`, etc.) instead of `<div>` with roles

Error Handling & Debugging

1. **Remove `console.log`, `debugger`, `alert`** from production code

2. **Throw `Error` objects** with descriptive messages, not strings

3. **Use try-catch meaningfully**—don't catch just to rethrow

4. **Prefer early returns** over nested conditionals for error cases

Code Organization

1. **Keep functions focused** and under reasonable cognitive complexity

2. **Extract complex conditions** into well-named boolean variables

3. **Use early returns** to reduce nesting

4. **Prefer simple conditionals** over nested ternary operators

5. **Group related code** together and separate concerns

Security

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

2. **Avoid `dangerouslySetInnerHTML`** unless absolutely necessary

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

4. **Validate and sanitize** user input

Performance

1. **Avoid spread syntax** in accumulators within loops

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

3. **Prefer specific imports** over namespace imports

4. **Avoid barrel files** (index files that re-export everything)

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

Framework-Specific Guidance

Next.js

React 19+

Solid/Svelte/Vue/Qwik

Testing

1. **Write assertions** inside `it()` or `test()` blocks

2. **Avoid done callbacks** in async tests—use async/await

3. **Don't commit `.only` or `.skip`** in test code

4. **Keep test suites reasonably flat**—avoid excessive `describe` nesting

When Biome Can't Help

Focus your attention on areas Biome can't validate:

1. **Business logic correctness** (algorithms, edge cases)

2. **Meaningful naming** (functions, variables, types)

3. **Architecture decisions** (component structure, data flow, API design)

4. **User experience** (accessibility, performance, usability)

5. **Documentation** (comments for complex logic; prefer self-documenting code)

Workflow

Before committing:

```bash

npx ultracite fix

```

This automatically formats code and fixes most linting issues. Review remaining warnings and errors manually.