aidotnet/moyucode
Overview
This skill generates Next.js 14+ App Router components and patterns for full-stack pages. It produces server components with data fetching, client components (including forms and actions), API-like server actions, and middleware examples. The outputs are TypeScript-ready and follow modern Next.js conventions for ISR, revalidation, and client/server separation.
How this skill works
Provide a request describing the page, component, or route you need and I generate App Router files (page.tsx, client components, actions, middleware) with example code and comments. I include data-fetching patterns (fetch with next.revalidate), server actions for form handling, Suspense-based loading, and middleware for route protection. The generated code is practical and ready to drop into a Next.js 14+ project with minimal edits.
When to use it
- Scaffolding App Router pages that need server-side data fetching or ISR.
- Creating client-side interactive forms that call server actions.
- Implementing authentication or route guards via middleware.
- Prototyping CRUD flows with revalidation and optimistic UI patterns.
- Converting older pages to the Next.js App Router and server components.
Best practices
- Keep data fetching in server components and UI interactions in client components.
- Use 'next: { revalidate }' on fetch for ISR and revalidatePath in server actions after mutations.
- Validate incoming form data server-side with a schema (e.g., zod) before calling APIs.
- Wrap async server-rendered lists with Suspense and provide concise fallbacks.
- Protect sensitive routes in middleware and minimize matcher scope for performance.
Example use cases
- A users index page that fetches and displays users with ISR and Suspense fallback.
- A CreateUser client form that calls a server action and revalidates the users page.
- Middleware that redirects unauthenticated visitors from /dashboard to /login.
- API integration patterns for POST/GET flow in server actions using fetch.
- Converting a legacy page to a server component with client subcomponents for interactivity.
FAQ
Yes. Examples are TypeScript-ready and include basic interfaces and types.
How do server actions revalidate pages?
Use revalidatePath or revalidateTag from next/cache after a successful mutation to update ISR pages.
34 skills
This skill generates Next.js 14+ App Router components with server/client patterns, including data fetching, forms, actions, middleware, and routing.
This skill generates modern React components with TypeScript, hooks, accessibility best practices, and a context provider pattern for state management.
This skill helps you quickly assess network ports, identify open services, and verify availability across hosts.
This skill helps you test and debug regular expressions with match highlighting and capture groups, plus a library of common patterns.
This skill analyzes Bilibili videos by downloading, extracting frames, and generating structured practical tutorials or knowledge documents.
This skill analyzes user requirements, breaks them into actionable steps, and generates structured documentation for software development plans.
This skill helps you resize, convert, watermark, and generate thumbnails for images using simple commands.
This skill generates UUIDs in v1, v4, v5 and other identifiers like ULID and nanoid for reliable, scalable unique IDs.
This skill designs and optimizes AI prompts using structured templates, few-shot and chain-of-thought techniques to improve model performance.
This skill analyzes X data via Playwright, generates a polished HTML report panel, and exports high-resolution images for social media insights.
This skill provides a concise overview of system resources including CPU, memory, disk, network, and processes.
This skill captures screenshots of the full screen, windows, or regions with optional annotations to enhance clarity.
This skill formats code across languages using industry-standard tools, ensuring consistent style and faster collaboration.
This skill analyzes Git repository statistics including commits, contributors, and code changes to help you understand project activity and trends.
This skill generates production-ready CI/CD pipelines for GitHub Actions, GitLab CI, Azure DevOps, and Jenkins across build, test, deploy, caching, and secrets.
This skill enables you to make HTTP requests across methods with headers, authentication, and response handling to test and interact with APIs.
This skill helps you compute cryptographic hashes for files to verify integrity, detect duplicates, and generate checksums.
This skill enables decoding, verifying, and generating JWTs across algorithms, helping you secure tokens and streamline authentication workflows.
This skill translates text across languages using free services, with auto-detect, batch processing, and file translation for efficient localization.
This skill helps you manage environment variables and .env files with validation, encryption, and template generation for safer configurations.
This skill validates JSON files against JSON Schema, reports detailed errors, and offers auto-fix suggestions to streamline data integrity.
This skill helps you send emails from Node.js using SMTP, OAuth2, attachments, and HTML templates with ease.
This skill generates cryptographically secure passwords and passphrases with configurable length, character sets, and entropy calculations to enhance security.
This skill converts colors between HEX, RGB, HSL, HSV, CMYK and can generate color palettes for design workflows.
This skill generates QR codes from text, URLs, or data with customizable colors and embedded logos for flexible output.
This skill generates production-ready Express.js REST APIs in TypeScript with middleware, validation, error handling and authentication patterns.
This skill sends emails via SMTP with HTML content, attachments, and multiple recipients, leveraging nodemailer for reliable notifications.
This skill automates browser tasks with Puppeteer for web scraping, PDF generation, screenshots, and automated testing.
This skill generates comprehensive documentation including README, API references, code comments, and architecture docs to improve project clarity.
This skill reads, manipulates, and writes Excel files with full styling support, enabling fast data processing and report generation.
This skill generates barcodes in Code128, EAN-13, UPC, Code39 and more, enabling quick product code creation and asset labeling.
This skill helps you read, transform, and analyze CSV data, enabling filtering, sorting, aggregation, and format conversion for insights.
This skill creates and extracts ZIP, TAR, and GZIP archives with optional password protection to manage compressed files efficiently.
This skill optimizes image processing tasks by resizing, converting formats, and applying enhancements with a high-performance Node.js library.
