code-standards
Enforces best practices and code standards for React and TypeScript projects using Biome.
Install
mkdir -p .claude/skills/code-standards && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/2662" && unzip -o skill.zip -d .claude/skills/code-standards && rm skill.zipInstalls to .claude/skills/code-standards
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
TypeScript, React, and JavaScript best practices enforced by Ultracite/Biome.Key capabilities
- →Format and fix code style violations
- →Check for linting and style issues
- →Diagnose project setup configuration
- →Enforce specific rules for React components and async code
How it works
The tool uses Biome to enforce TypeScript, React, and JavaScript standards. It provides commands to automatically fix style issues or check for violations.
Inputs & outputs
When to use code-standards
- →Fix linting errors in React components
- →Reformat codebase to match project standards
- →Diagnose project setup issues
About this skill
Code Standards
Write code that is accessible, performant, type-safe, and maintainable.
Activation Conditions
- Linting errors need fixing
- Code formatting issues
- Code review feedback
- Questions about style guidelines
Quick Reference
| Action | Rule |
|---|---|
| Write components | react-functional-only.md |
| Async code | async-await-promises.md |
| Avoid legacy libs | no-legacy.md |
any types and top-level regex are enforced by Biome (noExplicitAny, useTopLevelRegex).
Commands
bun x ultracite fix # Format and fix
bun x ultracite check # Check for issues
bun x ultracite doctor # Diagnose setup
Quick Fix
Most issues are auto-fixed:
bun x ultracite fix
Console Logging
- Never use
console.log,console.debug, orconsole.infoin production code - Only use
console.errorandconsole.warnfor actionable errors - For debug logging, wrap in
if (IsDev) { ... } - Don't use
biome-ignoreto suppress console warnings - remove the logs instead
Rules
See rules/ directory for detailed guidance.
When not to use it
- →When production code requires console logging
- →When suppressing console warnings via biome-ignore
Limitations
- →Prohibits use of console.log, console.debug, and console.info in production
- →Enforces specific rules like noExplicitAny and useTopLevelRegex
How it compares
Unlike manual linting, this tool provides an automated doctor command to diagnose and fix project setup issues.
Compared to similar skills
code-standards side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| code-standards (this skill) | 2 | 5mo | Review | Beginner |
| js-tosorted-immutable | 1 | 6mo | No flags | Beginner |
| writing-react-effects | 1 | 3mo | No flags | Intermediate |
| rerender-functional-setstate | 1 | 6mo | No flags | Beginner |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by redpanda-data
View all by redpanda-data →You might also like
js-tosorted-immutable
TheOrcDev
Use toSorted() instead of sort() to avoid mutating arrays. Apply when sorting arrays that are React props, state, or otherwise shared/referenced elsewhere.
writing-react-effects
dust-tt
Writes React components without unnecessary useEffect. Use when creating/reviewing React components, refactoring effects, or when code uses useEffect to transform data or handle events.
rerender-functional-setstate
TheOrcDev
Use functional setState updates to prevent stale closures and unnecessary callback recreations. Apply when updating state based on the current state value in React components.
tsh-writing-hooks
TheSoftwareHouse
Custom hook and composable patterns — naming, composition, stable return shapes, lifecycle cleanup, and testing strategies. Use when writing reusable logic units (React hooks, Vue composables), refactoring logic into hooks, debugging hook behavior, or reviewing hook implementations.
accessibility-compliance
wshobson
Implement WCAG 2.2 compliant interfaces with mobile accessibility, inclusive design patterns, and assistive technology support. Use when auditing accessibility, implementing ARIA patterns, building for screen readers, or ensuring inclusive user experiences.
react-modernization
wshobson
Upgrade React applications to latest versions, migrate from class components to hooks, and adopt concurrent features. Use when modernizing React codebases, migrating to React Hooks, or upgrading to latest React versions.