mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-14 23:26:39 +03:00
Paul BakausandClaude Opus 4.5
d56a9fc746
- Match box width to paragraph above (45ch) - Include frontend-design skill name specifically - Add sample commands: /polish, /audit, /simplify, /bolder - Clean two-line layout that wraps naturally Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
550 lines
28 KiB
HTML
550 lines
28 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: The missing upgrade to Anthropic's frontend-design skill</title>
|
|
<meta name="description" content="1 skill, 17 commands, and curated anti-patterns for impeccable frontend design. Works with Cursor, Claude Code, Gemini CLI, and Codex CLI.">
|
|
<meta name="theme-color" content="#1a1a1a">
|
|
<link rel="canonical" href="https://impeccable.style">
|
|
|
|
<!-- OpenGraph -->
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:url" content="https://impeccable.style">
|
|
<meta property="og:title" content="Impeccable: Design skills for AI coding tools">
|
|
<meta property="og:description" content="1 skill, 17 commands, and curated anti-patterns for impeccable frontend design. Works with Cursor, Claude Code, Gemini CLI, and Codex CLI.">
|
|
<meta property="og:image" content="https://impeccable.style/og-image.png">
|
|
|
|
<!-- Twitter -->
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<meta name="twitter:site" content="@pbakaus">
|
|
<meta name="twitter:creator" content="@pbakaus">
|
|
<meta name="twitter:title" content="Impeccable: Design skills for AI coding tools">
|
|
<meta name="twitter:description" content="1 skill, 17 commands, and curated anti-patterns for impeccable frontend design.">
|
|
<meta name="twitter:image" content="https://impeccable.style/og-image.png">
|
|
|
|
<link rel="icon" type="image/svg+xml" href="./favicon.svg">
|
|
<link rel="apple-touch-icon" href="./apple-touch-icon.png">
|
|
<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:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400&family=Instrument+Sans:wght@400;500;600;700&family=Inter:wght@400;500;600&family=Space+Grotesk:wght@400;500;600&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="./css/main.css">
|
|
|
|
</head>
|
|
<body>
|
|
<!-- Skip to main content link for keyboard users -->
|
|
<a href="#main-content" class="skip-link">Skip to main content</a>
|
|
|
|
<!-- Grain Overlay -->
|
|
<div class="grain-overlay" aria-hidden="true"></div>
|
|
|
|
<!-- Theme Toggle -->
|
|
<div class="theme-toggle" role="group" aria-label="Theme switcher">
|
|
<button class="theme-toggle-btn" data-theme="light" aria-label="Light theme" title="Light theme">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<circle cx="12" cy="12" r="5"/>
|
|
<path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/>
|
|
</svg>
|
|
</button>
|
|
<button class="theme-toggle-btn" data-theme="system" aria-label="System theme" title="System theme">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<rect x="2" y="3" width="20" height="14" rx="2"/>
|
|
<path d="M8 21h8M12 17v4"/>
|
|
</svg>
|
|
</button>
|
|
<button class="theme-toggle-btn" data-theme="dark" aria-label="Dark theme" title="Dark theme">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- 1. HERO - Combined with Problem Section -->
|
|
<section id="hero" class="hero-combined">
|
|
<div class="hero-combined-container">
|
|
<!-- Left: Title & Info -->
|
|
<div class="hero-combined-left">
|
|
<h1 class="hero-title-combined">Impeccable</h1>
|
|
<p class="hero-tagline-combined">Design fluency for AI coding tools</p>
|
|
|
|
<p class="hero-hook-text">Great design prompts require design vocabulary. Most people don't have it. You can't ask for "more vertical rhythm" if you've never used those words. Impeccable gives you commands that put designer language in your hands.</p>
|
|
|
|
<div class="hero-included-box">
|
|
<span class="hero-included-title">What's included</span>
|
|
<div class="hero-included-items">
|
|
<span>Enhanced <em>frontend-design</em> skill + anti-patterns</span>
|
|
<span class="hero-included-sep">·</span>
|
|
<span>17 commands: /polish, /audit, /simplify, /bolder...</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hero-cta-group">
|
|
<a href="#downloads" class="hero-cta-combined">Get Started</a>
|
|
<div class="hero-logos-inline">
|
|
<span class="hero-logos-label">Works with</span>
|
|
<div class="hero-logos-row">
|
|
<img src="https://img.logo.dev/cursor.com?token=pk_dtRHfeTyRzG5zZInUc65Xw&size=64&format=png" alt="Cursor" width="24" height="24" loading="lazy">
|
|
<img src="https://img.logo.dev/claude.ai?token=pk_dtRHfeTyRzG5zZInUc65Xw&size=64&format=png" alt="Claude Code" width="24" height="24" loading="lazy">
|
|
<img src="https://img.logo.dev/gemini.google.com?token=pk_dtRHfeTyRzG5zZInUc65Xw&size=64&format=png" alt="Gemini CLI" width="20" height="20" loading="lazy">
|
|
<img src="https://img.logo.dev/openai.com?token=pk_dtRHfeTyRzG5zZInUc65Xw&size=64&format=png" alt="Codex CLI" width="20" height="20" loading="lazy">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right: Before/After Demo -->
|
|
<div class="hero-combined-right">
|
|
<div class="split-comparison" id="lens-comparison">
|
|
<div class="split-container">
|
|
<!-- Before: AI Slop -->
|
|
<div class="split-before">
|
|
<div class="slop-card">
|
|
<div class="slop-header">
|
|
<div class="slop-avatar"></div>
|
|
<div class="slop-text">
|
|
<div class="slop-title">Welcome to Our Platform</div>
|
|
<div class="slop-subtitle">The best solution for your needs</div>
|
|
</div>
|
|
</div>
|
|
<p class="slop-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. This is generic placeholder text.</p>
|
|
<button class="slop-button">Get Started</button>
|
|
</div>
|
|
<!-- Callout labels pointing to issues -->
|
|
<div class="slop-callouts">
|
|
<span class="slop-callout" data-point="font">Inter font (again)</span>
|
|
<span class="slop-callout" data-point="gradient">Purple gradient</span>
|
|
<span class="slop-callout" data-point="copy">Generic copy</span>
|
|
<span class="slop-callout" data-point="rounded">Cards on cards</span>
|
|
</div>
|
|
</div>
|
|
<!-- After: Impeccable (shown through split) -->
|
|
<div class="split-after">
|
|
<div class="impeccable-card">
|
|
<p class="impeccable-eyebrow">Introducing</p>
|
|
<h3 class="impeccable-title">Thoughtful Design</h3>
|
|
<p class="impeccable-body">Every element serves a purpose. Hierarchy guides the eye. Whitespace breathes.</p>
|
|
<button class="impeccable-button">Explore</button>
|
|
</div>
|
|
</div>
|
|
<!-- The Divider -->
|
|
<div class="split-divider">
|
|
<span class="split-label">With Skills</span>
|
|
</div>
|
|
</div>
|
|
<div class="split-labels">
|
|
<div class="split-label-item" data-point="before">
|
|
<span class="split-label-dot"></span>
|
|
<span>Generic AI Output</span>
|
|
</div>
|
|
<div class="split-label-item" data-point="after">
|
|
<span class="split-label-dot split-label-dot--accent"></span>
|
|
<span>With Design Skills</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<main class="site-content" id="main-content">
|
|
|
|
<!-- 2. THE ANTIDOTE - Patterns & Anti-Patterns -->
|
|
<section class="antidote-section" id="antidote">
|
|
<div class="section-header" data-reveal>
|
|
<span class="section-number">01</span>
|
|
<h2 class="section-title">The Antidote</h2>
|
|
</div>
|
|
<div class="antidote-content">
|
|
<p class="section-lead" data-reveal>Anthropic's original frontend-design skill laid the foundation. We built on it with curated patterns and anti-patterns across typography, color, layout, motion, and more.</p>
|
|
|
|
<!-- Patterns by category with tabs -->
|
|
<div class="patterns-categories" id="patterns-categories">
|
|
<!-- Rendered by JS -->
|
|
</div>
|
|
|
|
<!-- Contribution CTA -->
|
|
<div class="contribute-cta" data-reveal>
|
|
<p class="contribute-text">Know a pattern we're missing? Help us grow the collection.</p>
|
|
<a href="https://github.com/pbakaus/impeccable/issues/new?labels=pattern&title=Pattern%20suggestion%3A%20" class="btn btn-secondary btn-small">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M12 5v14M5 12h14"/>
|
|
</svg>
|
|
<span>Suggest a Pattern</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 3. THE SOLUTION - Two-part system -->
|
|
<section class="solution-section" id="solution">
|
|
<div class="section-header" data-reveal>
|
|
<span class="section-number">02</span>
|
|
<h2 class="section-title">The Framework</h2>
|
|
</div>
|
|
<div class="solution-content">
|
|
<p class="section-lead" data-reveal>One comprehensive skill with deep expertise, plus 17 commands that form the language of design.</p>
|
|
|
|
<div class="solution-visual-interactive" id="framework-viz-container" data-reveal>
|
|
<!-- Subway map generated by JS -->
|
|
</div>
|
|
|
|
<div class="solution-result" data-reveal>
|
|
<span class="result-arrow">↓</span>
|
|
<p class="result-text">Together, they transform generic output into <em>impeccable</em> design.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 4. COMMANDS - Glass Terminal -->
|
|
<section class="commands-section" id="commands-section">
|
|
<div class="section-header" data-reveal>
|
|
<span class="section-number">03</span>
|
|
<h2 class="section-title">Commands in Action</h2>
|
|
<p class="section-subtitle">See how commands transform your designs</p>
|
|
</div>
|
|
|
|
<div class="commands-gallery">
|
|
<!-- Rendered by JS -->
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 5. CASE STUDIES -->
|
|
<section class="casestudies-section" id="casestudies">
|
|
<div class="section-header" data-reveal>
|
|
<span class="section-number">04</span>
|
|
<h2 class="section-title">See It In Action</h2>
|
|
<p class="section-subtitle">Sample projects transformed with Impeccable commands</p>
|
|
</div>
|
|
|
|
<div class="transformations-tabbed" data-reveal>
|
|
<!-- Tab buttons -->
|
|
<div class="transformation-tabs" role="tablist">
|
|
<button class="transformation-tab active" role="tab" aria-selected="true" data-tab="0">Landing Page</button>
|
|
<button class="transformation-tab" role="tab" aria-selected="false" data-tab="1">Form UX</button>
|
|
<button class="transformation-tab" role="tab" aria-selected="false" data-tab="2">Dashboard</button>
|
|
</div>
|
|
|
|
<!-- Tab panels -->
|
|
<div class="transformation-panels">
|
|
<article class="transformation-panel active" role="tabpanel" data-panel="0">
|
|
<div class="transformation-images">
|
|
<figure class="transformation-before">
|
|
<img src="assets/landing.before.webp" alt="Landing page before transformation" loading="lazy">
|
|
<figcaption>Before</figcaption>
|
|
</figure>
|
|
<span class="transformation-arrow">→</span>
|
|
<figure class="transformation-after">
|
|
<img src="assets/landing.after.webp" alt="Landing page after transformation" loading="lazy">
|
|
<figcaption>After</figcaption>
|
|
</figure>
|
|
</div>
|
|
<div class="transformation-info">
|
|
<h3 class="transformation-title">Landing Page Polish</h3>
|
|
<p class="transformation-desc">AI-generated landing page refined from generic template to memorable brand experience.</p>
|
|
<div class="transformation-commands">
|
|
<span class="transformation-command">/critique</span>
|
|
<span class="transformation-command">/polish</span>
|
|
<span class="transformation-command">/animate</span>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="transformation-panel" role="tabpanel" data-panel="1">
|
|
<div class="transformation-images">
|
|
<figure class="transformation-before">
|
|
<img src="assets/form.before.webp" alt="Form before transformation" loading="lazy">
|
|
<figcaption>Before</figcaption>
|
|
</figure>
|
|
<span class="transformation-arrow">→</span>
|
|
<figure class="transformation-after">
|
|
<img src="assets/form.after.webp" alt="Form after transformation" loading="lazy">
|
|
<figcaption>After</figcaption>
|
|
</figure>
|
|
</div>
|
|
<div class="transformation-info">
|
|
<h3 class="transformation-title">Form UX Overhaul</h3>
|
|
<p class="transformation-desc">Complex multi-step form simplified and clarified for better completion rates.</p>
|
|
<div class="transformation-commands">
|
|
<span class="transformation-command">/simplify</span>
|
|
<span class="transformation-command">/clarify</span>
|
|
<span class="transformation-command">/harden</span>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="transformation-panel" role="tabpanel" data-panel="2">
|
|
<div class="transformation-images">
|
|
<figure class="transformation-before">
|
|
<img src="assets/dashboard.before.webp" alt="Dashboard before transformation" loading="lazy">
|
|
<figcaption>Before</figcaption>
|
|
</figure>
|
|
<span class="transformation-arrow">→</span>
|
|
<figure class="transformation-after">
|
|
<img src="assets/dashboard.after.webp" alt="Dashboard after transformation" loading="lazy">
|
|
<figcaption>After</figcaption>
|
|
</figure>
|
|
</div>
|
|
<div class="transformation-info">
|
|
<h3 class="transformation-title">Dashboard Redesign</h3>
|
|
<p class="transformation-desc">Generic analytics dashboard transformed into a distinctive, scannable interface.</p>
|
|
<div class="transformation-commands">
|
|
<span class="transformation-command">/audit</span>
|
|
<span class="transformation-command">/normalize</span>
|
|
<span class="transformation-command">/bolder</span>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Lightbox for expanded view -->
|
|
<div class="lightbox" id="image-lightbox">
|
|
<button class="lightbox-close" aria-label="Close">×</button>
|
|
<img class="lightbox-image" src="" alt="">
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 6. PLATFORMS -->
|
|
<section class="platforms-section" id="downloads">
|
|
<div class="section-header" data-reveal>
|
|
<span class="section-number">05</span>
|
|
<h2 class="section-title">Download for Your AI Harness</h2>
|
|
<p class="section-subtitle">Same design intelligence, adapted for your workflow. Download and start using in seconds.</p>
|
|
</div>
|
|
|
|
<div class="download-options" data-reveal>
|
|
<label class="prefix-toggle">
|
|
<input type="checkbox" id="prefix-toggle" />
|
|
<span class="prefix-toggle-slider"></span>
|
|
<span class="prefix-toggle-label">
|
|
Prefix commands with <code>/i-</code> to avoid conflicts
|
|
</span>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="downloads-grid">
|
|
<article class="download-card" data-reveal>
|
|
<div class="download-card-icon">
|
|
<img src="https://img.logo.dev/cursor.com?token=pk_dtRHfeTyRzG5zZInUc65Xw&size=64&format=png" alt="Cursor logo" width="32" height="32" loading="lazy">
|
|
</div>
|
|
<h3 class="download-card-title">Cursor</h3>
|
|
<button class="btn btn-primary" data-bundle="cursor" aria-label="Download Cursor bundle">
|
|
<span>Download</span>
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
|
|
<path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3"/>
|
|
</svg>
|
|
</button>
|
|
<details class="download-card-details">
|
|
<summary>Skills require setup</summary>
|
|
<ol>
|
|
<li>Switch to Nightly channel in Settings → Beta</li>
|
|
<li>Enable Agent Skills in Settings → Rules</li>
|
|
</ol>
|
|
<a href="https://cursor.com/docs/context/skills" target="_blank" rel="noopener">Learn more</a>
|
|
</details>
|
|
</article>
|
|
|
|
<article class="download-card" data-reveal>
|
|
<div class="download-card-icon">
|
|
<img src="https://img.logo.dev/claude.ai?token=pk_dtRHfeTyRzG5zZInUc65Xw&size=64&format=png" alt="Claude logo" width="32" height="32" loading="lazy">
|
|
</div>
|
|
<h3 class="download-card-title">Claude Code</h3>
|
|
<div class="install-command">
|
|
<code>/plugin marketplace add pbakaus/impeccable</code>
|
|
<button class="copy-btn" aria-label="Copy command" data-copy="/plugin marketplace add pbakaus/impeccable">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
|
|
<path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<p class="install-hint">Then run <code>/plugin menu</code> to install</p>
|
|
<details class="download-card-details">
|
|
<summary>Or download manually</summary>
|
|
<button class="btn btn-secondary btn-small" data-bundle="claude-code" aria-label="Download Claude Code bundle">
|
|
<span>Download ZIP</span>
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
|
|
<path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3"/>
|
|
</svg>
|
|
</button>
|
|
</details>
|
|
</article>
|
|
|
|
<article class="download-card" data-reveal>
|
|
<div class="download-card-icon">
|
|
<img src="https://img.logo.dev/gemini.google.com?token=pk_dtRHfeTyRzG5zZInUc65Xw&size=64&format=png" alt="Gemini logo" width="32" height="32" loading="lazy">
|
|
</div>
|
|
<h3 class="download-card-title">Gemini CLI</h3>
|
|
<button class="btn btn-primary" data-bundle="gemini" aria-label="Download Gemini CLI bundle">
|
|
<span>Download</span>
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
|
|
<path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3"/>
|
|
</svg>
|
|
</button>
|
|
<details class="download-card-details">
|
|
<summary>Skills require setup</summary>
|
|
<ol>
|
|
<li>Install preview: <code>npm i -g @google/gemini-cli@preview</code></li>
|
|
<li>Run <code>/settings</code> and enable "Skills"</li>
|
|
<li>Run <code>/skills list</code> to verify</li>
|
|
</ol>
|
|
<a href="https://geminicli.com/docs/cli/skills/" target="_blank" rel="noopener">Learn more</a>
|
|
</details>
|
|
</article>
|
|
|
|
<article class="download-card" data-reveal>
|
|
<div class="download-card-icon">
|
|
<img src="https://img.logo.dev/openai.com?token=pk_dtRHfeTyRzG5zZInUc65Xw&size=64&format=png" alt="OpenAI logo" width="32" height="32" loading="lazy">
|
|
</div>
|
|
<h3 class="download-card-title">Codex CLI</h3>
|
|
<button class="btn btn-primary" data-bundle="codex" aria-label="Download Codex CLI bundle">
|
|
<span>Download</span>
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
|
|
<path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3"/>
|
|
</svg>
|
|
</button>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 7. FAQ -->
|
|
<section class="faq-section" id="faq">
|
|
<div class="section-header" data-reveal>
|
|
<span class="section-number">06</span>
|
|
<h2 class="section-title">Frequently Asked Questions</h2>
|
|
</div>
|
|
|
|
<div class="faq-list" data-reveal>
|
|
<details class="faq-item">
|
|
<summary class="faq-question">Where do I put the downloaded files?</summary>
|
|
<div class="faq-answer">
|
|
<p>Extract the ZIP to your <strong>project root</strong> (same level as your <code>package.json</code> or <code>src/</code> folder). The files should create a hidden folder like <code>.claude/</code>, <code>.cursor/</code>, <code>.gemini/</code>, or <code>.codex/</code>.</p>
|
|
<p>Alternatively, you can install <strong>globally</strong> to your home directory:</p>
|
|
<ul>
|
|
<li>Claude Code: <code>~/.claude/</code></li>
|
|
<li>Cursor: <code>~/.cursor/</code></li>
|
|
<li>Gemini CLI: <code>~/.gemini/</code></li>
|
|
<li>Codex CLI: <code>~/.codex/</code></li>
|
|
</ul>
|
|
<p>Project-level installation takes precedence and lets you version control your skills.</p>
|
|
</div>
|
|
</details>
|
|
|
|
<details class="faq-item">
|
|
<summary class="faq-question">Commands or skills aren't appearing. What do I do?</summary>
|
|
<div class="faq-answer">
|
|
<p><strong>For commands:</strong> Type <code>/</code> in your AI tool and look for commands like <code>/audit</code>, <code>/polish</code>, etc. If they don't appear, double-check the files are in the correct location.</p>
|
|
<p><strong>For skills:</strong> Skills are applied automatically when relevant. To verify, explicitly mention "use the frontend-design skill" in your prompt—this forces the AI to acknowledge and apply it.</p>
|
|
<p><strong>Tool-specific setup:</strong></p>
|
|
<ul>
|
|
<li><strong>Cursor:</strong> Requires Nightly channel + Agent Skills enabled in Settings → Rules</li>
|
|
<li><strong>Gemini CLI:</strong> Requires <code>@google/gemini-cli@preview</code> + Skills enabled via <code>/settings</code></li>
|
|
</ul>
|
|
</div>
|
|
</details>
|
|
|
|
<details class="faq-item">
|
|
<summary class="faq-question">I'm new to AI coding tools. Where do I start?</summary>
|
|
<div class="faq-answer">
|
|
<p>Skills and commands are intermediate features. If you're just getting started, learn the basics first:</p>
|
|
<ul>
|
|
<li><strong>Claude Code:</strong> <a href="https://docs.anthropic.com/en/docs/claude-code" target="_blank" rel="noopener">Official Documentation</a></li>
|
|
<li><strong>Cursor:</strong> <a href="https://docs.cursor.com" target="_blank" rel="noopener">Cursor Docs</a></li>
|
|
<li><strong>Gemini CLI:</strong> <a href="https://geminicli.com/docs/" target="_blank" rel="noopener">Gemini CLI Docs</a></li>
|
|
<li><strong>Codex CLI:</strong> <a href="https://github.com/openai/codex" target="_blank" rel="noopener">Codex GitHub</a></li>
|
|
</ul>
|
|
<p>Once you're comfortable with basic prompting and code generation, come back and install Impeccable to level up your design output.</p>
|
|
</div>
|
|
</details>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 8. SUPPORT THE PROJECT -->
|
|
<section class="support-section" id="support">
|
|
<div class="support-content" data-reveal>
|
|
<h2 class="support-title">Support the Project</h2>
|
|
<p class="support-desc">Impeccable isn't backed by a company or VC. It's just me, building tools I wish existed. Your support keeps this independent and actively maintained.</p>
|
|
|
|
<div class="support-tiers">
|
|
<a href="https://buy.stripe.com/7sYfZi0xK8Jm5i349W8Ra00" class="support-tier" target="_blank" rel="noopener">
|
|
<span class="tier-amount">$20</span>
|
|
<span class="tier-label">Supporter</span>
|
|
</a>
|
|
<a href="https://buy.stripe.com/28E5kE4O0gbO11N6i48Ra01" class="support-tier support-tier--popular" target="_blank" rel="noopener">
|
|
<span class="tier-badge">Popular</span>
|
|
<span class="tier-amount">$100</span>
|
|
<span class="tier-label">Sponsor</span>
|
|
</a>
|
|
<a href="https://buy.stripe.com/5kQ9AUbco0cQ4dZ7m88Ra02" class="support-tier" target="_blank" rel="noopener">
|
|
<span class="tier-amount">$10k</span>
|
|
<span class="tier-label">Patron</span>
|
|
</a>
|
|
</div>
|
|
|
|
<a href="https://buy.stripe.com/aFa3cwfsEe3G25R6i48Ra03" class="support-custom" target="_blank" rel="noopener">
|
|
Or choose your own amount →
|
|
</a>
|
|
|
|
<p class="support-note">Voluntary contribution. No expectation of influence or future maintenance.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 10. CONSULTING -->
|
|
<section class="consulting-section" id="consulting">
|
|
<div class="consulting-content" data-reveal>
|
|
<div class="consulting-text">
|
|
<h2 class="consulting-title">Work with me</h2>
|
|
<p class="consulting-desc">I help teams of all sizes navigate AI transformation: upleveling developers, building AI-native workflows, and shipping end-to-end products. Deep expertise in developer experience, content platforms, and creator economy. Whether it's design systems, full-stack architecture, or figuring out how AI fits into your org, I can help.</p>
|
|
</div>
|
|
<a href="mailto:paul@paulbakaus.com" class="btn btn-primary">
|
|
<span>Get in touch</span>
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M5 12h14M12 5l7 7-7 7"/>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer class="site-footer">
|
|
<div class="footer-content">
|
|
<div class="footer-brand">
|
|
<span class="footer-logo">Impeccable</span>
|
|
<p class="footer-tagline">impeccable.style</p>
|
|
</div>
|
|
<div class="footer-links">
|
|
<a href="#antidote">Anti-Patterns</a>
|
|
<a href="#commands-section">Commands</a>
|
|
<a href="#casestudies">Case Studies</a>
|
|
<a href="#downloads">Downloads</a>
|
|
<a href="https://github.com/pbakaus/impeccable">GitHub</a>
|
|
</div>
|
|
</div>
|
|
<div class="footer-author">
|
|
<span class="footer-author-label">Created by <a href="https://x.com/pbakaus" target="_blank" rel="noopener">Paul Bakaus</a></span>
|
|
<div class="footer-author-links">
|
|
<a href="https://x.com/pbakaus" class="footer-social-link" aria-label="Follow on X" target="_blank" rel="noopener">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
|
|
<path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
|
|
</svg>
|
|
</a>
|
|
<a href="https://linkedin.com/in/paulbakaus" class="footer-social-link" aria-label="Connect on LinkedIn" target="_blank" rel="noopener">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
|
|
<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
|
|
</svg>
|
|
</a>
|
|
<span class="footer-author-divider"></span>
|
|
<a href="https://www.paulbakaus.com" class="footer-newsletter" target="_blank" rel="noopener">
|
|
Renaissance Geek
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
|
|
<path d="M5 12h14M12 5l7 7-7 7"/>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<script type="module" src="./app.js"></script>
|
|
</body>
|
|
</html>
|