create-page

Generate routable React pages by composing registry components with Tailwind styling.

Updated Mar 15, 2026
One-click install
npx skills add https://github.com/TETRA2000/figma-web-studio --skill create-page-tetra2000
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: create-page
Source: https://github.com/TETRA2000/figma-web-studio/tree/main/.claude/skills/create-page
Command: npx skills add https://github.com/TETRA2000/figma-web-studio --skill create-page-tetra2000

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Building web pages manually from scratch is time-consuming and error-prone; this skill automates page creation by composing existing React components into routable pages following directory-based routing conventions.

Core Features & Use Cases

  • Generates route-based pages by assembling components from a central registry
  • Enforces directory-based routing conventions and consistent styling with Tailwind
  • Useful for quickly scaffolding pages like about, contact, or product detail pages

Quick Start

Describe the page you want and the route, and the skill will generate a routable page by composing existing components.

Frequently Asked Questions about create-page

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

FAQPage Schema
How do I generate React pages from existing components automatically?▼

To generate React pages from existing components, this skill composes registered components into routable page files. It automatically creates route files and updates documentation based on your directory-based routing structure.

What is directory-based routing for React applications?▼

Directory-based routing for React applications is a convention where routes map directly to folder structures. This skill enforces this by generating route files at paths like src/pages/{route}/index.tsx.

How do I scaffold a new route using a component registry?▼

You scaffold a new route by describing the desired page and route to the skill. It queries your component registry, assembles relevant components, applies Tailwind styling, and generates the index.tsx file.

Do I need Tailwind CSS to auto-create pages with this approach?▼

Yes, you need Tailwind CSS to auto-create pages with this approach. The skill leverages Tailwind-based styling to enforce consistent visual design across the newly composed component pages.

What's the best way to automate React routing for new pages?▼

The best way to automate React routing for new pages is using a skill that applies directory-based conventions. It eliminates manual setup by generating route files and updating index documentation simultaneously.