# Page Format > Use this skill when a marketer is drafting page copy in Claude/ChatGPT/Gemini and wants page structure and copy that map cleanly to LandingRabbit-supported sections and content items. - Skill: `landingrabbit/page-format` (Agent Skill) - Install (CLI): `npx skillmds@latest add landingrabbit/page-format` - Raw SKILL.md: https://api.skillmd.com/api/skills/landingrabbit/page-format/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Coding & Dev Tools - Author: LandingRabbit (https://skillmd.com/u/landingrabbit) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/landingrabbit/page-format --- # LandingRabbit Page Format Skill ## Purpose Use this skill when a user is writing landing page copy in Claude/ChatGPT/Gemini and wants: - Use the LLM service of their choice for content brainstorming and content creation and later bring that content into LandingRabbit. - Get the copy in a markdown format that LandingRabbit can parse reliably and turn into a page. - Use only supported LandingRabbit section types and content fields so that users can easily import their ready page structure and copy text into LandingRabbit ## Step-by-step task Your task is to read user's ready landing page copy and format it into the LandingRabbit-Ready Markdown. 1. If not already discussed in the chat, ask user to provide a ready copy text for a landing page (e.g., homepage, ads landing page, newsletter subscription page, lead magnet page, pricing page, etc.) 2. Review the planned copy text and page structure 3. Ask the user for more information if you are unsure about any parts of the content and what section type in LandingRabbit would fit the best for each part of the plan 4. Match the copy with the available sections and content items 5. Provide your answer in LandingRabbit-ready markdown following the example answers ## Important instructions - Provide your answer as a single document that is easy to copy and paste to LandingRabbit - Avoid making changes to user's text and section order - Only share the LandingRabbit-ready markdown with section types and suggested layouts. Don't add any additional comments or explanations in your answer - Examples in this skill are only to show the supported structure. Preserve user's content and tone of voice - You don't need to use all available sections and content items. Respect the user's ready content - Use `---` only between sections in the final answer, never inside section content blocks - Never invent any of the optional layout configurations. Refer to the user's instructions, and ask user's guidance when needed. - If the user is planning a blog post, help document, or any other page that is a standard article format, you can use a single Custom section with markdown. - Do not output URL-only lines (e.g. `/schedule-a-call`, `https://...`) as normal copy text; keep URLs only inside markdown links `[text](url)` ## Available sections - `hero`: The main section with the opening value proposition and primary conversion action on most pages. - `trustedBy`: Social proof section for logos and credibility content. - `collection`: Structured how it works, benefits, and list of services/features blocks with repeatable items. These are the most typical layouts on any landing page. - `testimonials`: Customer proof quotes - `pricing`: A single service offer or pricing plan comparison table - `steps`: Process, checklist, sequence of actions/outcomes, or problems customers face. Only used for clear and simple lists and statements, not for describing something more complex, requiring multiple repeatable items. - `comparison`: Before/after or current/future contrast comparison. For example, showing how the customer felt before and after purchasing the service. - `faq`: Question-and-answer section to handle objections. - `cta`: Focused conversion section, often near the end, but sometimes in between the page content as well. - `custom`: Free-form mixed content (headings, text blocks, image, embed, CTA). Typically used for sections like "About us", simple statements (e.g., H2 and text block), or a full article page content - `tabs`: Clickable tabs, each swapping in its own content card. For example, one tab per audience or use case. - `feed`: Dynamic list of posts from a workspace collection (configuration-only). Shows, for example, the latest blog posts and news articles on a homepage. ## Response format for sections Provide the section type in your answer (e.g., Section type: `hero`), and when requested by the user, section-specific layout configurations. For each section, use markdown-native structure like this: - Eyebrow: `[eyebrow]: ...` - Icon (for `collection` + `boxes-icons` items): `[icon]: ...` (leave empty when user should pick icons in UI) - Smallprint: `[smallprint]: ...` - Section or item title: `#`, `##`, `###` - Description/body: plain markdown paragraphs - CTA links: one per line (each on its own line), e.g.: `[Primary CTA](url)` `[Secondary CTA](url)` - Images: `![Alt](url)` - Embeds/forms/widgets: fenced `html` blocks In `hero`, `cta`, and `collection` (alternate layout), users can add: - A grid of boxes that show, for example, company achievements or details about the service. Start with a `[boxes]` line, then one heading + paragraph per box (`###` in hero/cta, `####` inside a collection-alternate item). - fields: `[eyebrow]: ...` (optional), title (the `###`/`####` heading), description (paragraph), CTA links (one per line) - A testimonial from a happy client or partner, supporting the section copy and giving it credibility. Start with a `[testimonial]` line. - fields: quote (first line), name, role, company (In `collection`, `[boxes]` and `[testimonial]` apply only when `suggestedLayout: alternate`.) Use `---` between sections. ## Bullet Lists in Descriptions In any description or subtitle field, start a line with one of these markers to add a styled bullet list: - `✅ Text` - success (green checkmark); benefits, features, positive outcomes - `✓ Text` - success (legacy plain checkmark); benefits, features, positive outcomes - `☑ Text` - check (plain checkmark); checklists, "what's included" - `❌ Text` (or `✗`) - destructive (red X); problems, pain points, negative items - `⭐ Text` - star; highlights, featured items - `→ Text` (or `➡️`) - arrow; directional flows, "next step" - `- Text` (or `*`, `•`) - standard bullet (dot); neutral lists - `:word: Text` - a custom icon by one word, e.g. `:rocket: Build faster`. The word resolves to a matching icon if there's a confident match; otherwise it renders as a plain dot. Mix marker types and regular paragraphs in the same field. Consecutive lines with the same marker become one list. **Example - hero description with success bullets:** ```markdown # Your page headline ✅ Pages live in 5 mins ✅ Loved by 200+ teams ✅ GDPR-friendly [Get started](/signup) ``` ## Suggested Layout For sections that support multiple layouts, add `suggestedLayout:` on its own line before the section content. --- ### Hero - `horizontal` _(default)_ - text left, media right - `horizontal-reversed` - media left, text right - `vertical` - centered text, no media or media below Based on the user's request, you can also define optional layout configurations: - `style: ` — apply a named section style - `mediaVisibility: all | desktop | mobile | none` — show or hide the hero media per device (`none` hides it) - `imageFit: fill | free-ratio` — how the hero media fills its slot --- ### Steps `stepDecoration` controls the icon shown beside each item. Add it before the section content. - `number` _(default)_ - numbered; use for sequential process steps - `none` - no icon; use for plain content lists - `check` - checkmark; use for feature checklists and "what's included" lists - `star` - star; use for highlights and notable achievements - `arrow` - arrow; use for directional flows and "next step" sequences - `success` - filled circle check; use for benefits and positive outcomes - `destructive` - filled circle X; use for problems and pain points If steps item lines already start with emoji markers (for example `😩`, `✅`, `🚀`), set `stepDecoration: none`. If `stepDecoration` is not `none`, remove leading emoji/icon markers from step lines. Based on the user's request, you can also define optional layout configurations: - `style: ` — apply a named section style - `mediaVisibility: all | desktop | mobile | none` — show or hide the section media per device - `imageFit: fill | free-ratio` — how the section media fills its slot - `mediaPosition: left | right` — which side of the list the media sits on - `stepIcon: ` — custom icon beside every step (replaces `stepDecoration`) --- ### Tabs - `top` _(default)_ - tab strip above the card - `left` - tab strip in a column left of the card - `right` - tab strip in a column right of the card Based on the user's request, you can also define optional layout configurations: - `cardStyle: stacked | split` — card as one stack, or media in its own column (`top` layout only) - `mediaSide: left | right` — which side the media column is on (`top` layout with `cardStyle: split`) - `tabContentMode: expand | show-all` — whether only the active tab shows its description, or all do (`left`/`right` layouts only) - `autoplay: | off` — auto-advance the tabs - `autoplayProgress: on | off` — moving progress bar on each tab - `style: ` — apply a named section style - `imageFit: fill | free-ratio` — how card media fills its slot --- ### Collection - `alternate` - narrative benefit blocks (each item: title + paragraph, alternating sides) → For example, Benefits, Value propositions, Solutions, "Why choose us", Case study examples and Customer Stories - `boxes` - feature grid with per-item images → For example, Services, Features, Integrations, Technical capabilities - `boxes-text` - text-only feature grid, no images → For example, Use cases, Capability lists, Short feature summaries - `boxes-icons` - icon grid (icon handled separately from text content) → Often quick-scan feature/service highlights or how it works in a few steps (numbers as icons) When using `boxes-icons`, do NOT add item `[eyebrow]: ...` above the icon unless clearly requested in the planned copy. For each `[icon]:`, use ONE descriptive word (e.g. `[icon]: rocket`), an exact CamelCase component name that preferably contains one or two semantic words (e.g. `[icon]: IconRocket` or `[icon]: IconArrowRight`), or leave it empty (`[icon]:`) for the user to pick in the UI. Exact names and confident single-word matches resolve to real icons. If a phrase is supplied, only its first word is searched; unmatched values fall back to empty. Based on the user's request, you can also define optional layout configurations: - `style: ` — apply a named section style - `imageFit: fill | free-ratio` — how item media fills its slot (`alternate` and `boxes` layouts only) - `sectionHeaderPosition: above | left` — section header placement (boxes layouts only) - `dividers: on | off` — dividers between boxes (boxes layouts only) --- ### Testimonials - `carousel` _(default)_ - horizontal scroll, best for 3+ testimonials - `grid` - all testimonials visible at once, best for 2-4 Based on the user's request, you can also define optional layout configurations: - `style: ` — apply a named section style - `sectionHeaderPosition: above | left | right` — section header placement - `imageFit: fill | free-ratio` — how testimonial media fills its slot - `carouselAutoplay: on | off` — auto-advance the carousel (carousel layout only) - `carouselAutoplayDuration: 2-30` — seconds per slide (decimals allowed; only with autoplay on) --- ### Comparison - `boxes-text` _(default)_ - side-by-side text-only comparison - `boxes` - sides with a per-side image - `boxes-icons` - sides with a per-side icon (provided via `[icon]: ...` inside each side) Bullet line icons: a leading marker chooses that line's icon and is removed from the text — `✅` → success, `✓` → check, `❌`/`✗` → destructive, `⭐` → star, `→` → arrow. Unmarked lines use the side defaults (before: destructive, after: success). One marker per line; do not use other emoji as line markers. `imageFit: fill | free-ratio` controls how side images fill their slots (`boxes` layout only). --- ### CTA - `default` _(default)_ - centered title, description, and buttons - `embed` - title and buttons with image or embed alongside Based on the user's request, you can also define optional layout configurations: - `style: ` — apply a named section style - `mediaVisibility: all | desktop | mobile | none` — show or hide the media per device (embed layout only) - `imageFit: fill | free-ratio` — how the media fills its slot (embed layout only) --- ### Custom - `left` _(default)_ - left-aligned, article or blog style - `middle` - centered, landing page style Based on the user's request, you can also define optional layout configurations: - `style: ` — apply a named section style --- ### Pricing Pricing has no layout options. Based on the user's request, you can also define optional layout configurations: - `style: ` — apply a named section style - `pricingSwitch: billing-period=toggle, currency=tabs` — selector style per switch (bare `toggle` or `tabs` applies to the billing switch; `toggle` needs exactly two options) --- ### FAQ FAQ has no layout options. Based on the user's request, you can also define optional layout configurations: - `style: ` — apply a named section style - `sectionHeaderPosition: above | left` — section header placement --- ### TrustedBy TrustedBy has no layout options. Based on the user's request, you can also define optional layout configurations: - `style: ` — apply a named section style - `logosScroll: off | right-to-left | left-to-right` — auto-scroll the logo row (off by default) - `logosScrollSpeed: 5-120` — seconds per scroll loop (only when scroll is on) --- ### Feed - `boxes` _(default)_ - post grid with per-post images - `boxes-text` - text-only post grid, no images - `alternate` - narrative post blocks, alternating sides Feed configuration goes on its own lines after `Section type: feed`: - `suggestedLayout`: `boxes` | `boxes-text` | `alternate` - `style`: `
` - `collection`: `` - `itemCount`: `1`-`100` - `showDescription`: `on` | `off` - `showTimestamp`: `on` | `off` - `readMoreText`: `` - `imageFit`: `fill` | `free-ratio` (boxes and alternate only) ## Section Guide ### 1) Hero (`type: 'hero'`) #### Purpose Open with the primary promise, context, and next action. #### Section fields - `eyebrow` - `title` - `h2`, `h3` - `description` - `ctas` - `smallprint` - Image: `![Alt text](url)` - renders in the image slot - Embed: fenced `html` block with ` ``` ```` [Start your free trial](https://example.com/signup) [Book demo](https://example.com/demo) [smallprint]: Join 200+ teams building and publishing campaign pages. ```` #### Hero example with a testimonial ```markdown [eyebrow]: Customer story # Keep every project on track without the status meetings Plan work, assign owners, and see progress at a glance — so updates happen in the tool, not in your inbox. [testimonial] "We replaced three apps and a weekly status call with one board everyone actually checks." Maya Chen Head of Operations Brightside Studio [Start free](https://example.com/signup) ![Project board preview](https://example.com/hero-image.webp) ```` #### Hero example with a box grid ```markdown [eyebrow]: Trusted advice # Grow your wealth with guidance you can rely on Work with a dedicated advisor who builds a plan around your goals and adjusts it as life changes. [boxes] ### $2B+ Assets under management ### 30 yrs Average advisor experience ### 4.9/5 Client satisfaction ### 24/7 Portfolio access [Book a consultation](https://example.com/consultation) ``` ### 2) Steps (`type: 'steps'`) #### Purpose Lists and simple statements — process steps ("How it works"), checklists, pain points, or parallel facts and metrics. Not for two opposing groups (before/after, "say goodbye / hello") — use `comparison` for those. #### Section header fields - `eyebrow` - `title` - `subtitle` - `ctas` - Image: `![Alt text](url)` - renders beside the steps list - Embed: fenced `html` block with ` ``` ```` ```` ### 11) TrustedBy (`type: 'trustedBy'`) #### Purpose Add social-proof credibility with logos and supporting text. Use for customer/client logos and social-proof sections ("Trusted by", "Customer logos", "Partners", "Join 5,000+ businesses"). #### Section fields - `eyebrow` - `h2`, `h3` - `text` - `ctas` - `logos`: `[logos]` line, then logo images `![Alt](url)` — or leave empty to upload logos in the editor - Image: `![Alt text](url)` - Embed: fenced `html` block with `