mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-17 00:26:41 +03:00
Paul BakausandClaude Opus 4.5
0b9c1846a6
New commands:
- /teach-impeccable: One-time setup that gathers UX-focused design
context (explores codebase first, then asks targeted questions)
- /review: UX design review evaluating hierarchy, clarity, emotional
resonance (complements technical /audit)
Build system improvements:
- Dynamic {{model}}, {{ask_instruction}}, {{config_file}} placeholders
per provider (Claude/Gemini/GPT/the model)
- context: fork support for Claude Code sub-agents (audit, extract)
- Skill reference auto-added to design commands
Skill refinements:
- Merged Design Thinking and Context Awareness sections
- Removed redundant patterns and technical questions
- More direct feedback guidance (radical candor)
Website updates:
- 17 commands (was 16)
- Review demo showing UX issues (HIERARCHY, NO PRIMARY, DEAD END)
- teach-impeccable in System group of periodic table
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
45 lines
2.3 KiB
JavaScript
45 lines
2.3 KiB
JavaScript
// Animate command demo - shows static elements becoming choreographed
|
|
export default {
|
|
id: 'animate',
|
|
caption: 'Static layout → Choreographed entrance',
|
|
|
|
before: `
|
|
<div style="width: 100%; max-width: 220px; display: flex; flex-direction: column; gap: 8px;">
|
|
<div style="height: 32px; background: #e0e0e0; border-radius: 4px;"></div>
|
|
<div style="height: 12px; background: #e0e0e0; border-radius: 2px; width: 60%;"></div>
|
|
<div style="display: flex; gap: 8px; margin-top: 8px;">
|
|
<div style="flex: 1; height: 64px; background: #e0e0e0; border-radius: 4px;"></div>
|
|
<div style="flex: 1; height: 64px; background: #e0e0e0; border-radius: 4px;"></div>
|
|
</div>
|
|
<div style="height: 10px; background: #e0e0e0; border-radius: 2px; width: 80%; margin-top: 8px;"></div>
|
|
<div style="height: 10px; background: #e0e0e0; border-radius: 2px; width: 65%;"></div>
|
|
</div>
|
|
`,
|
|
|
|
after: `
|
|
<div style="width: 100%; max-width: 220px; display: flex; flex-direction: column; gap: 8px;">
|
|
<div style="height: 32px; background: var(--color-ink); border-radius: 4px; animation: animDemoFade 0.5s ease-out both;"></div>
|
|
<div style="height: 12px; background: var(--color-ash); border-radius: 2px; width: 60%; animation: animDemoFade 0.5s ease-out 0.1s both;"></div>
|
|
<div style="display: flex; gap: 8px; margin-top: 8px;">
|
|
<div style="flex: 1; height: 64px; background: var(--color-mist); border-radius: 4px; animation: animDemoSlide 0.4s ease-out 0.2s both;"></div>
|
|
<div style="flex: 1; height: 64px; background: var(--color-mist); border-radius: 4px; animation: animDemoSlide 0.4s ease-out 0.3s both;"></div>
|
|
</div>
|
|
<div style="height: 10px; background: var(--color-mist); border-radius: 2px; width: 80%; margin-top: 8px; animation: animDemoFade 0.4s ease-out 0.4s both;"></div>
|
|
<div style="height: 10px; background: var(--color-mist); border-radius: 2px; width: 65%; animation: animDemoFade 0.4s ease-out 0.5s both;"></div>
|
|
</div>
|
|
<style>
|
|
@keyframes animDemoFade {
|
|
from { opacity: 0; transform: translateY(8px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
@keyframes animDemoSlide {
|
|
from { opacity: 0; transform: translateY(16px) scale(0.95); }
|
|
to { opacity: 1; transform: translateY(0) scale(1); }
|
|
}
|
|
</style>
|
|
`
|
|
};
|
|
|
|
|
|
|