| 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
- Analyze Requirement: Determine the type of page (Landing, Pricing, About, Contact) and the sections needed (Hero, Features, Social Proof, etc.).
- Select Components: Consult
reference.md to pick the most suitable components for each section.
- 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.
