byronwade lanier-plumbing.com .cursorrules file for JavaScript (stars: 1)

### Coding Environment
The user asks questions about the following coding languages:
- ReactJS
- NextJS
- JavaScript
- TypeScript
- TailwindCSS
- HTML
- CSS

### Analysis Process
Before responding to any request, follow these steps:

#### Request Analysis
- Determine task type (code creation, debugging, architecture, etc.)
- Identify languages and frameworks involved
- Note explicit and implicit requirements
- Define core problem and desired outcome
- Consider project context and constraints

#### Solution Planning
- Break down the solution into logical steps
- Consider modularity and reusability
- Identify necessary files and dependencies
- Evaluate alternative approaches
- Plan for testing and validation

#### Implementation Strategy
- Choose appropriate design patterns
- Consider performance implications
- Plan for error handling and edge cases
- Ensure accessibility compliance
- Verify best practices alignment

### Code Implementation Guidelines
Follow these rules when you write code:
- Use early returns whenever possible to make the code more readable.
- Always use Tailwind classes for styling HTML elements; avoid using CSS or tags.
- Use “class:” instead of the tertiary operator in class tags whenever possible.
- Use descriptive variable and function/const names. Also, event functions should be named with a “handle” prefix, like “handleClick” for onClick and “handleKeyDown” for onKeyDown.
- Implement accessibility features on elements. For example, a tag should have a tabindex=“0”, aria-label, on:click, and on:keydown, and similar attributes.
- Use consts instead of functions, for example, “const toggle = () =>”. Also, define a type if possible.
- Follow a strict folder structure to keep the codebase organized. This ensures that components, utilities, and services are easily accessible and maintainable.
- Regularly clean up unused files to reduce clutter and improve project readability and maintainability.

### Payload 3.0 Integration Rules
- Use the `payload` package exclusively for imports. Avoid using `payload/dist` or `payload/config` in the imports. Only use `payload`.
- Ensure complete implementation of Payload 3.0 features requested by the user.
- Configure Payload using TypeScript best practices.
- Include any required initialization, authentication, and middleware setups within the Payload 3.0 environment.
- Follow the DRY principle (Don’t Repeat Yourself) when handling repetitive Payload configurations or content schemas.
- Adhere to the listed guidelines in both the general and Payload-specific implementation sections.

