page-builder
Helper for building landing pages and marketing sites using Tailark components.
Best use case
page-builder is best used when you need a repeatable AI agent workflow instead of a one-off prompt. It is especially useful for teams working in multi. Helper for building landing pages and marketing sites using Tailark components.
Helper for building landing pages and marketing sites using Tailark components.
Users should expect a more consistent workflow output, faster repeated execution, and less time spent rewriting prompts from scratch.
Practical example
Example input
Use the "page-builder" skill to help with this workflow task. Context: Helper for building landing pages and marketing sites using Tailark components.
Example output
A structured workflow result with clearer steps, more consistent formatting, and an output that is easier to reuse in the next run.
When to use this skill
- Use this skill when you want a reusable workflow rather than writing the same prompt again and again.
When not to use this skill
- Do not use this when you only need a one-off answer and do not need a reusable workflow.
- Do not use it if you cannot install or maintain the related files, repository context, or supporting tools.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/page-builder/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How page-builder Compares
| Feature / Agent | page-builder | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Helper for building landing pages and marketing sites using Tailark components.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# 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.Related Skills
project-map-builder
生成或更新用户指定文件夹的 PROJECT_MAP.md。适用于用户要求目录地图/项目地图/代码仓概览/文件夹级说明/更新已有 PROJECT_MAP.md 的场景。必须先询问要扫描的文件夹范围，禁止默认全仓库扫描；支持单目录或多目录（合并或分别生成）。
lesson-builder
帮助用户通过讨论完成课程大纲和课件。当用户说"备课"、"做课件"、"准备课程"时触发。
wiki-page-writer
Generates rich technical documentation pages with dark-mode Mermaid diagrams, source code citations, and first-principles depth. Use when writing documentation, generating wiki pages, creating technical deep-dives, or documenting specific components or systems.
viral-generator-builder
Expert in building shareable generator tools that go viral - name generators, quiz makers, avatar creators, personality tests, and calculator tools. Covers the psychology of sharing, viral mechanics, and building tools people can't resist sharing with friends. Use when: generator tool, quiz maker, name generator, avatar creator, viral tool.
telegram-bot-builder
Expert in building Telegram bots that solve real problems - from simple automation to complex AI-powered bots. Covers bot architecture, the Telegram Bot API, user experience, monetization strategies, and scaling bots to thousands of users. Use when: telegram bot, bot api, telegram automation, chat bot telegram, tg bot.
slack-bot-builder
Build Slack apps using the Bolt framework across Python, JavaScript, and Java. Covers Block Kit for rich UIs, interactive components, slash commands, event handling, OAuth installation flows, and Workflow Builder integration. Focus on best practices for production-ready Slack apps. Use when: slack bot, slack app, bolt framework, block kit, slash command.
seo-authority-builder
Analyzes content for E-E-A-T signals and suggests improvements to build authority and trust. Identifies missing credibility elements. Use PROACTIVELY for YMYL topics.
security-bluebook-builder
Build security Blue Books for sensitive apps
reference-builder
Creates exhaustive technical references and API documentation. Generates comprehensive parameter listings, configuration guides, and searchable reference materials. Use PROACTIVELY for API docs, configuration references, or complete technical specifications.
personal-tool-builder
Expert in building custom tools that solve your own problems first. The best products often start as personal tools - scratch your own itch, build for yourself, then discover others have the same itch. Covers rapid prototyping, local-first apps, CLI tools, scripts that grow into products, and the art of dogfooding. Use when: build a tool, personal tool, scratch my itch, solve my problem, CLI tool.
pagerduty-automation
Automate PagerDuty tasks via Rube MCP (Composio): manage incidents, services, schedules, escalation policies, and on-call rotations. Always search tools first for current schemas.
mcp-builder-ms
Guide for creating high-quality MCP (Model Context Protocol) servers that enable LLMs to interact with external services through well-designed tools. Use when building MCP servers to integrate exte...