TETRA2000/create-page

Create Page Skill

Parameters

• description (required): Natural language description of the page to create
• route (required): URL route path (e.g., "about", "products/detail")
• referenceUrl (optional): URL of a website to use as visual reference for page layout and design
• scope (optional): repository or local (default: ask user)

Workflow

1. Capture Reference Website (if referenceUrl provided)

When the user provides a reference URL (or mentions a website they want the page to look like):

1. Open the browser and navigate to the reference URL:

   playwright-cli open {referenceUrl}
   

2. Take a full-page screenshot to capture the overall layout:

   playwright-cli screenshot --filename=reference-page.png
   

3. Take a snapshot to extract the page structure, sections, and navigation patterns:

   playwright-cli snapshot --filename=reference-structure.yaml
   

4. Scroll down and capture additional sections if the page is long:

   playwright-cli press End
   playwright-cli screenshot --filename=reference-page-bottom.png
   

5. Close the browser:

   playwright-cli close
   

Use the captured layout and structure as a reference — adapt section ordering, visual hierarchy, and spacing patterns to the project's existing components and Tailwind theme tokens. Do not copy arbitrary CSS values; map everything to the project's design system.

2. Gather Context

• Read shared/references/component-registry.md to discover existing components
• Read shared/references/tailwind-theme.md for design tokens
• Read docs/components.md for the full component index

3. Determine Scope and Path

If scope not specified, ask the user:

• repository → src/pages/{route}/index.tsx
• local → src/pages/_local/{route}/index.tsx

Create nested directories as needed for multi-segment routes.

4. Generate Page

Create index.tsx at the route path:

• Default export a React component
• Import and compose existing components from the registry
• Create new inline sections as needed
• Use Tailwind CSS utility classes for layout and styling
• Follow the page structure: header → main content → footer

5. Update Indexes

• Add entry to docs/pages.md (repository) or docs/_local/pages.md (local)

Format:

## {Title}
- **Route**: `/{route}`
- **Title**: {page title}
- **Description**: {description}
- **Path**: `src/pages/{route}/index.tsx`
- **Dependencies**: {list of components used}
- **Figma**: —

6. Preview

• Launch dev server preview for visual verification
• Use playwright-cli to capture a screenshot if available

Output

Report:

1. File created (path)
2. Route accessible at /{route}
3. Component dependencies used
4. Index documents updated
5. Screenshot captured (if applicable)

Example

User: "Create an about page with a hero section, team member cards, and a contact form"

Creates:

• src/pages/about/index.tsx — Page composing Hero, Card, and form elements
• Updates docs/pages.md

User: "Create a landing page like https://linear.app — route it to /landing"

Captures the Linear website via playwright-cli for layout reference, then creates:

• src/pages/landing/index.tsx — Page with hero, features grid, and CTA sections inspired by Linear's layout
• Updates docs/pages.md