skills/pbakaus_impeccable
1
0
Fork 0
mirror of https://github.com/pbakaus/impeccable.git synced 2026-09-17 00:26:41 +03:00
Code Issues Packages Projects Releases Wiki Activity

Redesign: Move before/after demo to hero position in problem section

Browse Source 
- Before/after split comparison now appears immediately after the lead text
- Replaced verbose 6-card bias grid with compact horizontal tag row
- Demo is now the hero moment, biases are supporting context
- Better visual hierarchy and flow

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Paul Bakaus
2025-12-16 15:14:34 -08:00
co-authored by Claude Opus 4.5
parent 73a3367e0a
commit 7bc51c2b3d
2 changed files with 43 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/css/main.css
+28 -41
View File
@@ -1399,59 +1399,46 @@ code {
@import "./workflow.css";
/* ============================================
BIAS GRID (Problem Section Enhancement)
BIAS TAGS (Compact Problem Section)
============================================ */
.bias-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: var(--spacing-md);
margin-bottom: var(--spacing-xl);
.bias-tags {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--spacing-sm);
margin-top: var(--spacing-lg);
}
.bias-item {
.bias-tags-label {
font-family: var(--font-mono);
font-size: 0.6875rem;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-ash);
}
.bias-tags-list {
display: flex;
align-items: flex-start;
gap: var(--spacing-sm);
padding: var(--spacing-md);
flex-wrap: wrap;
justify-content: center;
gap: var(--spacing-xs);
}
.bias-tag {
font-size: 0.75rem;
font-weight: 500;
padding: 6px 12px;
background: var(--color-cream);
border: 1px solid var(--color-mist);
border-left: 3px solid var(--color-accent);
color: var(--color-charcoal);
transition: all var(--duration-fast) var(--ease-out);
}
.bias-item:hover {
.bias-tag:hover {
border-color: var(--color-accent);
transform: translateX(4px);
}
.bias-icon {
font-size: 1.25rem;
color: var(--color-accent);
font-weight: 300;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.bias-content {
display: flex;
flex-direction: column;
gap: 2px;
}
.bias-content strong {
font-size: 0.9375rem;
font-weight: 600;
color: var(--color-ink);
}
.bias-content span {
font-size: 0.8125rem;
color: var(--color-ash);
}
/* ============================================
public/index.html
+15 -47
View File
@@ -51,53 +51,8 @@
<div class="problem-content">
<p class="section-lead" data-reveal>Every LLM learned from the same generic templates. Without guidance, you get the same predictable mistakes—every single time.</p>
<!-- Bias Examples Grid -->
<div class="bias-grid" data-reveal>
<div class="bias-item">
<span class="bias-icon">Aa</span>
<div class="bias-content">
<strong>Safe fonts</strong>
<span>Defaults to Inter, Roboto, system fonts</span>
</div>
</div>
<div class="bias-item">
<span class="bias-icon">◐</span>
<div class="bias-content">
<strong>Purple gradients</strong>
<span>Purple-to-blue on white backgrounds</span>
</div>
</div>
<div class="bias-item">
<span class="bias-icon">▢</span>
<div class="bias-content">
<strong>Cards everywhere</strong>
<span>Wraps everything in rounded boxes</span>
</div>
</div>
<div class="bias-item">
<span class="bias-icon">◫</span>
<div class="bias-content">
<strong>Gray on color</strong>
<span>Gray text on colored backgrounds</span>
</div>
</div>
<div class="bias-item">
<span class="bias-icon">≡</span>
<div class="bias-content">
<strong>Centered everything</strong>
<span>Centers all text and layouts</span>
</div>
</div>
<div class="bias-item">
<span class="bias-icon">◌</span>
<div class="bias-content">
<strong>Decorative shadows</strong>
<span>Adds shadows without purpose</span>
</div>
</div>
</div>
<div class="split-comparison" id="lens-comparison">
<!-- 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">
@@ -145,6 +100,19 @@
</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>