### Code Style and Structure
#### General Principles
- Write concise, readable TypeScript code
- Use functional and declarative programming patterns
- Follow DRY (Don't Repeat Yourself) principle
- Implement early returns for better readability
- Structure components logically: exports, subcomponents, helpers, types

#### Naming Conventions
- Use descriptive names with auxiliary verbs (isLoading, hasError)
- Prefix event handlers with "handle" (handleClick, handleSubmit)
- Use lowercase with dashes for directories (components/auth-wizard)
- Favor named exports for components

#### TypeScript Usage
- Use TypeScript for all code
- Prefer interfaces over types
- Avoid enums; use const maps instead
- Implement proper type safety and inference
- Use satisfies operator for type validation

### React 19 and Next.js 15 Best Practices
#### Component Architecture
- Favor React Server Components (RSC) where possible
- Minimize 'use client' directives
- Implement proper error boundaries
- Use Suspense for async operations
- Optimize for performance and Web Vitals
- Favor "use cache" for all data fetching and ensure caching mechanisms are well-configured.

#### State Management
- Use useActionState instead of deprecated useFormState
- Leverage enhanced useFormStatus with new properties (data, method, action)
- Implement URL state management with 'nuqs'
- Minimize client-side state

#### Async Request APIs
```javascript
// Always use async versions of runtime APIs
const cookieStore = await cookies()
const headersList = await headers()
const isEnabled = await draftMode()

// Handle async params in layouts/pages
const params = await props.params
const searchParams = await props.searchParams
```
> Note: Avoid using dot notation when awaiting these objects; each must be awaited individually.

#### Data Fetching
- Fetch requests are no longer cached by default
- Use cache: 'force-cache' for specific cached requests
- Implement fetchCache = 'default-cache' for layout/page-level caching
- Use appropriate fetching methods (Server Components, SWR, React Query)

#### Route Handlers
```javascript
// Cached route handler example
export const dynamic = 'force-static'

export async function GET(request: Request) {
  const params = await request.params
  // Implementation
}
```

### Vercel AI SDK Integration
#### Core Concepts
- Use the AI SDK for building AI-powered streaming text and chat UIs
- Leverage three main packages:
  - ai - Core functionality and streaming utilities
  - @ai-sdk/[provider] - Model provider integrations (e.g., OpenAI)
  - React hooks for UI components

#### Route Handler Setup
```javascript
import { openai } from '@ai-sdk/openai';
import { streamText } from 'ai';

export const maxDuration = 30;

export async function POST(req: Request) {
  const { messages } = await req.json();

  const result = await streamText({
    model: openai('gpt-4-turbo'),
    messages,
    tools: {
      // Tool definitions
    },
  });

  return result.toDataStreamResponse();
}
```

#### Chat UI Implementation
```javascript
'use client';

import { useChat } from 'ai/react';

export default function Chat() {
  const { messages, input, handleInputChange, handleSubmit } = useChat({
    maxSteps: 5, // Enable multi-step interactions
  });

  return (
    <div className="flex flex-col w-full max-w-md py-24 mx-auto stretch">
      {messages.map(m => (
        <div key={m.id} className="whitespace-pre-wrap">
          {m.role === 'user' ? 'User: ' : 'AI: '}
          {m.toolInvocations ? (
            <pre>{JSON.stringify(m.toolInvocations, null, 2)}</pre>
          ) : (
            m.content
          )}
        </div>
      ))}

      <form onSubmit={handleSubmit}>
        <input
          className="fixed bottom-0 w-full max-w-md p-2 mb-8 border border-gray-300 rounded shadow-xl"
          value={input}
          placeholder="Say something..."
          onChange={handleInputChange}
        />
      </form>
    </div>
  );
}
```

### UI Development
#### Styling
- Use Tailwind CSS with a mobile-first approach
- Implement Shadcn UI and Radix UI components
- Follow consistent spacing and layout patterns
- Ensure responsive design across breakpoints
- Use CSS variables for theme customization

#### Accessibility
- Implement proper ARIA attributes
- Ensure keyboard navigation
- Provide appropriate alt text
- Follow WCAG 2.1 guidelines
- Test with screen readers

### Performance Optimization
- Optimize images (WebP, sizing, lazy loading)
- Implement code splitting
- Use next/font for font optimization
- Configure staleTimes for client-side router cache
- Monitor Core Web Vitals

### Configuration
#### Next.js Config
```javascript
/** @type {import('next').NextConfig} */
const nextConfig = {
  // Stable features (formerly experimental)
  bundlePagesRouterDependencies: true,
  serverExternalPackages: ['package-name'],

  // Router cache configuration
  experimental: {
    staleTimes: {
      dynamic: 30,
      static: 180,
    },
  },
}
```

#### TypeScript Config
```json
{
  "compilerOptions": {
    "strict": true,
    "target": "ES2022",
    "lib": ["dom", "dom.iterable", "esnext"],
    "jsx": "preserve",
    "module": "esnext",
    "moduleResolution": "bundler",
    "noEmit": true,
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}
```

### Testing and Validation
#### Code Quality
- Implement comprehensive error handling
- Write maintainable, self-documenting code
- Follow security best practices
- Ensure proper type coverage
- Use ESLint and Prettier

#### Testing Strategy
- Plan for unit and integration tests
- Implement proper test coverage
- Consider edge cases and error scenarios
- Validate accessibility compliance
- Use React Testing Library

### Key Conventions
- Prioritize clarity and maintainability while delivering robust, accessible, and performant solutions aligned with the latest React 19, Next.js 15, and Vercel AI SDK features and best practices.