Enforce strict TypeScript/React code quality with Ultracite (Biome preset). Covers type safety, modern JS/TS patterns, React best practices, accessibility, performance, and security for AI SDK chat templates.
This skill has safety concerns that you should review before use. Some patterns were detected that may pose a risk.Safety score: 75/100.
KillerSkills scans all public content for safety. Use caution before installing or executing flagged content.
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.
When working in this codebase:
Write code that is **accessible, performant, type-safe, and maintainable**. Prioritize clarity and explicit intent over brevity.
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
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`
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
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
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
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
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
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
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
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
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)
Before committing:
```bash
npx ultracite fix
```
This automatically formats code and fixes most linting issues. Review remaining warnings and errors manually.
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/ultracite-code-standards-for-chat-template/raw