AgentSkillsCN

nextjs-frontend

使用 TypeScript 和 Monaco Editor 构建 Next.js 前端

SKILL.md
--- frontmatter
name: nextjs-frontend
description: Create Next.js frontend with TypeScript and Monaco Editor

Next.js Frontend Generator

When to Use

  • •Creating frontend applications
  • •Building React-based UIs
  • •Need TypeScript + Tailwind CSS setup

Instructions

  1. •Run ./scripts/create-nextjs.sh <app-name>
    • •Example: ./scripts/create-nextjs.sh learnflow-frontend
  2. •Navigate to generated folder
  3. •Install dependencies: npm install
  4. •Run dev server: npm run dev

What Gets Created

  • •Next.js 14 with App Router
  • •TypeScript configuration
  • •Tailwind CSS
  • •Monaco Editor integration
  • •API client setup

Validation

  • • App created successfully
  • • Dependencies installed
  • • Dev server runs on port 3000
  • • Monaco Editor loads