mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-17 00:26:41 +03:00
136 lines
4.8 KiB
HTML
136 lines
4.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>impeccable.style — Design Skills for AI Development Tools</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;600;700&family=Instrument+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="./css/main.css">
|
|
</head>
|
|
<body>
|
|
<header class="hero">
|
|
<div class="hero-grid">
|
|
<div class="hero-content">
|
|
<h1 class="title">
|
|
<span class="title-main">Impeccable style</span>
|
|
<span class="title-sub">made easy</span>
|
|
</h1>
|
|
<p class="tagline">Design skills and commands for AI-powered development tools</p>
|
|
<p class="providers">Cursor · Claude Code · Gemini CLI · Codex CLI</p>
|
|
</div>
|
|
<div class="hero-decoration" aria-hidden="true">
|
|
<div class="deco-line"></div>
|
|
<div class="deco-circle"></div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="container">
|
|
<section class="intro">
|
|
<div class="intro-grid">
|
|
<div class="intro-content">
|
|
<h2>A curated collection of design-focused skills that teach AI assistants to create distinctive, accessible, production-ready interfaces.</h2>
|
|
</div>
|
|
<div class="intro-meta">
|
|
<div class="meta-item">
|
|
<span class="meta-number">15</span>
|
|
<span class="meta-label">Commands</span>
|
|
</div>
|
|
<div class="meta-item">
|
|
<span class="meta-number">8</span>
|
|
<span class="meta-label">Skills</span>
|
|
</div>
|
|
<div class="meta-item">
|
|
<span class="meta-number">4</span>
|
|
<span class="meta-label">Platforms</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="downloads-section">
|
|
<h2 class="section-title">Download Bundles</h2>
|
|
<div class="download-grid">
|
|
<article class="download-card" data-animate>
|
|
<div class="card-inner">
|
|
<div class="card-header">
|
|
<h3>Cursor</h3>
|
|
<span class="badge">Rules + Commands</span>
|
|
</div>
|
|
<p>Commands and rules for Cursor IDE. Works via appending, no frontmatter required.</p>
|
|
<button class="btn btn-primary" data-bundle="cursor">Download</button>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="download-card" data-animate>
|
|
<div class="card-inner">
|
|
<div class="card-header">
|
|
<h3>Claude Code</h3>
|
|
<span class="badge">Full Featured</span>
|
|
</div>
|
|
<p>Complete YAML frontmatter with argument support. Follows Anthropic Skills specification.</p>
|
|
<button class="btn btn-primary" data-bundle="claude-code">Download</button>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="download-card" data-animate>
|
|
<div class="card-inner">
|
|
<div class="card-header">
|
|
<h3>Gemini CLI</h3>
|
|
<span class="badge">TOML + Modular</span>
|
|
</div>
|
|
<p>TOML-formatted commands with modular skill imports via GEMINI.md.</p>
|
|
<button class="btn btn-primary" data-bundle="gemini">Download</button>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="download-card" data-animate>
|
|
<div class="card-inner">
|
|
<div class="card-header">
|
|
<h3>Codex CLI</h3>
|
|
<span class="badge">Prompts + Routing</span>
|
|
</div>
|
|
<p>Custom prompt format with skill routing through AGENTS.md architecture.</p>
|
|
<button class="btn btn-primary" data-bundle="codex">Download</button>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="content-section">
|
|
<h2 class="section-title">Skills</h2>
|
|
<div id="skills-list" class="item-grid">
|
|
<div class="loading">Loading...</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="content-section">
|
|
<h2 class="section-title">Commands</h2>
|
|
<div id="commands-list" class="item-grid">
|
|
<div class="loading">Loading...</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="contribute">
|
|
<div class="contribute-content">
|
|
<h2>Open Source</h2>
|
|
<p>View the source, contribute skills and commands, or report issues on GitHub.</p>
|
|
<a href="https://github.com/pbakaus/vibe-design-plugins" class="btn btn-secondary">View Repository</a>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer>
|
|
<div class="footer-content">
|
|
<p>impeccable.style</p>
|
|
<p><a href="https://github.com/pbakaus/vibe-design-plugins">GitHub</a></p>
|
|
</div>
|
|
</footer>
|
|
|
|
<script type="module" src="./app.js"></script>
|
|
</body>
|
|
</html>
|
|
|