メニュー
Free HTML landing page template for developer tools and open source products by Evil Martians
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/Aradotso/devtools-skills --skill launchkit-devtool-landing-templateコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
Sync DeviantArt galleries to local folders with OAuth 2.1 PKCE, SQLite indexing, and scheduled syncs using da-cli
Use oh-my-cli to run an autonomous code agent that can read/write files, execute shell commands, and manage multi-turn coding tasks with approval gates and session persistence
CLI tool that detects AI-written text patterns using 33 Wikipedia-documented signs, with draft checking and humanization prompts — zero dependencies
SOC 職業分類に基づく
SKILL.md を表示中
| name | launchkit-devtool-landing-template |
| description | Free HTML landing page template for developer tools and open source products by Evil Martians |
| triggers | ["create a landing page for my dev tool","set up LaunchKit template","customize LaunchKit theme colors","build a developer tool landing page","use the Evil Martians landing template","create an open source product landing page","deploy LaunchKit HTML template","modify LaunchKit color scheme"] |
Skill by ara.so — Devtools Skills collection.
LaunchKit is a free, ready-to-deploy HTML landing page template specifically designed for developer tools and open source products. It's a static HTML/CSS/JS template that requires no build process and can be deployed immediately to any static hosting service.
Clone the repository:
git clone https://github.com/evilmartians/devtool-template.git my-landing-page
cd my-landing-page
Or use it as a GitHub template by clicking "Use this template" on the repository page.
├── index.html # Main landing page
├── index.css # Styles and CSS variables
├── index.js # Interactive components
├── images/ # Image assets
└── fonts/ # Custom fonts
index.html and remove sections you don't needimages/ folderAdd the theme-dark class to the <html> element for dark theme:
<!-- Light theme (default) -->
<html lang="en">
<!-- Dark theme -->
<html lang="en" class="theme-dark">
Edit the CSS variables in index.css:
:root {
/* Primary brand color */
--color-primary-h: 210;
--color-primary-s: 100%;
--color-primary-l: 50%;
/* Accent color */
--color-accent-h: 350;
--color-accent-s: 100%;
--color-accent-l: 60%;
/* Background */
--color-bg: #ffffff;
--color-bg-secondary: #f5f5f5;
/* Text */
--color-text: #1a1a1a;
--color-text-secondary: #666666;
}
.theme-dark {
--color-bg: #1a1a1a;
--color-bg-secondary: #2a2a2a;
--color-text: #ffffff;
--color-text-secondary: #cccccc;
}
Use the color theme tool to generate matching light/dark palettes.
<section class="hero">
<div class="container">
<h1 class="hero__title">Your Dev Tool Name</h1>
<p class="hero__description">
A brief, compelling description of what your tool does
</p>
<div class="hero__cta">
<a href="#get-started" class="button button--primary">Get Started</a>
<a href="https://github.com/yourname/repo" class="button button--secondary">
View on GitHub
</a>
</div>
</div>
</section>
<section class="features">
<div class="container">
<h2 class="section__title">Key Features</h2>
<div class="features__grid">
<div class="feature">
<div class="feature__icon">🚀</div>
<h3 class="feature__title">Fast Setup</h3>
<p class="feature__description">Get started in minutes</p>
</div>
<div class="feature">
<div class="feature__icon">🔧</div>
<h3 class="feature__title">Easy Configuration</h3>
<p class="feature__description">Minimal config required
<section class="code-example">
<div class="container">
<h2 class="section__title">Quick Start</h2>
<pre class="code-block"><code>npm install your-tool
npx your-tool init
your-tool run</code></pre>
</div>
</section>
<section class="cta">
<div class="container">
<h2 class="cta__title">Ready to get started?</h2>
<p class="cta__description">Join thousands of developers using this tool</p>
<a href="#signup" class="button button--large button--primary">
Start Free Trial
</a>
</div>
</section>
Add interactive elements in index.js:
// Mobile menu toggle
const menuButton = document.querySelector('.menu-toggle');
const nav = document.querySelector('.nav');
menuButton?.addEventListener('click', () => {
nav.classList.toggle('nav--open');
});
// Smooth scroll to anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
target?.scrollIntoView({ behavior: 'smooth' });
});
});
// Track CTA clicks
document.querySelectorAll('.button--primary').forEach(button => {
button.addEventListener('click', () => {
// Analytics tracking
if (.) {
(, , {
: button.
});
}
});
});
Add Google Analytics or Plausible to index.html:
<!-- Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'GA_MEASUREMENT_ID');
</script>
<!-- Or Plausible -->
<script defer data-domain="yourdomain.com" src="https://plausible.io/js/script.js"></script>
Replace GA_MEASUREMENT_ID with your actual ID (use environment variables in your build process).
main) and / (root)https://username.github.io/repo-name# Install Netlify CLI
npm install -g netlify-cli
# Deploy
netlify deploy --prod
Or connect your GitHub repo in the Netlify dashboard.
# Install Vercel CLI
npm install -g vercel
# Deploy
vercel --prod
Upload all files to your web server's public directory via FTP/SFTP:
# Using rsync
rsync -avz --exclude '.git' ./ user@yourserver.com:/var/www/html/
The template is mobile-first. Breakpoints are defined in index.css:
/* Mobile: default styles */
.container {
padding: 0 16px;
}
/* Tablet and up */
@media (min-width: 768px) {
.container {
padding: 0 32px;
}
}
/* Desktop and up */
@media (min-width: 1024px) {
.container {
max-width: 1200px;
margin: 0 auto;
}
}
Optimize images before uploading:
# Using ImageOptim CLI (macOS)
imageoptim images/**/*.{jpg,png}
# Using imagemin
npx imagemin images/*.{jpg,png} --out-dir=images/optimized
Use WebP format for better compression:
<picture>
<source srcset="images/hero.webp" type="image/webp">
<img src="images/hero.jpg" alt="Hero image">
</picture>
Update meta tags in index.html:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Dev Tool - Tagline</title>
<meta name="description" content="Your concise product description for search results">
<!-- Open Graph -->
<meta property="og:title" content="Your Dev Tool">
<meta property="og:description" content="Your product description">
<meta property="og:image" content="https://yourdomain.com/images/og-image.jpg">
<meta property="og:url" content="https://yourdomain.com">
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" =>
index.css is in the same directory as index.html<link rel="stylesheet" href="index.css">theme-dark class is on the <html> element, not <body>:root and .theme-darkimages/photo.jpg not /images/photo.jpgindex.js is loaded before </body> closesfonts/ directory@font-face declarations in CSS