ZShip
Back to docs

Skills and vibe coding for web-nuxt

Use repo skills to customize apps/web-nuxt with prompt-driven edits instead of starting from a blank spec.

Article
PreviousNext

web-nuxt now has a dedicated skills entry for prompt-driven customization. The goal is simple: let a builder describe the product change in natural language, then let Codex map that request onto the right files and shared layers.

Recommended skill stack

  • $onboard Use first when you need the repo map or want to confirm which layer owns a feature.
  • $customize-web-nuxt Use when you are editing apps/web-nuxt directly: landing hero, pricing, docs, auth, guest-demo, dashboard entry flow, or app-level proxy routes.
  • $create-app Use when you want a separate frontend copied from apps/web-nuxt instead of modifying the template in place.
  • $customize-brand Use after copying the app, or when the change is mostly manifest-driven branding and SEO.
  • $add-page Use when the new product surface needs its own route.
  • $add-dashboard Use when the user dashboard needs a new feature tab or activation area.

In-place editing vs copied app

Use $customize-web-nuxt when apps/web-nuxt itself is the working frontend.

Use $create-app first if you want tenant isolation, a new package name, or a product app that should stop tracking the official template directly. After that, use the other skills against the copied app.

Main edit surfaces

  • apps/web-nuxt/zship.app.json Brand identity, SEO, footer, analytics, dashboard feature flags.
  • apps/web-nuxt/app/components/LandingPage.vue Hero, CTA flow, marketing sections, testimonials, closing CTA.
  • apps/web-nuxt/app/pages/pricing.vue Pricing layout, comparison table, sales CTA.
  • apps/web-nuxt/content/docs/* User-facing docs content in English and Simplified Chinese.
  • apps/web-nuxt/server/api/* Public-page server proxies.

When a request clearly belongs to packages/nuxt-common-layer or packages/nuxt-ai-layer, Codex should explain that boundary instead of silently turning a local page tweak into a shared-platform rewrite.

Example prompts

  • Use $customize-web-nuxt to turn the landing hero into a waitlist-first launch page for an AI video tool.
  • Use $customize-web-nuxt to simplify the dashboard home so the primary action is opening AI Playground.
  • Use $customize-web-nuxt to add a docs page about API keys and link it in the existing docs list.
  • Use $customize-web-nuxt to rewrite pricing for annual plans only and update the CTA language across the landing page.
  • Use $create-app NAME=my-product to fork web-nuxt, then use $customize-brand APP=apps/my-product to replace the default branding.

Practical workflow

  1. Start from the repo root.
  2. Invoke the skill explicitly in your prompt.
  3. Describe the product change, not just the file name.
  4. Let Codex inspect the current implementation before patching.
  5. Ask for verification on the affected route after the change lands.

That approach keeps the work close to the real codebase and makes web-nuxt feel like a modifiable product surface instead of a frozen template.