SecondMe Next.js Project Generation

Generate a complete Next.js project based on the configuration from

/secondme-init

and requirement definitions from

/secondme-prd

Precondition Checks

1. Check state.json

First check if

.secondme/state.json

exists:

Does not exist → Prompt:

Please run /secondme-init to initialize project configuration first

Exists → Continue

2. Check Execution Mode

Check if the parameters include

--quick

Fast Mode (--quick):

Skip stage checks
Use default PRD configuration
Start project generation directly

Standard Mode:

Check if
```
stage >= "prd"
```

stage == "init"

→ Prompt:

Please run /secondme-prd to define requirements first, or use /secondme-nextjs --quick for fast generation

If
```
stage >= "prd"
```
→ Continue

Read Configuration

Read from

.secondme/state.json

javascript

const state = {
  app_name: "secondme-tinder",  // Application name
  modules: ["auth", "chat", "profile"],  // Selected modules
  config: {
    client_id: "71658da7-659c-414a-abdf-cb6472037fc2",
    client_secret: "xxx",
    redirect_uri: "http://localhost:3000/api/auth/callback",
    redirect_uris: [...],
    database_url: "postgresql://...",
    allowed_scopes: [...]
  },
  api: {
    base_url: "https://app.mindos.com/gate/lab",
    oauth_url: "https://go.second.me/oauth/",
    token_endpoint: "...",
    access_token_ttl: 7200,
    refresh_token_ttl: 2592000
  },
  docs: {
    quickstart: "https://develop-docs.second.me/zh/docs",
    oauth2: "...",
    api_reference: "...",
    errors: "..."
  },
  prd: {
    summary: "Application overview",
    features: ["Feature 1", "Feature 2"],
    design_preference: "Minimalist modern"
  }
}

Important: All API endpoints and document links are read from

state.api

and

state.docs

, do not hardcode.

Frontend Design Requirements

Important: When building frontend interfaces, you must use the

frontend-design:frontend-design

skill to generate high-quality UI components.

Design Principles:

Light Theme: Only use light/bright themes, do not use dark themes
Minimalist & Elegant: Follow minimalist design concepts, reduce visual noise
Product Feature-Driven: UI design should closely align with the functional features to be implemented
Modern: Adopt current popular design trends, avoid outdated UI patterns
Consistency: Maintain a unified overall visual style
Responsive: Adapt to various screen sizes
Chinese Interface: All user-visible text (buttons, prompts, labels, instructions, etc.) must be in Chinese
Stability First: Avoid complex animation effects, only use simple transition animations (such as hover, fade) to ensure stable and smooth interface

Project Generation Process

1. Initialize Next.js Project

Initialize the Next.js project directly in the current directory:

bash

npx create-next-app@latest . --typescript --tailwind --app --src-dir --import-alias "@/*" --yes

2. Install Dependencies

bash

npm install prisma @prisma/client
npx prisma init

3. Generate .env.local

Generate environment variables from

state.config

and

state.api

env

# SecondMe OAuth2 Configuration
SECONDME_CLIENT_ID=[config.client_id]
SECONDME_CLIENT_SECRET=[config.client_secret]
SECONDME_REDIRECT_URI=[config.redirect_uri]

# Database
DATABASE_URL=[config.database_url]

# SecondMe API (read from state.api)
SECONDME_API_BASE_URL=[api.base_url]
SECONDME_OAUTH_URL=[api.oauth_url]
SECONDME_TOKEN_ENDPOINT=[api.token_endpoint]

4. Generate Prisma Schema

Dynamically generate

prisma/schema.prisma

based on selected modules.

auth Module (Mandatory) - Required Fields for User Table

The User table must include Token-related fields for storing and refreshing user credentials:

prisma

model User {
  id                String   @id @default(cuid())
  secondmeUserId    String   @unique @map("secondme_user_id")
  accessToken       String   @map("access_token")
  refreshToken      String   @map("refresh_token")
  tokenExpiresAt    DateTime @map("token_expires_at")
  createdAt         DateTime @default(now()) @map("created_at")
  updatedAt         DateTime @updatedAt @map("updated_at")
  // Add other fields according to module requirements
}

Other Modules

Design corresponding database table structures and relationships according to the actual requirements of selected modules (profile, chat, note).

5. Generate Code

Generate corresponding code based on selected modules:

auth Module

File	Description
`src/app/api/auth/login/route.ts`	OAuth login redirect
`src/app/api/auth/callback/route.ts`	OAuth callback handling
`src/app/api/auth/logout/route.ts`	Logout handling
`src/lib/auth.ts`	Authentication utility functions
`src/components/LoginButton.tsx`	Login button component

