mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-18 09:06:53 +03:00
Paul BakausandClaude Opus 4.6
faa7453db7
- Rename /arrange to /layout for clarity - Merge /normalize into /polish (design system discovery + cleanup phases) - Merge /onboard into /harden (onboarding, empty states, progressive disclosure) - Fold /extract into /impeccable extract sub-mode (reference file, sidebar link) - Update all counts, cross-references, data files, demos, and metadata - Remove System category (now empty) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
48 lines
2.8 KiB
JavaScript
48 lines
2.8 KiB
JavaScript
// Layout command demo - shows monotonous equal spacing becoming rhythmic and intentional
|
|
export default {
|
|
id: 'layout',
|
|
caption: 'Equal spacing everywhere → Intentional rhythm and hierarchy',
|
|
|
|
before: `
|
|
<div style="width: 100%; max-width: 240px; padding: 16px;">
|
|
<div style="text-align: center; margin-bottom: 16px;">
|
|
<div style="font-size: 14px; font-weight: bold; color: #333;">Team Members</div>
|
|
</div>
|
|
<div style="display: flex; flex-direction: column; gap: 16px;">
|
|
<div style="padding: 16px; background: #f5f5f5; border: 1px solid #e0e0e0; border-radius: 8px; text-align: center;">
|
|
<div style="width: 32px; height: 32px; background: #ddd; border-radius: 50%; margin: 0 auto 8px;"></div>
|
|
<div style="font-size: 13px; color: #333;">Alice Chen</div>
|
|
<div style="font-size: 12px; color: #888;">Designer</div>
|
|
</div>
|
|
<div style="padding: 16px; background: #f5f5f5; border: 1px solid #e0e0e0; border-radius: 8px; text-align: center;">
|
|
<div style="width: 32px; height: 32px; background: #ddd; border-radius: 50%; margin: 0 auto 8px;"></div>
|
|
<div style="font-size: 13px; color: #333;">Bob Park</div>
|
|
<div style="font-size: 12px; color: #888;">Engineer</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`,
|
|
|
|
after: `
|
|
<div style="width: 100%; max-width: 240px; padding: 16px; font-family: 'Instrument Sans', sans-serif;">
|
|
<div style="font-size: 0.8125rem; font-weight: 600; color: var(--color-ink); margin-bottom: 16px;">Team Members</div>
|
|
<div style="display: flex; flex-direction: column; gap: 6px;">
|
|
<div style="display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--color-mist);">
|
|
<div style="width: 28px; height: 28px; background: var(--color-accent); border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: white; font-size: 11px; font-weight: 600;">AC</div>
|
|
<div style="flex: 1;">
|
|
<div style="font-size: 0.8125rem; font-weight: 500; color: var(--color-ink);">Alice Chen</div>
|
|
<div style="font-size: 0.6875rem; color: var(--color-ash);">Designer</div>
|
|
</div>
|
|
</div>
|
|
<div style="display: flex; align-items: center; gap: 12px; padding: 10px 0;">
|
|
<div style="width: 28px; height: 28px; background: color-mix(in oklch, var(--color-accent) 60%, var(--color-ink)); border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: white; font-size: 11px; font-weight: 600;">BP</div>
|
|
<div style="flex: 1;">
|
|
<div style="font-size: 0.8125rem; font-weight: 500; color: var(--color-ink);">Bob Park</div>
|
|
<div style="font-size: 0.6875rem; color: var(--color-ash);">Engineer</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`
|
|
};
|