aibdd-auto-frontend-nextjs-pages

Convert static HTML prototypes into dynamic Next.js pages with MSW API integration.

1|Updated Mar 6, 2026

Search Tags:#automation #layout #frontend #nextjs #spec #msw

Ready to run

npx skills add https://github.com/zenbuapps/zenbu-powers --skill aibdd-auto-frontend-nextjs-pages

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: aibdd-auto-frontend-nextjs-pages
Source: https://github.com/zenbuapps/zenbu-powers/tree/main/skills/aibdd-auto-frontend-nextjs-pages
Command: npx skills add https://github.com/zenbuapps/zenbu-powers --skill aibdd-auto-frontend-nextjs-pages

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

靜態 HTML 原型通常需要大量手動轉換才能成為可運行的 Next.js 頁面。本 Skill 提供自動化方法，將原型轉換為可維護的前端組件樹，並可直接與 MSW API 層整合。

Core Features & Use Cases

從 layout.html 轉換成動態 Next.js 元件樹，並與 Walking Skeleton、API client 及 Zod schemas 緊密整合
支援以規格文件（specs）為參考，快速建立頁面清單與分解元件
適用於在現有 MSW 骨架的前端專案中新增、修改或重構功能頁面

Quick Start

將 layout.html 轉換為 Next.js 頁面並驗證頁面間導航與資料流。

Frequently Asked Questions about aibdd-auto-frontend-nextjs-pages

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

FAQPage Schema

How do I convert a static HTML prototype into dynamic Next.js pages?▼

Yes, you can automate Next.js page creation from static layouts by generating a React component tree and wiring the MSW API layer. It parses arguments.yml, validates specs, derives pages, and decomposes components for seamless frontend integration.

How does MSW API layer integration work with generated Next.js components?▼

MSW API layer integration works by wiring the generated React component tree directly to your existing Walking Skeleton and API client. It ensures Next.js pages have proper data flow and navigation verified against Zod schemas and spec references.

Do I need a Walking Skeleton and spec references to automate frontend page generation?▼

Yes, a Walking Skeleton and spec references are required. This automation applies to frontend projects that already have an MSW API layer and spec references established to derive pages, decompose components, and verify integration.

What is the best way to refactor existing Next.js pages using layout specs?▼

The best way to refactor existing Next.js pages using layout specs is to parse arguments.yml and validate specs to decompose components. This approach ensures refactored pages integrate properly with the MSW API layer and Zod schemas.

What are the limitations of automating Next.js page creation from HTML prototypes?▼

Limitations include requiring an existing MSW API layer, Walking Skeleton, and spec references. It cannot generate pages from raw HTML without these prerequisites, and is specifically tailored for Next.js frontend projects needing component decomposition and integration verification.