skills.rest
BellaBe
BellaBeCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-page-builder

Transform product specifications into production Next.js pages using Untitled UI components.

37|5|Updated Nov 18, 2025
Search Tags:#automation#nextjs#design-system#ui-components#page-builder
One-click install
npx skills add https://github.com/BellaBe/lean-os --skill frontend-page-builder
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-page-builder
Source: https://github.com/BellaBe/lean-os/tree/main/.claude/skills/engineering-frontend-page-builder
Command: npx skills add https://github.com/BellaBe/lean-os --skill frontend-page-builder

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill converts product specs and design system references into production-ready Next.js pages, mapping wireframes to UI components.

Core Features & Use Cases

  • Component-first approach: Use Untitled UI free components before building custom ones.
  • Spec-to-UI mapping: Translate product spec into component structure and page layout.
  • Page generation: Generate app/pages with a clean structure based on the spec.

Quick Start

Provide product spec at artifacts/product/specs/[feature].md and design-system assets at artifacts/design-system/.

Frequently Asked Questions about frontend-page-builder

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

FAQPage Schema
How do I convert product specifications into Next.js pages?▼

Convert product specs into Next.js pages by providing your feature specification at artifacts/product/specs/[feature].md and design system assets. The Skill maps your spec to Untitled UI components, generates the page structure, and creates production-ready app/pages with clean navigation.

Can I use Untitled UI components with my Next.js design system?▼

Yes. This Skill prioritizes Untitled UI free components for your design system before building custom ones. It reads your design system artifacts and maps wireframes directly to available Untitled UI components, reducing build time.

What should I include in my product spec file for page generation?▼

Include your feature specification at artifacts/product/specs/[feature].md with layout intent and component needs. Optionally add wireframes and backend API specs for data shapes. The Skill reads these artifacts and generates the complete page structure.

When should I build custom components versus using design system components?▼

Build custom components only when Untitled UI free components don't meet your needs. The Skill prefers existing design system components first, reducing duplication and maintaining consistency across your Next.js application.

Does this work with backend API specifications?▼

Yes. You can provide optional backend API specs to define data shapes. The Skill uses these specs to structure your Next.js pages for integration with your API endpoints.

Related Skills

Explore More Software Engineering Skills→
aiunlocked1412aiunlocked1412
14

web-designer-pro

Generate mobile-first wireframes, design tokens, and developer handoff documentation for web pages.

Community
Advanced
Snowflake-LabsSnowflake-Labs
12

read-ors-configuration

A concise summary of your roleplay character: name,</name> personality, and/or behavior, formatted as a single string sentence. Typically不超过50字，此处省略

Official
Intermediate
databricks-solutionsdatabricks-solutions
1.8k

databricks-app-apx

Builds full-stack Databricks applications with FastAPI backend and React frontend.

Official
Advanced
ythmythm
1

yida-create-page

Creates custom display pages in Yida apps and retrieves form UUIDs.

Community
Basic