skills.rest
reason-machines
reason-machinesOFFICIAL
Explore all skills by this author →
Website𝕏@reasonmachinesGitHub

launchkit-devtool-landing-template

Creates and customizes static HTML landing pages for developer tools using the LaunchKit template.

4|Updated May 16, 2026
Search Tags:#developer tools#deployment#landing page#static site#dark mode#html template#css customization
One-click install
npx skills add https://github.com/reason-machines/devtools-skills --skill launchkit-devtool-landing-template-reason-machines
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: launchkit-devtool-landing-template
Source: https://github.com/reason-machines/devtools-skills/tree/main/skills/launchkit-devtool-landing-template
Command: npx skills add https://github.com/reason-machines/devtools-skills --skill launchkit-devtool-landing-template-reason-machines

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building a landing page for a developer tool or open source product from scratch takes significant design and frontend effort. This Skill provides a ready-to-deploy static HTML/CSS/JS template with pre-built sections, theme support, and deployment guidance. ## Core Features & Use Cases - Pre-built Landing Sections: Includes hero, features grid, code example, and CTA blocks that can be kept or removed as needed. - Theme Customization: Supports light and dark modes via a theme-dark class and HSL-based CSS variables for brand colors. - Deployment Guidance: Covers GitHub Pages, Netlify, Vercel, and custom server deployment with SEO meta tag configuration. - Use Case: You just published an open source CLI tool on GitHub and need a product page. Clone the template, replace placeholder copy, adjust the color palette, and deploy to GitHub Pages within an hour. ## Quick Start Clone the LaunchKit template from the evilmartians/devtool-template repository and customize index.html with my product name, description, and brand colors.

Frequently Asked Questions about launchkit-devtool-landing-template

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

FAQPage Schema
How do I create a landing page for my developer tool?▼

Clone the LaunchKit template from the evilmartians/devtool-template GitHub repository, edit index.html to replace placeholder content with your product copy, adjust colors in index.css, and deploy to any static hosting service. No build process is required.

How to enable dark mode in the LaunchKit template?▼

Add the theme-dark class to the html element in index.html. The template defines separate CSS variables for dark backgrounds and text colors under the .theme-dark selector, which override the default light theme values.

Does the LaunchKit template require a build step or framework?▼

No, LaunchKit is a static HTML, CSS, and JavaScript template with no build process or framework dependencies. You can edit the files directly and deploy them immediately to GitHub Pages, Netlify, Vercel, or any web server.

How do I customize the color scheme of a static HTML template?▼

Edit the CSS custom properties in the :root block of index.css, which define primary and accent colors as HSL components plus background and text colors. A linked CodePen color theme tool generates matching light and dark palettes.

Why is my dark theme not applying to the landing page?▼

The theme-dark class must be placed on the html element, not the body element. Also verify that CSS variables are defined for both :root and .theme-dark selectors, and clear the browser cache after making changes.

Related Skills

Explore More Design & Creative Skills→
sunchenddsunchendd
3

copywriting

Create conversion-focused marketing copy for webpages using structured templates.

Community
Advanced
mgd34msumgd34msu
4

vercel-analytics

Track page views and Core Web Vitals for Vercel-deployed applications.

Community
Basic
I-OnlabsI-Onlabs
3

web-asset-generator

Generate favicons, app icons, and Open Graph images from logos or text.

Community
Advanced
farming-labsfarming-labs
52

farming-labs-docs

Scaffold MDX documentation projects across Next.js, SvelteKit, Astro, and Nuxt.

Official
Intermediate