skills.rest
Muvon
MuvonOFFICIAL
Explore all skills by this author →
Website𝕏@muvonteamGitHub

markup-landing-page

Generate HTML and CSS landing page structures with design tokens and dark/light theming.

3|Updated Mar 14, 2026
Search Tags:#landing page#dark mode#seo#json-ld#conversion design#ui system tokens#cta hierarchy
One-click install
npx skills add https://github.com/Muvon/octomind-tap --skill markup-landing-page
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: markup-landing-page
Source: https://github.com/Muvon/octomind-tap/tree/main/skills/markup-landing-page
Command: npx skills add https://github.com/Muvon/octomind-tap --skill markup-landing-page

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you stop guessing at landing-page structure and design decisions by giving production-ready patterns that consistently drive visitors toward purchase.

Core Features & Use Cases

  • Conversion-first section anatomy: Prescribes an opinionated order (nav, hero, how-it-works, features, privacy/trust, pricing, FAQ, and CTAs) so every section answers the next objection.
  • Single-source design system: Defines a token-driven CSS approach using custom properties for color, typography, spacing, radii, and effects, including strict rules that prevent hardcoded colors.
  • Production SEO + theming baseline: Includes dark/light mode implementation with meta tags, plus an OG and JSON-LD structured-data checklist to improve discoverability and sharing.
  • Use Case: When drafting a SaaS or indie product landing page for a new release, you can follow this playbook to produce a fast, accessible, and on-brand page layout without overbuilt UI frameworks.

Quick Start

Use the markup-landing-page skill to generate a complete landing-page structure, including the design token plan, section order, SEO/OG/JSON-LD baseline, and CTA hierarchy for your product landing.

Frequently Asked Questions about markup-landing-page

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I structure a SaaS landing page for high conversions?▼

A high-converting SaaS landing page structure follows an opinionated section order: nav, hero, how-it-works, features, privacy/trust, pricing, FAQ, and CTAs. This sequence systematically addresses visitor objections and guides them toward purchase.

What is the best way to implement dark mode on a landing page using CSS?▼

Implement dark mode on a landing page by using CSS custom properties for design tokens and applying prefers-color-scheme media query overrides. This approach enables smooth theme transitions while maintaining a single-source design system.

How do I add JSON-LD structured data and SEO meta tags to a product landing page?▼

Add JSON-LD structured data and SEO meta tags to a product landing page by including Open Graph image tags and JSON-LD schema in the HTML head. This baseline improves social sharing discoverability and search engine indexing.

Do I need a UI framework to build a responsive landing page with design tokens?▼

You do not need a UI framework to build a responsive landing page with design tokens. You can generate a fast, accessible layout using semantic HTML and CSS custom properties for color, typography, spacing, and radii without overbuilt dependencies.

Why should landing page CSS use custom properties instead of hardcoded colors?▼

Landing page CSS should use custom properties instead of hardcoded colors to maintain a single-source design system. This token-driven approach enforces strict design consistency and allows seamless dark and light theme overrides without refactoring individual elements.

Related Skills

Explore More Design & Creative Skills→
VedaAstroVedaAstro

brand-generation

Define brand-generation concepts for naming, positioning, visual direction, and tone of voice.

Community
Basic
nicholasgriffintnnicholasgriffintn
2

web-perf

Audit Core Web Vitals and blocking resources for web pages.

Community
Advanced
perceptiv-digitalperceptiv-digital
1

ecom-ad-message-match

Analyze ad message alignment with landing pages and categorize ads.

Official
Intermediate
TNHoang2708TNHoang2708
1

ck:ui-styling

Integrate shadcn/ui components and Tailwind CSS for accessible responsive interfaces.

Community
Advanced