code-style

Enforce TypeScript coding conventions and project structure for Oak AI applications.

31|4|Updated Aug 21, 2024
One-click install
npx skills add https://github.com/oaknational/oak-ai-lesson-assistant --skill code-style-oaknational
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: code-style
Source: https://github.com/oaknational/oak-ai-lesson-assistant/tree/main/.claude/skills/code-style
Command: npx skills add https://github.com/oaknational/oak-ai-lesson-assistant --skill code-style-oaknational

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill codifies TypeScript coding conventions and best practices to ensure consistent, maintainable code.

Core Features & Use Cases

  • General principles: Strict TypeScript with explicit return types, noUncheckedIndexedAccess; import sorting; formatting.
  • Naming conventions: Files: kebab-case; Components: PascalCase; Variables: camelCase; Types: PascalCase; Constants: UPPER_CASE; Hooks: prefix with "use".
  • Component structure: Functional components with "use client" directive; export order; helper functions and types placement.
  • State management: Zustand stores, useState, useReducer, TanStack Query.
  • Error handling: Always await promises; use cause when rethrowing; structured errors; user-friendly messages.
  • tRPC: Router organization; procedures; middleware.
  • Testing patterns: Unit tests w/ Jest, component tests w/ React Testing Library, E2E with Playwright.

Quick Start

Create a new module following the conventions: kebab-case filenames, PascalCase components, and run lint and type-check to verify. Use "use client" for client components.

Frequently Asked Questions about code-style

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I enforce consistent TypeScript naming conventions across my project?

TypeScript naming conventions enforce consistency through file, component, and variable standards: use kebab-case for filenames, PascalCase for components and types, camelCase for variables, UPPER_CASE for constants, and 'use' prefix for hooks. Configure linting rules to validate these patterns automatically across your codebase.

What are the best practices for structuring TypeScript components with strict typing?

Structure TypeScript components functionally with explicit return types, enable noUncheckedIndexedAccess for strict safety, use 'use client' directive for client components, organize exports consistently, and place helper functions and types within the same module. This ensures type safety and maintainability across your Oak AI application.

How do I handle errors properly in TypeScript with cause chaining?

Error handling in TypeScript requires always awaiting promises, rethrowing errors with cause to preserve the original stack trace, structuring errors with context, and providing user-friendly messages. This pattern maintains debugging clarity while delivering appropriate feedback to users.

How should I organize tRPC routers and procedures in my TypeScript project?

Organize tRPC through router structure, procedure definitions, and middleware patterns aligned with your project's kebab-case file naming and camelCase identifier conventions. This ensures consistent API routing while maintaining the coding standards enforced across your application.

What testing patterns should I follow for TypeScript code in a tRPC application?

Testing patterns include unit tests with Jest, component tests with React Testing Library for UI validation, and E2E tests with Playwright for full workflows. These standardized patterns ensure comprehensive coverage and consistency with your TypeScript coding standards.

Can I use Zustand with TypeScript strict typing and state management conventions?

Yes. Zustand stores integrate with strict TypeScript through explicit typing, supporting useState, useReducer, and TanStack Query alongside Zustand for state management. This creates consistent, type-safe state handling aligned with your project's conventions.