skills/pbakaus_impeccable
1
0
Fork 0
mirror of https://github.com/pbakaus/impeccable.git synced 2026-09-13 06:36:26 +03:00
Code Issues Packages Projects Releases Wiki Activity
Files
8a4e4bd3804066bb41fb03b5a112f8a9a96a058f
pbakaus_impeccable/public/index.html
T
Paul BakausandClaude Opus 4.5 d7937b1844 Rename /review command to /critique to avoid Claude conflict 
The /review command conflicts with a built-in Claude Code command.
Renamed to /critique which better reflects design terminology.

- Rename source/commands/review.md → critique.md
- Update command content and descriptions
- Rename demo file and update references
- Update data.js command mappings
- Update case study example in index.html
- Rebuild dist files for all providers

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-07 18:57:55 -08:00

467 lines
23 KiB
HTML
Raw Blame History

<!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.">
<!-- 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.svg">
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:url" content="https://impeccable.style">
<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.svg">
<link rel="icon" type="image/svg+xml" href="./favicon.svg">
<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/styles.css">
</head>
<body class="min-h-screen overflow-x-hidden leading-relaxed">
<!-- 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>
<!-- 1. HERO -->
<section id="hero">
<!-- Shader viewport with overlayed content -->
<div class="hero-shader" id="hero-shader">
<div class="hero-overlay-content">
<h1 class="hero-title-overlay">Impeccable</h1>
<p class="hero-tagline-overlay">Design fluency for Claude Code, Codex, and more.</p>
<a href="#downloads" class="hero-cta-overlay">Get Started</a>
</div>
</div>
<!-- Content below the shader -->
<div class="hero-container">
<div class="hero-content">
<h2 class="hero-section-title" data-reveal>What's Included</h2>
<!-- Visual Equation -->
<div class="hero-equation" data-reveal>
<div class="equation-block">
<span class="equation-label">Enhanced Skill</span>
<span class="equation-title">frontend-design</span>
<ul class="equation-list">
<li>Anthropic's original skill</li>
<li>+ curated anti-patterns</li>
<li>+ 7 deep reference guides</li>
</ul>
</div>
<span class="equation-operator">+</span>
<div class="equation-block">
<span class="equation-label">Steering Commands</span>
<span class="equation-title">17 commands</span>
<ul class="equation-list">
<li>/polish, /audit, /simplify</li>
<li>/bolder, /quieter, /animate</li>
<li>and 11 more...</li>
</ul>
</div>
</div>
<!-- Bottom: Logos -->
<div class="hero-footer" data-reveal>
<div class="hero-logos">
<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="30" height="30" loading="lazy">
<img src="https://img.logo.dev/claude.ai?token=pk_dtRHfeTyRzG5zZInUc65Xw&size=64&format=png" alt="Claude Code" width="30" height="30" loading="lazy">
<img src="https://img.logo.dev/gemini.google.com?token=pk_dtRHfeTyRzG5zZInUc65Xw&size=64&format=png" alt="Gemini CLI" width="24" height="24" loading="lazy">
<img src="https://img.logo.dev/openai.com?token=pk_dtRHfeTyRzG5zZInUc65Xw&size=64&format=png" alt="Codex CLI" width="24" height="24" loading="lazy">
</div>
</div>
</div>
</div>
</div>
<div class="hero-scroll-indicator" aria-hidden="true">
<span>Scroll</span>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M12 5v14M19 12l-7 7-7-7"/>
</svg>
</div>
</header>
<main class="site-content" id="main-content">
<!-- 2. THE PROBLEM - AI Design Bias -->
<section class="problem-section" id="problem">
<div class="section-header" data-reveal>
<span class="section-number">01</span>
<h2 class="section-title">AI Has Design Bias</h2>
</div>
<div class="problem-content">
<p class="section-lead" data-reveal>Every LLM learned from the same generic templates. Without explicit guidance, they converge on the same predictable defaults.</p>
<!-- Before/After Demo - The Hero -->
<div class="split-comparison" id="lens-comparison" data-reveal>
<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>
<!-- Compact Bias Tags -->
<div class="bias-tags" data-reveal>
<span class="bias-tags-label">Common AI defaults:</span>
<div class="bias-tags-list">
<span class="bias-tag">Inter/Roboto fonts</span>
<span class="bias-tag">Purple gradients</span>
<span class="bias-tag">Cards on cards</span>
<span class="bias-tag">Centered everything</span>
<span class="bias-tag">Gray text on color</span>
<span class="bias-tag">Decorative shadows</span>
</div>
</div>
</div>
</section>
<!-- 3. THE ANTIDOTE - Patterns & Anti-Patterns -->
<section class="antidote-section" id="antidote">
<div class="section-header" data-reveal>
<span class="section-number">02</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>
<!-- 4. THE SOLUTION - Two-part system -->
<section class="solution-section" id="solution">
<div class="section-header" data-reveal>
<span class="section-number">03</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">04</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">05</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">Dashboard</button>
<button class="transformation-tab" role="tab" aria-selected="false" data-tab="1">Landing Page</button>
<button class="transformation-tab" role="tab" aria-selected="false" data-tab="2">Form UX</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">
<div class="transformation-placeholder">Before screenshot</div>
<figcaption>Before</figcaption>
</figure>
<span class="transformation-arrow">→</span>
<figure class="transformation-after">
<div class="transformation-placeholder">After screenshot</div>
<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>
<article class="transformation-panel" role="tabpanel" data-panel="1">
<div class="transformation-images">
<figure class="transformation-before">
<div class="transformation-placeholder">Before screenshot</div>
<figcaption>Before</figcaption>
</figure>
<span class="transformation-arrow">→</span>
<figure class="transformation-after">
<div class="transformation-placeholder">After screenshot</div>
<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="2">
<div class="transformation-images">
<figure class="transformation-before">
<div class="transformation-placeholder">Before screenshot</div>
<figcaption>Before</figcaption>
</figure>
<span class="transformation-arrow">→</span>
<figure class="transformation-after">
<div class="transformation-placeholder">After screenshot</div>
<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>
</div>
</div>
<!-- Lightbox for expanded view -->
<div class="lightbox" id="image-lightbox">
<button class="lightbox-close" aria-label="Close">&times;</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">06</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="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>
<div class="download-card-content">
<h3 class="download-card-title">Cursor</h3>
<span class="download-card-badge">Full Featured</span>
<p class="download-card-desc">Full Agent Skills support. Requires Cursor nightly for skills.</p>
</div>
<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>
</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>
<div class="download-card-content">
<h3 class="download-card-title">Claude Code</h3>
<span class="download-card-badge">Full Featured</span>
<p class="download-card-desc">The most complete version with all features. Works with Claude's native skills system.</p>
</div>
<button class="btn btn-primary" data-bundle="claude-code" aria-label="Download Claude Code 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>
<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>
<div class="download-card-content">
<h3 class="download-card-title">Gemini CLI</h3>
<span class="download-card-badge">Full Featured</span>
<p class="download-card-desc">Native integration with Gemini's command system and context files.</p>
</div>
<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>
</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>
<div class="download-card-content">
<h3 class="download-card-title">Codex CLI</h3>
<span class="download-card-badge">Full Featured</span>
<p class="download-card-desc">Full Agent Skills support with OpenAI's native prompt and skill system.</p>
</div>
<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. OPEN SOURCE -->
<section class="opensource-section" id="opensource">
<div class="opensource-content" data-reveal>
<h2 class="opensource-title">Open Source</h2>
<p class="opensource-desc">View the source, contribute skills and commands, or report issues on GitHub.</p>
<a href="https://github.com/pbakaus/impeccable" class="btn btn-secondary">
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
</svg>
<span>View Repository</span>
</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>
Reference in New Issue View Git Blame Copy Permalink