skills.rest
scsm-unrestrict
scsm-unrestrictCOMMUNITY
Explore all skills by this author →
GitHub

landing-page

Generates a complete single-file HTML landing page with Tailwind CSS, dark mode, and SEO meta tags.

1|Updated Aug 18, 2026
Search Tags:#html#landing page#responsive design#tailwind css#dark mode#seo#marketing page
One-click install
npx skills add https://github.com/scsm-unrestrict/dsh-frontend-engineer-agent --skill landing-page-scsm-unrestrict
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: landing-page
Source: https://github.com/scsm-unrestrict/dsh-frontend-engineer-agent/tree/main/frontend-engineer/skills/landing-page
Command: npx skills add https://github.com/scsm-unrestrict/dsh-frontend-engineer-agent --skill landing-page-scsm-unrestrict

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building a marketing or launch page from scratch requires assembling responsive layouts, dark mode, accessibility, and SEO markup by hand, which is slow and error-prone. This Skill turns a short business brief into a complete, deployable landing page as one self-contained HTML file. ## Core Features & Use Cases - Brief-driven generation: Collects business name, value proposition, audience, CTA, and brand colours, then produces a tailored page with hero, features, testimonials, pricing, FAQ, and footer sections. - Single-file output: Uses Tailwind CSS via CDN with no build step, including responsive breakpoints, a three-state dark mode toggle, semantic HTML, OG/Twitter meta tags, and JSON-LD structured data. - Use Case: A plumber in Newcastle needs a coming-soon page before launch. Provide the business name, service area, and phone number, and receive an index.html with a hero, email signup, and contact section ready to drop onto Netlify or Cloudflare Pages. ## Quick Start Ask the agent to create a landing page for your product, providing the business name, value proposition, target audience, and primary call to action.

Frequently Asked Questions about landing-page

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

FAQPage Schema
How do I create a landing page without a build step?▼

Generate a single HTML file that loads Tailwind CSS from the CDN, so no npm install or bundler is required. Open the file directly in a browser or deploy it to any static host like Netlify or Cloudflare Pages.

How to add dark mode to a Tailwind landing page?▼

Configure Tailwind with darkMode set to 'class' and toggle a .dark class on the html element via a small JavaScript snippet. Persist the user's light, dark, or system preference in localStorage so the choice survives reloads.

What sections should a landing page include?▼

A standard landing page includes a sticky navigation bar, hero with headline and primary CTA, a features grid, social proof or testimonials, optional pricing tiers, an FAQ accordion, and a footer with contact and legal links. Adapt sections to the page purpose.

Does a single-file HTML page work for SEO?▼

Yes, if it uses semantic HTML5 elements, proper heading hierarchy, OG and Twitter card meta tags, a canonical URL, and JSON-LD structured data such as FAQPage or LocalBusiness markup. Server rendering is not required for these basics.

When should I not use a single-file landing page approach?▼

Avoid it for multi-page sites, content that changes frequently, or pages needing a CMS, authentication, or server-side logic. In those cases use a framework like Next.js or a static site generator instead of one self-contained HTML file.

Related Skills

Explore More Design & Creative Skills→
oakossoakoss
14

brand-designer

Generate cohesive brand identities with SVG logos, Tailwind color tokens, and typography systems.

Official
Advanced
brainbrewlabsbrainbrewlabs
7

doc-publishing

Publishes documentation to GitHub Pages, Vercel, or Netlify from source docs and build outputs.

Official
Intermediate
aramark-destinationsaramark-destinations

quality-audit

Audit page quality across Lighthouse, SEO, and WCAG checks.

Official
Advanced
hasnahasna

next

Convert JSON UI specifications into Next.js applications with routing and SSR.

Official
Advanced