QuikBroker Development Assistant

A Claude Code skill for working with the QuikBroker repository, enforcing code style guidelines, build commands, and architectural patterns for Next.js development.

Instructions

When working with code in the QuikBroker repository, follow these guidelines:

1. Build and Development Commands

Use these yarn commands for development workflow:

Always run linting before committing changes.

2. Code Style and Naming Conventions

Apply these naming conventions strictly:

- Component files: PascalCase with `.tsx` extension

- API endpoint files: kebab-case with `.ts` extension

- Utility files: camelCase with `.ts` extension

3. Import Organization

Organize imports in this order:

1. React imports

2. Next.js imports

3. @quikbroker internal packages

4. Relative imports

Prefer absolute imports over relative parent imports (`../../`).

4. Formatting Rules

5. Component Structure

1. Exported main component

2. Subcomponents

3. Helper functions

4. Static content

6. Tech Stack

Use these technologies and patterns:

7. Pre-Commit Checklist

Before committing changes:

1. Run `yarn app:lint` to check for linting errors

2. Run `yarn app:format` to auto-format code

3. Verify naming conventions are followed

4. Ensure imports are organized correctly

5. Check that line width does not exceed 100 characters

Examples

Component File Structure

```tsx

// React

import { useState } from 'react'

// Next.js

import { useRouter } from 'next/navigation'

// @quikbroker packages

import { Button } from '@quikbroker/ui'

// Relative imports

import { formatCurrency } from './utils'

export function PriceDisplay({ amount }: { amount: number }) {

if (amount < 0) return null // Early return

return <div>{formatCurrency(amount)}</div>

}

```

Naming Examples

```typescript

// Components (PascalCase)

function UserProfile() {}

// Functions (camelCase)

function calculateTotal() {}

// Hooks (camelCase with 'use')

function useAuthentication() {}

// Constants (UPPER_SNAKE_CASE)

const MAX_UPLOAD_SIZE = 5000000

// Types (PascalCase)

interface ApiResponse {}

```

Constraints