Report Builder Project Development Rules

Overview

This skill provides development guidelines for building a Next.js-based report builder application. It enforces strict security practices, uses Radix UI for design components, React Charts for data visualization, and CSS Modules for styling.

Instructions

1. Security & Privacy (CRITICAL)

**Never commit sensitive data to the repository. This is a blocking requirement.**

Before making any file changes:

**Prohibited items:**

**Required practices:**

**Example - What NOT to commit:**

```bash

❌ WRONG

LITELLM_API_KEY=sk-testKeyRealExample_Q

LITELLM_BASE_URL=https://litellm.aks-hs-prod.int.hyperskill.org

```

**Example - Correct approach:**

```bash

✅ CORRECT

LITELLM_API_KEY=your_litellm_api_key_here

LITELLM_BASE_URL=your_litellm_base_url_here

```

2. Git Command Policy

**IMPORTANT: Do not execute git commands without explicit user permission.**

Before any git operation:

1. Ask the user for explicit permission

2. Never commit automatically

3. Never push automatically

4. Explain what the git command will do before requesting permission

3. Technology Stack

Use the following technologies for this project:

| Technology | Purpose | Documentation Location |

|------------|---------|------------------------|

| **Next.js** | Main framework | Standard Next.js docs |

| **Radix UI** | Design system | `docs/RADIX_UI_DOCUMENTATION.md` |

| **React Charts** | Data visualization | `docs/REACT_CHARTJS_DOCUMENTATION.md` |

| **CSS Modules** | Styling | Do NOT use Tailwind |

**Project structure:**

4. Code Quality Standards

When writing code:

5. Development Workflow

**Step-by-step process:**

1. **Before starting:**

- Check `docs/RADIX_UI_DOCUMENTATION.md` for UI component patterns

- Check `docs/REACT_CHARTJS_DOCUMENTATION.md` for chart implementation

- Review existing code patterns in `app/` directory

2. **During development:**

- Write code in `app/` directory

- Use CSS Modules for all styling

- Log significant actions in `app-creation-log.md`

- Use environment variables for configuration

3. **Before committing:**

- Scan all changed files for sensitive data

- Verify no hardcoded credentials or URLs

- Check that examples use placeholders only

- Ask user for permission before git commands

4. **Code review checklist:**

- [ ] No sensitive data in any files

- [ ] All API integrations documented

- [ ] Follows existing code patterns

- [ ] Security-sensitive features tested

- [ ] CSS Modules used (no Tailwind)

- [ ] Environment variables used for config

Examples

Example 1: Setting up environment variables

```bash

✅ In .env.local (gitignored)

LITELLM_API_KEY=sk-actual-key-here

LITELLM_BASE_URL=https://actual-production-url.com

✅ In env.example (committed)

LITELLM_API_KEY=your_litellm_api_key_here

LITELLM_BASE_URL=your_litellm_base_url_here

```

Example 2: Using Radix UI component

```typescript

// app/components/Dialog.tsx

import * as Dialog from '@radix-ui/react-dialog';

import styles from './Dialog.module.css';

export function ReportDialog() {

return (

<Dialog.Root>

<Dialog.Trigger className={styles.trigger}>

Open Report

</Dialog.Trigger>

<Dialog.Portal>

<Dialog.Content className={styles.content}>

{/* Content here */}

</Dialog.Content>

</Dialog.Portal>

</Dialog.Root>

);

}

```

Example 3: Creating a chart with React Charts

```typescript

// app/components/ReportChart.tsx

import { Bar } from 'react-chartjs-2';

import styles from './ReportChart.module.css';

export function ReportChart({ data }) {

return (

<div className={styles.chartContainer}>

<Bar data={data} options={chartOptions} />

</div>

);

}

```

Constraints