profile Module

File	Description
`src/app/api/user/info/route.ts`	Get user information
`src/app/api/user/shades/route.ts`	Get interest tags
`src/components/UserProfile.tsx`	User profile component

chat Module

File	Description
`src/app/api/chat/route.ts`	Streaming chat API
`src/app/api/sessions/route.ts`	Session list API
`src/components/ChatWindow.tsx`	Chat interface component

act Module

File	Description
`src/app/api/act/route.ts`	Streaming action judgment API (structured JSON output)
`src/lib/act.ts`	Act API utility functions (send actionControl, parse SSE JSON results)

note Module

File	Description
`src/app/api/note/route.ts`	Add note API

6. Update state.json

json

{
  "stage": "ready",
  ...
}

Technology Stack

Framework: Next.js 14+ (App Router)
Language: TypeScript
Styling: Tailwind CSS
Database ORM: Prisma
Frontend Design: Generated using
```
frontend-design:frontend-design
```
skill
API Calls: fetch
State Management: React hooks
Running Port: Must use port 3000

Common Issues & Notes

CSS @import Order Issue

Problem: Using

@import url(...)

to import Google Fonts in

globals.css

causes build failure.

Error Message:

@import rules must precede all rules aside from @charset and @layer statements

Cause: Tailwind CSS's

@import "tailwindcss"

expands to generate a large number of rules, causing subsequent

@import url(...)

to no longer be the first.

Correct Approach:

Use
<link>
tag (Recommended): Import in

layout.tsx

tsx

<head>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link href="https://fonts.googleapis.com/css2?family=..." rel="stylesheet" />
</head>

Use
next/font
(Best Practice):

tsx

import { Noto_Sans_SC } from 'next/font/google'
const notoSans = Noto_Sans_SC({ subsets: ['latin'], weight: ['400', '500'] })

Build Validation

Important: After each code modification, you must run the following command to verify the build:

bash

npm run build

Pay special attention to:

CSS parsing errors
TypeScript type errors
Import path errors

WebView OAuth Authentication Issue

Problem: In WebView environments (such as mobile app embedded pages, WeChat Mini Programs, etc.), OAuth state verification may fail because storage is not shared between WebView and system browsers.

Solution: Use relaxed state verification, record a warning but continue with the login process when verification fails.

tsx

// Before: Reject directly if verification fails
if (!isValidState) {
  return NextResponse.redirect('/?error=invalid_state');
}

// After: Record warning if verification fails, continue processing
if (!isValidState) {
  console.warn('OAuth state verification failed, possibly a cross-WebView scenario');
  // Continue processing, do not block login
}

Note: This method reduces CSRF protection, and is only recommended for use in trusted WebView environments

Output Result

✅ Next.js project generated successfully!

Generated modules: auth, chat, profile
Database: PostgreSQL

Startup steps:
1. npm install
2. npx prisma db push
3. npm run dev

The project will start at http://localhost:3000

API Response Format

Important: All SecondMe API responses follow a unified format:

json

{
  "code": 0,
  "data": { ... }
}

Relationship between local routes and upstream APIs: Next.js local routes (such as
/api/secondme/user/shades
) act as a proxy layer, forwarding requests to the upstream SecondMe API (
{state.api.base_url}/api/secondme/...
), and pass through the upstream response format. Frontend code only needs to call local routes, no need to access upstream APIs directly.

Frontend code must extract data correctly:

typescript

// ✅ Correct approach (call Next.js local route, response format is the same as upstream)
const response = await fetch('/api/secondme/user/shades');
const result = await response.json();
if (result.code === 0) {
  const shades = result.data.shades;
  shades.map(item => ...)
}

Official Documentation

Read document links from

state.docs

Document	Configuration Key
Quickstart	`docs.quickstart`
OAuth2 Guide	`docs.oauth2`
API Reference	`docs.api_reference`
Error Codes	`docs.errors`

secondme-nextjs

NPX Install

Tags

SKILL.md Content (Chinese)

SecondMe Next.js Project Generation

Precondition Checks

1. Check state.json

2. Check Execution Mode

Read Configuration

Frontend Design Requirements

Project Generation Process

1. Initialize Next.js Project

2. Install Dependencies

3. Generate .env.local

4. Generate Prisma Schema

auth Module (Mandatory) - Required Fields for User Table

Other Modules

5. Generate Code

auth Module

profile Module

chat Module

act Module

note Module

6. Update state.json

Technology Stack

Common Issues & Notes

CSS @import Order Issue

Build Validation

WebView OAuth Authentication Issue

Output Result

API Response Format

Official Documentation