Development guidelines for a Next.js-based report builder application with Radix UI, React Charts, and CSS Modules. Enforces strict security practices for API keys and credentials.
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.
**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
LITELLM_API_KEY=sk-testKeyRealExample_Q
LITELLM_BASE_URL=https://litellm.aks-hs-prod.int.hyperskill.org
```
**Example - Correct approach:**
```bash
LITELLM_API_KEY=your_litellm_api_key_here
LITELLM_BASE_URL=your_litellm_base_url_here
```
**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
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:**
When writing code:
**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
```bash
LITELLM_API_KEY=sk-actual-key-here
LITELLM_BASE_URL=https://actual-production-url.com
LITELLM_API_KEY=your_litellm_api_key_here
LITELLM_BASE_URL=your_litellm_base_url_here
```
```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>
);
}
```
```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>
);
}
```
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/report-builder-project-rules/raw