Agent skill · design visual · aiskillstore
page-builder
Helper for building landing pages and marketing sites using Tailark components.
Why this skill is useful
Provides a structured approach to selecting and customizing Tailark components for marketing pages, which the AI wouldn't reliably generate on its own.
What it needs
About 1k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
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.
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/page-builder