skills.rest
droxey
droxeyCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

nextjs-nebula-miniapp

Reviews Next.js App Router implementations for Nebula sandbox compliance and performance issues.

1|Updated Apr 9, 2026
Search Tags:#caching#streaming#nextjs#tanstack query#server components#design compliance#nebula miniapp
One-click install
npx skills add https://github.com/droxey/skills --skill nextjs-nebula-miniapp
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nextjs-nebula-miniapp
Source: https://github.com/droxey/skills/tree/main/nextjs-nebula-miniapp
Command: npx skills add https://github.com/droxey/skills --skill nextjs-nebula-miniapp

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It prevents slow, insecure, and non-compliant Next.js miniapps by providing practical guidance for Server Components, streaming/caching, data fetching, and Nebula-specific UI rules.

Core Features & Use Cases

  • Server Components architecture: default Server Components, minimize "use client", and enforce clean client boundaries.
  • Streaming, caching, and performance: apply <Suspense> boundaries, Cache Components patterns, and avoid dynamic-blocking pitfalls.
  • Nebula miniapp compliance & production readiness: enforce 400px layout constraints, touch targets, shadcn/ui component usage, semantic tokens, and a production checklist for proxies/auth.

Quick Start

Use the nextjs-nebula-miniapp skill to review a Nebula miniapp’s Next.js App Router implementation and get specific fixes to improve performance, correctness, and design compliance.

Frequently Asked Questions about nextjs-nebula-miniapp

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a Next.js Nebula miniapp that passes visual compliance checks?▼

To build a compliant Nebula miniapp, enforce 400px layout constraints, proper touch targets, semantic tokens, and shadcn/ui components within your Next.js App Router architecture. This ensures your miniapp meets strict design standards.

How do I avoid performance regressions in Next.js App Router server components?▼

Avoid Next.js App Router performance regressions by defaulting to server components, minimizing "use client" boundaries, and applying Suspense with Cache Components patterns to prevent dynamic-blocking pitfalls during data fetching.

What is the best way to structure data fetching for a Next.js streaming miniapp?▼

The best way to structure data fetching is using TanStack Query alongside Next.js server components, applying Suspense boundaries for streaming, and enforcing clean client boundaries to maintain optimal read/write workflows.

Can I use client-side state management with TanStack Query in Nebula miniapps?▼

Yes, you can use TanStack Query in Nebula miniapps by establishing clean client boundaries. Minimize "use client" directives and integrate them with server-side proxy and auth callbacks for secure read/write workflows.

Why does my Next.js Nebula miniapp fail production readiness checks?▼

Your Next.js Nebula miniapp fails production checks if it lacks secure server-side proxy integration, proper auth callbacks, or violates Nebula visual rules like 400px constraints and touch target sizing.

Related Skills

Explore More Software Engineering Skills→
netprtonynetprtony

shadcn-ui

Automate shadcn/ui component setup and usage in React and Next.js projects.

Community
Advanced
fusebase-devfusebase-dev
6

security-permissions-review

Scan git diffs for security vulnerabilities in authentication, permissions, and secrets.

Official
Advanced
ejwhite7ejwhite7

beehiiv-react

Integrate the beehiiv API into Next.js applications for newsletter and subscriber management.

Community
Advanced
act70255act70255

nextjs-app-router-patterns

Provide Next.js 14+ App Router patterns for server-side rendering and streaming.

Community
Advanced