XuanJi Fortune Telling System

A comprehensive development framework for building AI-powered fortune telling systems using Next.js, React, and Gemini AI.

Overview

This skill provides a complete project structure and coding standards for developing intelligent divination applications. It enforces TypeScript strict mode, functional React patterns, and organized directory structures optimized for Next.js applications with AI integration.

Instructions

When working on a XuanJi-style fortune telling system or similar Next.js/React/AI project, follow these conventions:

1. File Naming Conventions

Apply these naming patterns consistently:

2. Directory Structure

Organize the project following this structure:

```

src/

├── app/ # Next.js app directory

│ ├── api/ # API routes

│ └── [pages]/ # Page components

├── components/ # Reusable React components

├── lib/ # Utility functions and API clients

├── styles/ # CSS/styling files

└── types/ # TypeScript type definitions

tests/ # Test files

docs/ # Documentation

```

**Directory purposes:**

3. TypeScript Configuration

Enforce strict TypeScript standards:

```typescript

// tsconfig.json settings

{

"compilerOptions": {

"strict": true,

"noImplicitAny": true,

"strictNullChecks": true

}

}

```

**Code style requirements:**

4. React Component Standards

Write components using functional patterns with TypeScript:

```typescript

// components/FortuneCard.tsx

interface FortuneCardProps {

title: string;

content: string;

zodiacSign: string;

onReadMore?: () => void;

}

export const FortuneCard: React.FC<FortuneCardProps> = ({

title,

content,

zodiacSign,

onReadMore

}) => {

// Component implementation

};

```

**React conventions:**

5. Import Organization

Order imports in this sequence:

1. React imports

2. Next.js imports

3. External libraries

4. Internal modules

5. Styles

```typescript

import React, { useState, useEffect } from 'react';

import { useRouter } from 'next/router';

import { GoogleGenerativeAI } from '@google/generative-ai';

import { calculateFortune } from '@/lib/fortuneCalculator';

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

```

6. API Routes

Structure API handlers in `src/app/api/` or `src/pages/api/`:

```typescript

// pages/api/fortune.ts

import type { NextApiRequest, NextApiResponse } from 'next';

interface FortuneResponse {

fortune: string;

timestamp: string;

}

export default async function handler(

req: NextApiRequest,

res: NextApiResponse<FortuneResponse>

) {

// API implementation

}

```

**API documentation requirements:**

7. Documentation Standards

Every code element must include appropriate documentation:

**Components:**

**Functions:**

**API endpoints:**

8. Testing

9. Gemini AI Integration

When integrating Gemini AI for fortune telling:

10. State Management

Example Usage

Creating a Fortune Display Component

```typescript

// components/FortuneDisplay.tsx

import React from 'react';

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

interface FortuneDisplayProps {

fortune: string;

zodiacSign: string;

date: Date;

}

export const FortuneDisplay: React.FC<FortuneDisplayProps> = ({

fortune,

zodiacSign,

date

}) => {

return (

<div className={styles.container}>

<h2>{zodiacSign}</h2>

<p className={styles.fortune}>{fortune}</p>

<time>{date.toLocaleDateString()}</time>

</div>

);

};

```

Creating a Gemini API Client

```typescript

// lib/geminiClient.ts

import { GoogleGenerativeAI } from '@google/generative-ai';

const genAI = new GoogleGenerativeAI(process.env.GEMINI_API_KEY!);

export async function generateFortune(zodiacSign: string): Promise<string> {

const model = genAI.getGenerativeModel({ model: 'gemini-pro' });

const prompt = `Generate a fortune for ${zodiacSign}`;

const result = await model.generateContent(prompt);

return result.response.text();

}

```

Creating an API Route

```typescript

// pages/api/daily-fortune.ts

import type { NextApiRequest, NextApiResponse } from 'next';

import { generateFortune } from '@/lib/geminiClient';

interface DailyFortuneResponse {

fortune: string;

zodiacSign: string;

error?: string;

}

export default async function handler(

req: NextApiRequest,

res: NextApiResponse<DailyFortuneResponse>

) {

if (req.method !== 'POST') {

return res.status(405).json({ error: 'Method not allowed' } as any);

}

try {

const { zodiacSign } = req.body;

const fortune = await generateFortune(zodiacSign);

res.status(200).json({ fortune, zodiacSign });

} catch (error) {

res.status(500).json({ error: 'Failed to generate fortune' } as any);

}

}

```

Constraints