oxygen-page-builder-claude-skill
🥈Silvera claude skill for creating oxygen pages
1910Updated 4mo ago
Intermediate30min to implementautomation
Saves ~15 min per use
Quick InstallView Source
git clone https://github.com/falconhoster/oxygen-page-builder-claude-skill.gitWorks with:
Claude
Overview
About This Skill
The oxygen-page-builder-claude-skill is an automation skill that leverages Claude to streamline the creation of Oxygen pages. Designed by falconhoster, this skill integrates Claude's capabilities to assist with page building workflows. It enables users to automate aspects of Oxygen page creation through Claude's AI assistance.
How to Use
[{"step":"Prepare Your Requirements","action":"Gather [WEBSITE_NAME], [PAGE_TITLE], [PAGE_TYPE], and [KEY_CONTENT_GOALS]. Decide on [COLOR_SCHEME] and [FONT_PAIRING] that align with your brand. List 3-5 key sections you want included (e.g., hero, features, testimonials, CTA, footer).","tip":"Use your brand guidelines document for color hex codes and font families. If you don't have guidelines, start with a tool like Coolors.co for color palettes and Google Fonts for typography."},{"step":"Generate the Oxygen Builder JSON","action":"Paste your requirements into the prompt template and ask the AI to generate the Oxygen Builder JSON export code. Review the output for accuracy and completeness.","tip":"Specify the exact number of sections you want (e.g., 'include 5 sections: hero, features grid, testimonials, CTA, and footer'). This ensures the AI doesn't generate unnecessary sections."},{"step":"Import and Customize in Oxygen Builder","action":"In Oxygen Builder, go to *Settings > Import/Export*, upload the generated JSON, and import it. Replace all placeholder content (e.g., company names, testimonials, URLs) with your actual content.","tip":"Use Oxygen's 'Find and Replace' feature (Ctrl+F) to quickly update all instances of placeholder text like '[WEBSITE_NAME]' or 'Sortd'."},{"step":"Adjust Design and Layout","action":"Modify the color scheme in *Settings > Style > Colors* to match your brand. Adjust fonts in *Settings > Style > Typography*. Use Oxygen's responsive design tools to ensure the page looks good on all devices.","tip":"Test the page on mobile, tablet, and desktop views in Oxygen's responsive mode. Adjust padding and font sizes to ensure readability and visual appeal across all breakpoints."},{"step":"Connect to External Tools (Optional)","action":"If your page includes forms or dynamic content, connect it to your CRM, email marketing tool, or analytics platform. Use Oxygen's dynamic content features or plugins like 'Oxygen + ACF' or 'Oxygen + WooCommerce' for advanced integrations.","tip":"For lead capture forms, use a tool like Zapier to automatically add new leads to your CRM or email list. Test all form submissions to ensure data is being captured correctly."},{"step":"Publish and Test","action":"Publish the page and thoroughly test all interactive elements (buttons, forms, sliders, animations). Use tools like BrowserStack or Chrome DevTools to check cross-browser compatibility.","tip":"Run a final SEO check using a tool like Yoast SEO or Rank Math to ensure your page is optimized for search engines. Add meta titles, descriptions, and alt text for images."}]
Use Cases
Automating repetitive Oxygen page structure and layout creation
Using Claude to generate page content and copy for Oxygen sites
Streamlining page builder workflows with AI-assisted design suggestions
Reducing manual page setup time through automated page generation
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-skillRequirements
- Claude Code or compatible AI agent
- Works with: Claude
Quick Start Guide
1
Install the Skill
Copy the install command above and run it in your terminal.
2
Open Your AI Agent
Launch Claude Code, Cursor, or your preferred AI coding agent.
3
Try It Out
Use the prompt template or examples below to test the skill.
4
Customize
Adapt the skill to your specific use case and workflow.
Usage Examples
Prompt Template
Generate a fully functional Oxygen Builder page for [WEBSITE_NAME] with the following specifications: [PAGE_TITLE], [PAGE_TYPE (e.g., landing page, sales page, blog post)], and [KEY_CONTENT_GOALS]. Include a hero section, [NUMBER] content sections, and a footer. Use modern Oxygen Builder design best practices with [COLOR_SCHEME] and [FONT_PAIRING]. Provide the Oxygen Builder JSON export code and a step-by-step implementation guide.
Example Output
```json
{
"oxygen_builder_export": {
"version": "3.9",
"title": "Premium SaaS Landing Page",
"template": "oxygen",
"settings": {
"color_scheme": "#2563eb",
"font_pairing": "Inter + Playfair Display",
"breakpoints": {
"mobile": "768px",
"tablet": "1024px"
}
},
"sections": [
{
"type": "hero",
"id": "hero-section",
"classes": "bg-gradient-to-r from-blue-600 to-indigo-800 text-white",
"elements": [
{
"type": "container",
"children": [
{
"type": "heading",
"tag": "h1",
"content": "Unlock Your Team's Potential with AI-Powered Workflows",
"classes": "text-4xl md:text-6xl font-bold mb-6"
},
{
"type": "paragraph",
"content": "Transform your Gmail inbox into a visual task management system with Sortd. Organize leads, track follow-ups, and collaborate seamlessly—all without leaving your email.",
"classes": "text-xl mb-8 max-w-2xl"
},
{
"type": "button",
"text": "Get Started Free",
"url": "https://sortd.com/signup",
"classes": "bg-white text-blue-600 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition"
}
]
}
]
},
{
"type": "features",
"id": "features-section",
"classes": "py-16 bg-gray-50",
"elements": [
{
"type": "container",
"children": [
{
"type": "heading",
"tag": "h2",
"content": "Why Teams Love Sortd",
"classes": "text-3xl font-bold text-center mb-12"
},
{
"type": "grid",
"columns": 3,
"children": [
{
"type": "card",
"icon": "📊",
"title": "Visual Task Management",
"content": "Turn emails into Kanban boards with drag-and-drop simplicity. See your entire workflow at a glance."
},
{
"type": "card",
"icon": "🔍",
"title": "AI-Powered Insights",
"content": "Automatically detect urgency levels and track response times to prioritize critical communications."
},
{
"type": "card",
"icon": "👥",
"title": "Team Collaboration",
"content": "Shared inboxes for sales, support, and operations—assign tasks and monitor progress in real-time."
}
]
}
]
}
]
},
{
"type": "testimonials",
"id": "testimonials-section",
"classes": "py-16",
"elements": [
{
"type": "container",
"children": [
{
"type": "heading",
"tag": "h2",
"content": "Trusted by 80,000+ Professionals",
"classes": "text-3xl font-bold text-center mb-12"
},
{
"type": "slider",
"children": [
{
"type": "testimonial",
"quote": "Sortd has been a game-changer for our sales team. We're closing deals 30% faster with better organization.",
"author": "Sarah Chen",
"title": "Sales Director at TechFlow Inc."
},
{
"type": "testimonial",
"quote": "The shared inbox feature transformed our support workflow. No more missed emails or duplicate responses.",
"author": "Marcus Rodriguez",
"title": "Customer Support Lead at GreenEnergy"
}
]
}
]
}
]
},
{
"type": "cta",
"id": "cta-section",
"classes": "py-16 bg-blue-600 text-white",
"elements": [
{
"type": "container",
"children": [
{
"type": "heading",
"tag": "h2",
"content": "Ready to Transform Your Workflow?",
"classes": "text-3xl font-bold text-center mb-6"
},
{
"type": "paragraph",
"content": "Join thousands of teams using Sortd to streamline their email-based workflows. Start your free trial today.",
"classes": "text-xl text-center mb-8 max-w-2xl mx-auto"
},
{
"type": "button",
"text": "Start Free Trial",
"url": "https://sortd.com/signup",
"classes": "bg-white text-blue-600 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition block mx-auto"
}
]
}
]
},
{
"type": "footer",
"id": "footer-section",
"classes": "py-12 bg-gray-800 text-white",
"elements": [
{
"type": "container",
"children": [
{
"type": "grid",
"columns": 4,
"children": [
{
"type": "column",
"children": [
{
"type": "heading",
"tag": "h3",
"content": "Product",
"classes": "font-semibold mb-4"
},
{
"type": "link",
"text": "Features",
"url": "/features"
},
{
"type": "link",
"text": "Pricing",
"url": "/pricing"
},
{
"type": "link",
"text": "Mobile App",
"url": "/mobile"
}
]
},
{
"type": "column",
"children": [
{
"type": "heading",
"tag": "h3",
"content": "Resources",
"classes": "font-semibold mb-4"
},
{
"type": "link",
"text": "Blog",
"url": "/blog"
},
{
"type": "link",
"text": "Videos",
"url": "/videos"
},
{
"type": "link",
"text": "Help Center",
"url": "/support"
}
]
},
{
"type": "column",
"children": [
{
"type": "heading",
"tag": "h3",
"content": "Company",
"classes": "font-semibold mb-4"
},
{
"type": "link",
"text": "About Us",
"url": "/about"
},
{
"type": "link",
"text": "Careers",
"url": "/careers"
},
{
"type": "link",
"text": "Contact",
"url": "/contact"
}
]
},
{
"type": "column",
"children": [
{
"type": "heading",
"tag": "h3",
"content": "Legal",
"classes": "font-semibold mb-4"
},
{
"type": "link",
"text": "Privacy Policy",
"url": "/privacy"
},
{
"type": "link",
"text": "Terms of Service",
"url": "/terms"
},
{
"type": "link",
"text": "GDPR",
"url": "/gdpr"
}
]
}
]
},
{
"type": "divider",
"classes": "border-gray-700 my-8"
},
{
"type": "social",
"platforms": ["facebook", "twitter", "linkedin", "youtube"],
"classes": "flex justify-center space-x-4"
},
{
"type": "copyright",
"text": "© 2023 Sortd. All rights reserved."
}
]
}
]
}
]
}
}
```
### Implementation Guide:
1. **Import the JSON**: In Oxygen Builder, go to *Settings > Import/Export* and import the provided JSON file. This will create all sections automatically.
2. **Customize Content**: Replace placeholder text (e.g., company names, testimonials) with your actual content. Update URLs to match your domain structure.
3. **Adjust Styling**: Modify the color scheme in *Settings > Style > Colors* to match your brand. Update fonts in *Settings > Style > Typography* if needed.
4. **Test Responsiveness**: Use Oxygen's responsive design tools to ensure all sections look good on mobile, tablet, and desktop. Adjust padding and font sizes as needed.
5. **Publish**: Once satisfied, publish the page and test all interactive elements (buttons, forms, sliders).
**Pro Tip**: Use Oxygen's dynamic content features to connect this page to your CRM or email marketing tool for seamless lead capture and follow-up automation.Apply to these tools
Browse all toolsOxygen
digital banking for personal and business
Claude
AI assistant built for thoughtful, nuanced conversation
Microsoft Teams
Get more done every day with Microsoft Teams – powered by AI
GPT for work
Automate your spreadsheet tasks with AI power
Respell
Agentic AI Workflow platform
Notion
Connected workspace for docs, wikis, and projects
Compatible MCP servers
Browse all MCP servers
Find the right skills for your stack
Take a free 3-minute scan and get personalized AI skill recommendations.
Take free scan