AI-powered fortune telling system built with Next.js, React, and Gemini AI. Implements TypeScript strict mode, functional React patterns, and comprehensive code organization standards for divination applications.
A comprehensive development framework for building AI-powered fortune telling systems using Next.js, React, and Gemini AI.
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.
When working on a XuanJi-style fortune telling system or similar Next.js/React/AI project, follow these conventions:
Apply these naming patterns consistently:
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:**
Enforce strict TypeScript standards:
```typescript
// tsconfig.json settings
{
"compilerOptions": {
"strict": true,
"noImplicitAny": true,
"strictNullChecks": true
}
}
```
**Code style requirements:**
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:**
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';
```
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:**
Every code element must include appropriate documentation:
**Components:**
**Functions:**
**API endpoints:**
When integrating Gemini AI for fortune telling:
```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>
);
};
```
```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();
}
```
```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);
}
}
```
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/xuanji-fortune-telling-system/raw