code-standards_skill

Overview

This skill defines Next.js 16 App Router and TypeScript coding standards tailored for a Mario Kart world player web app. It guides AI agents and developers to produce consistent, type-safe, and maintainable code with clear conventions for components, state, styling, and i18n.

How this skill works

The skill inspects code for adherence to a checklist: strict TypeScript settings, App Router directory structure, Jotai atom patterns, Tailwind usage, and i18next configuration. It flags forbidden libraries, suggests replacements, and provides concrete patterns and anti-patterns to enforce consistency during development, code review, and refactors.

When to use it

• When creating new React components or pages with App Router
• During code review to verify project conventions and type safety
• When refactoring code to reduce technical debt and improve maintainability
• When defining or updating global state using Jotai atoms
• When adding styling, responsiveness, or accessibility attributes
• When setting up or updating internationalization with i18next

Best practices

• Enable TypeScript strict mode and avoid any by using precise interfaces/types
• Prefer function components and follow React hooks rules; mark files with 'use client' only when necessary
• Use Jotai for global state; define typed atoms and avoid direct state mutation
• Use Tailwind CSS classes for styling and ensure responsive, accessible UI with aria attributes
• Use native fetch for network calls and optimize images and bundles with Next.js techniques

Example use cases

• Implementing a player profile component with typed props, Jotai state, and Tailwind styles
• Running automated checks during PR review to ensure no banned libraries or any types are introduced
• Refactoring a large component into smaller <200-line units, preserving type safety and performance
• Adding a new language: structure i18next JSON files and integrate translations in components
• Creating a Jotai atom for leaderboard data and consuming it with useAtomValue across pages