skills.rest
LeonardoTan19
LeonardoTan19COMMUNITY
Explore all skills by this author →
GitHub

frontend-page

Assemble frontend pages from design docs using shadcn components and generated API types.

2|1|Updated May 1, 2026
Search Tags:#ui#frontend#shadcn#design-doc#api-types#page-generation
One-click install
npx skills add https://github.com/LeonardoTan19/metaforge --skill frontend-page
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-page
Source: https://github.com/LeonardoTan19/metaforge/tree/main/skills/frontend-page
Command: npx skills add https://github.com/LeonardoTan19/metaforge --skill frontend-page

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill enables turning a formal design document into functioning frontend pages by composing shadcn components and wiring them to generated API client types, reducing manual page-building effort.

Core Features & Use Cases

  • Design-driven page construction: assemble pages directly from the design doc by selecting the required UI patterns.
  • API integration: automatically wire generated API types to page components to render data.
  • Design-doc compliance: ensure pages strictly follow the specifications located in docs/metaforge/specs/.

Quick Start

Load the design doc from docs/metaforge/specs/ first and create the page component by wiring shadcn components to the generated API types.

Frequently Asked Questions about frontend-page

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

FAQPage Schema
How do I turn a design doc into a frontend page using shadcn components?▼

To turn a design doc into a frontend page, load the specification from docs/metaforge/specs/ and compose shadcn components to assemble the UI. The generated page component strictly adheres to the design doc without manual redesign, rendering data by wiring to generated API client types.

How do I wire API client types to generated frontend pages?▼

You wire API client types to frontend pages by connecting the generated API types located under src/api directly to the page components. This integration automatically renders data within the assembled shadcn UI components, ensuring the page adheres to the formal specification.

What are the requirements for generating pages from design docs?▼

Generating pages from design docs requires shadcn initialization, a design document located at docs/metaforge/specs/, and generated API clients. Generated UI components must reside under src/components/ui, with API types placed under src/api for proper wiring.

Does frontend page generation work without an existing design document?▼

Frontend page generation does not work without an existing design document. The skill requires a formal design document at docs/metaforge/specs/ to drive page construction, ensuring the assembled shadcn components strictly follow the defined specifications without manual redesign.

Can I use my own custom UI components instead of shadcn for design-doc page assembly?▼

You cannot use custom UI components instead of shadcn for design-doc page assembly. The skill specifically composes pages by leveraging shadcn components generated under src/components/ui, ensuring strict compliance with the design doc and seamless API type integration.

Related Skills

Explore More Software Engineering Skills→
signalbeam-iosignalbeam-io
2

add-feature

Generate React and TypeScript frontend feature modules with pages, components, API stubs, and route wiring.

Official
Intermediate
VidyaBodepudiVidyaBodepudi
2

browser-testing-with-devtools

Inspect frontend UI rendering, responsiveness, and accessibility with browser DevTools.

Community
Intermediate
adnanmuelleradnanmueller
2

senior-frontend-engineer

Translate design specs and API contracts into Next.js frontend interfaces.

Community
Advanced
TheeCoderAhmedTheeCoderAhmed

designing-ui

Generate unique UI designs by synthesizing component libraries with design movements.

Community
Advanced