mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-12 22:26:38 +03:00
Paul BakausandClaude Opus 4.5
df981860c2
- Updated claude-code transformer to generate markdown from YAML patterns/antipatterns - Removed redundant prose body from patterns.md - SKILL.md now contains detailed lists (5 items per category) instead of condensed prose - patterns.md YAML frontmatter is now the single source of truth for both: - Website API (/api/patterns) - Generated skill files 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
89 lines
3.7 KiB
Markdown
89 lines
3.7 KiB
Markdown
---
|
||
patterns:
|
||
- name: Typography
|
||
items:
|
||
- Use a modular type scale (1.2, 1.25, 1.333, 1.5 ratios)
|
||
- Pair a distinctive display font with a refined body font
|
||
- Establish clear hierarchy through weight, size, and spacing
|
||
- Set body text at 16-18px minimum for readability
|
||
- Use proper line heights (1.4-1.6 for body, tighter for headings)
|
||
- name: Color & Contrast
|
||
items:
|
||
- Build palettes from a dominant color with intentional accents
|
||
- Use off-whites and near-blacks for softer, sophisticated feel
|
||
- Meet WCAG AA contrast (4.5:1 text, 3:1 UI elements)
|
||
- Create semantic color tokens (success, warning, error, info)
|
||
- Test with color blindness simulators
|
||
- name: Layout & Space
|
||
items:
|
||
- Use a spacing scale (4, 8, 12, 16, 24, 32, 48, 64, 96)
|
||
- Create visual rhythm through varied spacing
|
||
- Let content breathe with generous whitespace
|
||
- Use asymmetry and unexpected compositions
|
||
- Break the grid intentionally for emphasis
|
||
- name: Motion
|
||
items:
|
||
- Animate with purpose (guide attention, confirm actions)
|
||
- Use 150-300ms for micro-interactions
|
||
- Prefer transform and opacity (GPU-accelerated)
|
||
- Respect prefers-reduced-motion preferences
|
||
- Stagger reveals for orchestrated page loads
|
||
- name: Interaction
|
||
items:
|
||
- Design clear, visible focus indicators
|
||
- Make touch targets at least 44×44px
|
||
- Provide immediate feedback for all actions
|
||
- Write specific, helpful error messages
|
||
- Support keyboard, mouse, and touch equally
|
||
- name: Responsive
|
||
items:
|
||
- Design mobile-first, enhance for larger screens
|
||
- Use fluid typography (clamp for smooth scaling)
|
||
- Ensure all functionality works across devices
|
||
- Test landscape orientation on mobile
|
||
- Consider device capabilities (not just screen size)
|
||
antipatterns:
|
||
- name: Typography
|
||
items:
|
||
- Don't use more than 2-3 font families
|
||
- Don't use decorative fonts for body text
|
||
- Don't implement arbitrary font sizes without a scale
|
||
- Don't sacrifice readability for aesthetic novelty
|
||
- Don't skip fallback font definitions
|
||
- name: Color & Contrast
|
||
items:
|
||
- Don't use gray text on colored backgrounds
|
||
- Don't rely on color alone to convey information
|
||
- Don't use pure gray, pure black (#000), or pure white (#fff) - add subtle color tint
|
||
- Don't create palettes with arbitrary color choices
|
||
- Don't ignore color blindness (8% of men)
|
||
- name: Layout & Space
|
||
items:
|
||
- Don't wrap everything in cards
|
||
- Don't nest cards inside cards
|
||
- Don't make all spacing equal (variety creates hierarchy)
|
||
- Don't forget white space is a design element
|
||
- Don't create hierarchy through size alone
|
||
- name: Motion
|
||
items:
|
||
- Don't animate without purpose
|
||
- Don't use durations over 500ms for UI feedback
|
||
- Don't animate layout properties (width, height, padding, margin) - use transform instead
|
||
- Don't use bounce or elastic easing - they feel dated and tacky; use ease-out-quart/quint/expo
|
||
- Don't ignore prefers-reduced-motion
|
||
- name: Interaction
|
||
items:
|
||
- Don't remove focus indicators without alternatives
|
||
- Don't use placeholder text as labels
|
||
- Don't make touch targets smaller than 44×44px
|
||
- Don't show generic error messages
|
||
- Don't repeat the same information (redundant headers, intro restating heading, etc.)
|
||
- name: Responsive
|
||
items:
|
||
- Don't design desktop-first and cram into mobile
|
||
- Don't hide critical functionality on mobile
|
||
- Don't use device detection over feature detection
|
||
- Don't forget about landscape orientation
|
||
- Don't assume all mobile devices are powerful
|
||
---
|