Installs into .claude/skills of the current project.
Are you the author of Page Builder?
Add the live security badge to your README. It updates with every re-scan.
[](https://www.skillsdirectory.com/skills/aiskillstore-page-builder)
---
name: page-builder
description: Helper for building landing pages and marketing sites using Tailark components.
deps: ["ui-handler"]
---
# Page Builder Skill
This skill helps you construct high-quality marketing pages by selecting and composing pre-built "Tailark" components.
## Workflow
1. **Analyze Requirement**: Determine the type of page (Landing, Pricing, About, Contact) and the sections needed (Hero, Features, Social Proof, etc.).
2. **Select Components**: Consult `reference.md` to pick the most suitable components for each section.
3. **Implementation**:
- Import the chosen components into your `page.tsx`.
- **Copy & Customize**: Do not just import; feel free to copy the component code into a new local component (e.g., `src/components/landing/my-hero.tsx`) if you need to change text, images, or layout significantly.
- **Composition**: Stack them in a semantic `<main>` tag.
## Component Selection Strategy
- **Landing Page**: `HeroSection` -> `LogoCloud` -> `Features-12` -> `WallOfLoveSection` -> `CallToAction`.
- **Pricing Page**: `Pricing` or `PricingComparator` -> `FAQs`.
- **About Page**: `Content-2` -> `StatsSection` -> `TeamSection`.
- **Contact Page**: `ContactSection`.
## Customization
All components are built with Tailwind CSS and Shadcn UI.
- **Icons**: Uses `lucide-react`.
- **Images**: Uses `next/image`. Replace placeholders with real assets.
- **Colors**: Respects the global theme.
## Reference
See `reference.md` for a complete list of available components with visual descriptions and recommendations.
