skills.rest
zenbuapps
zenbuappsOFFICIAL
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/zenbuapps/zenbu-powers --skill aibdd-auto-frontend-nextjs-pages
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
zenbuappszenbuapps

aibdd-auto-frontend-msw-api-layer

Generate Zod schemas, MSW handlers, and a typed API client from api.yml specifications.

Official
Advanced
tonehqtonehq
11

generate-tests

Generate Playwright e2e specs from page component source and run them.

Official
Advanced
ArtisanClarinetsArtisanClarinets

zod-validation

Validate Next.js 16 and React 19 data with Zod schemas.

Community
Advanced
ArieGoldkinArieGoldkin

design-to-production

Convert HTML prototypes into React components with shadcn/ui and validation.

Community
Intermediate