nextjs-capacitor-build

Scaffold a Next.js App Router and Capacitor hybrid frontend monorepo.

Updated Apr 21, 2026

Search Tags:#scaffolding #nextjs #tailwind #design-tokens #frontend-architecture #capacitor #hybrid-app

Ready to run

npx skills add https://github.com/hobbong21/nuxia2 --skill nextjs-capacitor-build

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: nextjs-capacitor-build
Source: https://github.com/hobbong21/nuxia2/tree/main/.claude/skills/nextjs-capacitor-build
Command: npx skills add https://github.com/hobbong21/nuxia2 --skill nextjs-capacitor-build

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a ready-to-use scaffold for building responsive web and iOS/Android hybrid apps using Next.js 14 App Router, Tailwind, shadcn/ui, and Capacitor, enabling teams to ship a cohesive frontend quickly.

Core Features & Use Cases

Unified monorepo scaffold for apps/web and apps/mobile with a clear separation of web build and hybrid export.
Tailwind design-token integration to keep design tokens in sync across web and mobile.
Capacitor-based hybrid tooling with web-to-native wrapping and config examples.
Client/server data handling rules for Next.js components (server components for SEO, client components for interactivity).
Static export workflow for hybrid deployment using Next.js export + cap sync.

Quick Start

Run the standard monorepo setup to bootstrap the project and start developing the Next.js + Capacitor hybrid frontend.

Frequently Asked Questions about nextjs-capacitor-build

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

FAQPage Schema

How do I scaffold a Next.js and Capacitor hybrid app for a single codebase?▼

You can scaffold a Next.js and Capacitor hybrid app using a unified monorepo structure with apps/web and apps/mobile directories. This setup separates web build from hybrid export while maintaining a single codebase.

What is the best way to sync Tailwind design tokens across web and mobile in a hybrid app?▼

The best way to sync Tailwind design tokens across web and mobile is by using Tailwind design-token integration within your monorepo. This ensures design tokens stay aligned across web and mobile platforms from a shared configuration.

How do I deploy a Next.js hybrid app using static export with Capacitor?▼

Deploying a Next.js hybrid app uses a static export workflow combining Next.js export with cap sync. This process generates static assets and wraps them for native iOS and Android deployment.

Can I use Next.js App Router server components for SEO in a Capacitor hybrid app?▼

Yes, you can use Next.js App Router server components for SEO in a Capacitor hybrid app. Client/server data handling rules designate server components for SEO and client components for interactivity.

Does this Capacitor hybrid scaffold support ecommerce projects?▼

Yes, this Capacitor hybrid scaffold explicitly supports ecommerce projects. It provides a responsive web and iOS/Android hybrid app structure using Next.js 14 App Router, Tailwind, and shadcn/ui.