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

Fix anti-patterns flagged by Impeccable on the homepage

Browse Source 
- Hero demo card no longer uses <h3> for its title, fixing the
  h1 → h3 skip in the document outline. The "after" card now uses
  <p class="impeccable-title"> matching the structure of the
  corresponding "before" slop-card (which already used a <div>).
- Constrains .changelog-items and .faq-answer to max-width: 70ch so
  long bullet points and FAQ paragraphs don't exceed comfortable
  reading length (was hitting ~135 chars/line).
- Bumps the destructive-action warning text in the /clarify command
  demo from #a16207 to #854d0e on #fef3c7, lifting the contrast from
  4.4:1 (just below WCAG AA) to ~6.4:1.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Paul Bakaus
2026-04-07 00:59:31 -07:00
co-authored by Claude Opus 4.6
parent e0090266fc
commit 0566a60dfa
4 changed files with 6 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/css/styles.css
+2
View File
@@ -1042,6 +1042,7 @@
padding-left: var(--spacing-md);
color: var(--color-charcoal);
line-height: 1.7;
max-width: 70ch;
}
.changelog-items li {
margin-bottom: var(--spacing-xs);
@@ -1135,6 +1136,7 @@
padding: 0 0 var(--spacing-md);
color: var(--color-charcoal);
line-height: 1.7;
max-width: 70ch;
animation: faqFadeIn 0.3s var(--ease-out);
}
.faq-answer p {
public/css/workflow.css
+2
View File
@@ -1116,6 +1116,7 @@
padding-left: var(--spacing-md);
color: var(--color-charcoal);
line-height: 1.7;
max-width: 70ch;
}
.changelog-items li {
@@ -1233,6 +1234,7 @@
padding: 0 0 var(--spacing-md);
color: var(--color-charcoal);
line-height: 1.7;
max-width: 70ch;
animation: faqFadeIn 0.3s var(--ease-out);
}
public/index.html
+1 -1
View File
@@ -133,7 +133,7 @@
<span class="split-badge split-badge--after">After</span>
<div class="impeccable-card">
<p class="impeccable-eyebrow">Introducing</p>
<h3 class="impeccable-title">Thoughtful Design</h3>
<p class="impeccable-title">Thoughtful Design</p>
<p class="impeccable-body">Every element serves a purpose. Hierarchy guides the eye. Whitespace breathes.</p>
<button class="impeccable-button">Explore</button>
</div>
public/js/demos/commands/clarify.js
+1 -1
View File
@@ -28,7 +28,7 @@ export default {
</div>
<div style="padding: 12px; background: #fef3c7; border: 1px solid #fcd34d; border-radius: 6px;">
<div style="font-size: 0.8125rem; font-weight: 600; color: #92400e; margin-bottom: 4px;">Delete this project?</div>
<div style="font-size: 0.75rem; color: #a16207; line-height: 1.5;">This will permanently delete 23 files. You can't undo this.</div>
<div style="font-size: 0.75rem; color: #854d0e; line-height: 1.5;">This will permanently delete 23 files. You can't undo this.</div>
</div>
<button style="padding: 10px; background: var(--color-ink); color: var(--color-paper); border: none; border-radius: 6px; font-size: 0.8125rem; font-weight: 500;">Save and Continue →</button>
</div>