feat(data): add motion-principles domain (Emil Kowalski) - #296
Conversation
…et protocol Adds two new search domains and four process docs ported from impeccable (pbakaus), Anthropic frontend-design, and jiji262/claude-design-skill. New data: - data/anti-patterns.csv: 30 deterministic anti-pattern rules covering generic AI aesthetics (purple gradients, default shadcn, Inter everywhere, stock photos, nested cards) with severity, mode, and better-alternative columns - data/design-philosophies.csv: 10 philosophies x 5 schools (Swiss, Brutalist, Editorial, Hara, Maximalism, Aurora, Y2K, Organic, Anti- Design) with flagship examples, signature moves, and AI prompt seeds - data/asset-protocol.md: 5-step Core Asset Protocol for branded work - data/advisor-mode.md: 3-direction protocol for vague briefs New templates: - templates/base/DESIGN.md: per-project design memory (mode, locked direction, tokens, hard rules, anti-pattern checklist) - templates/base/PRODUCT.md: per-project product memory (audience, voice rules, constraints, decision log) Search engine: - core.py: add 'antipattern' and 'philosophy' domains to CSV_CONFIG and detect_domain keyword sets Docs: - CLAUDE.md: document new domains and process files - skill-content.md: add Advisor Mode, Anti-Pattern Check, Asset Protocol, and project-memory sections to the skill workflow CLI assets synced per CLAUDE.md sync rules. Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]>
Adds a new 'motion' search domain covering 37 motion-design principles synthesized from Emil Kowalski's open-source design engineering skill (github.com/emilkowalski/skill, animations.dev, Sonner, Vaul). Coverage: - Animation Decision Framework: frequency tiers, purpose audit - Easing: custom cubic-beziers, ease-out for entries, ease-in-out for on-screen movement, linear for constant motion - Duration: per-element ranges, asymmetric enter/exit, sub-300ms rule - Springs: when to use, Apple-style config, bounce ranges - Components: button :active scale(0.97), never-from-zero, popover origin (with modal exception), tooltip skip-on-subsequent, blur masking, @starting-style - Transforms: percentage translate, scale-children, transform-origin - Performance: transform/opacity only, CSS-vars-on-parent caveat, Framer Motion shorthand pitfall, CSS > JS under load, WAAPI usage - Gestures: velocity dismissal (>0.11), boundary damping, pointer capture, multi-touch protection - Accessibility: prefers-reduced-motion (gentler not zero), hover gating with @media (hover: hover) and (pointer: fine) - Polish: stagger 30-80ms, cohesion, next-day review, real-device testing - Sonner-derived library principles: defaults > options, edge cases invisibly handled - Debug: DevTools Animations panel, slow-motion review Files: - data/motion-principles.csv (37 rows) - data/motion-principles-CREDITS.md (source attribution + credit guidance for derived work) - scripts/core.py: register 'motion' domain in CSV_CONFIG and detect_domain keyword set - CLAUDE.md, skill-content.md: document the new domain - cli/assets/ synced Test plan: - search.py "ease out animation" --domain motion -> hits Easing rows - search.py "framer motion drops frames" -> auto-detects motion domain - search.py "purple gradient" --domain antipattern -> still works (no regression) Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]>
|
Note: this PR is stacked on #295 (anti-patterns + philosophies + asset protocol). The diff currently shows +1186 / 21 files because #295 hasn't merged yet. The actual content of this PR is ~190 lines / 9 files — only the motion-principles additions:
If #295 merges first, this PR's diff will auto-shrink to its actual scope. Either PR can be reviewed independently of the other; they touch the same |
|
Summary: I’m deferring this from the cron-safe PR lane because the visible diff is oversized and stacked on another broad PR.nnDecision: deferred / needs restack or splitnnEvidence:n- GitHub currently shows 21 changed files with +1,186/-4.n- The author note says this is stacked on #295 and the actual motion-principles slice should shrink after #295 merges or after a rebase.n- The diff includes both the intended motion-principles files and broader anti-patterns/philosophy/advisor/template assets, so a bounded cron review cannot safely separate the true scope from the stacked base.nnNext step: please rebase/restack this PR onto current main or split the motion-principles domain into a narrow PR that only contains the motion CSV, credits, source-of-truth script/template updates, synced CLI assets, and the listed search smoke-test output. |
mrgoonie
added
agent:github-maintain
…der#296 PR nextlevelbuilder#296 (feat/emil-motion-principles) independently registers a "motion" domain key in CSV_CONFIG/detect_domain for motion-principles.csv (37 design-principle rows). Both PRs adding the same dict key would cause one to silently overwrite the other's domain registration if merged independently, per the automated review on this PR. The two domains are complementary, not duplicate (design principles vs. ready-to-use GSAP code snippets), so this renames this PR's domain from "motion" to "gsap" - a more precise name given every row is GSAP-specific implementation code. The --motion CLI dial and its "Subtle/Standard/ Complex" tiers are unaffected (unrelated to the domain key; only the `--domain gsap` search endpoint and its internal lookup changed). No regressions: --design-system output with no dials set remains byte-identical to before this feature. Co-Authored-By: Claude Sonnet 5 <[email protected]>
2 participants
Summary
Adds a new
motionsearch domain covering 37 motion-design principles synthesized from Emil Kowalski's open-source design engineering skill. Emil built Sonner and Vaul, runs animations.dev, and is widely regarded as the motion authority for modern web UI. This PR ports his rules into ui-ux-pro-max as a searchable, BM25-indexable CSV.Coverage (37 rules across 8 categories)
{ duration, bounce }), subtle bounce in product UI:activescale(0.97), never animate fromscale(0), popover transform-origin (with modal exception), skip tooltip delay on subsequent hovers, blur to mask imperfect crossfades,@starting-styleprefers-reduced-motion(gentler not zero), hover gating with@media (hover: hover) and (pointer: fine)Files
data/motion-principles.csv(37 rows; Category, Principle, Keywords, Why It Matters, Do, Don't, Code Good, Code Bad, Severity, Source)data/motion-principles-CREDITS.md(source attribution + credit guidance for derived work)scripts/core.py— registermotioninCSV_CONFIGanddetect_domainCLAUDE.md— document new domaintemplates/base/skill-content.md— add Motion Review workflow sectioncli/assets/— synced per CLAUDE.md sync rulesTest plan
python3 src/ui-ux-pro-max/scripts/search.py "ease out animation" --domain motion→ hits Easing rowspython3 src/ui-ux-pro-max/scripts/search.py "framer motion drops frames"→ auto-detectsmotiondomainpython3 src/ui-ux-pro-max/scripts/search.py "scale on press button feedback" --domain motion→ returns Component rulepython3 src/ui-ux-pro-max/scripts/search.py "purple gradient" --domain antipattern→ no regression on existing domainsAttribution
Each row's
Sourcecolumn attributes specifically. Most trace to Emil directly; Vaul-derived gesture rules and Sonner library principles credit those projects;prefers-reduced-motionand easing-curve resources cite WCAG and easing.dev. Full credit guidance inmotion-principles-CREDITS.mdrecommends linking to emilkowal.ski and animations.dev in derived work.Why this PR is a separate one from #295
Independent and non-overlapping. Anti-patterns / philosophies / asset protocol is about what to design; motion principles is about how to animate. Easier to review, easier to reject one without losing the other.
🤖 Generated with Claude Code