oxygen-page-builder-claude-skill

🥈Silver

@falconhoster

a claude skill for creating oxygen pages

1810Updated 3w ago

Intermediate30min to implementautomation

Saves ~15 min per use

Quick InstallView Source

git clone https://github.com/falconhoster/oxygen-page-builder-claude-skill.git

Works with:

Claude

Overview

About This Skill

a claude skill for creating oxygen pages

Setup & Installation

Quick Install

No install command available. Check the GitHub repository for manual installation instructions.

Alternative Install (Git Clone)

git clone https://github.com/falconhoster/oxygen-page-builder-claude-skill

Requirements

Claude Code or compatible AI agent
Works with: Claude

Quick Start Guide

Install the Skill

Copy the install command above and run it in your terminal.

Open Your AI Agent

Launch Claude Code, Cursor, or your preferred AI coding agent.

Try It Out

Use the prompt template or examples below to test the skill.

Customize

Adapt the skill to your specific use case and workflow.

Usage Examples

Prompt Template

Act as an Oxygen Page Builder expert. Create a detailed page layout for [COMPANY] in the [INDUSTRY] sector. The page should include [NUMBER] sections with the following elements: [ELEMENTS]. Ensure the design is responsive and mobile-friendly. Provide a step-by-step guide to implement this layout in Oxygen Page Builder.

Example Output

## Oxygen Page Builder Layout for GreenTech Solutions

### Header Section
- **Logo**: GreenTech Solutions logo on the left
- **Navigation Menu**: Right-aligned with links to Home, Services, About, Blog, and Contact
- **Call-to-Action Button**: 'Get a Free Quote' button in the top-right corner

### Hero Section
- **Background Image**: High-quality image of solar panels
- **Headline**: 'Harness the Power of the Sun'
- **Subheadline**: 'Affordable and reliable solar solutions for your home or business'
- **Primary CTA Button**: 'Explore Our Services'
- **Secondary CTA Button**: 'Request a Consultation'

### Services Section
- **Title**: 'Our Services'
- **Service Cards**: Three cards with icons and brief descriptions for Solar Panel Installation, Energy Storage Solutions, and Maintenance Services

### Testimonials Section
- **Title**: 'What Our Clients Say'
- **Testimonial Cards**: Three cards with client photos, names, and testimonials

### Contact Section
- **Title**: 'Get in Touch'
- **Contact Form**: Fields for Name, Email, Phone, and Message
- **Contact Information**: Address, phone number, and email
- **Map**: Embedded Google Map showing the company's location

### Footer Section
- **Newsletter Signup**: Field for email address with a 'Subscribe' button
- **Quick Links**: Links to Privacy Policy, Terms of Service, and Sitemap
- **Social Media Icons**: Linked to the company's social media profiles

## Implementation Steps
1. **Create a New Page**: In the WordPress dashboard, go to Pages > Add New and name your page.
2. **Open Oxygen Builder**: Click on 'Edit with Oxygen' to start building your page.
3. **Header Section**: Add a new section and use the Header template to create the navigation menu and logo placement.
4. **Hero Section**: Add a new section and use the Hero template. Upload the background image and add the headline, subheadline, and CTA buttons.
5. **Services Section**: Add a new section and use the Services template. Customize the service cards with the provided information.
6. **Testimonials Section**: Add a new section and use the Testimonials template. Add the client photos, names, and testimonials.
7. **Contact Section**: Add a new section and use the Contact Form template. Customize the form fields and add the contact information and map.
8. **Footer Section**: Add a new section and use the Footer template. Customize the newsletter signup, quick links, and social media icons.
9. **Preview and Publish**: Preview your page to ensure everything looks good on both desktop and mobile devices. Make any necessary adjustments and then publish your page.