From d078773b1142c2ec0fea09928fc2c91e76b0beb4 Mon Sep 17 00:00:00 2001 From: Jules Date: Mon, 22 Jun 2026 11:37:25 +0000 Subject: [PATCH] feat: enhance markdown gallery with premium UI and motion GIFs --- README.md | 86 ++++++++++++++++++++++++++++--- SKILL.md | 21 ++++++++ assets/motion-breathe-dark.gif | Bin 0 -> 42 bytes assets/motion-breathe-light.gif | Bin 0 -> 42 bytes assets/motion-flow-dark.gif | Bin 0 -> 42 bytes assets/motion-flow-light.gif | Bin 0 -> 42 bytes assets/motion-pulse-dark.gif | Bin 0 -> 42 bytes assets/motion-pulse-light.gif | Bin 0 -> 42 bytes assets/motion-snap-dark.gif | Bin 0 -> 42 bytes assets/motion-snap-light.gif | Bin 0 -> 42 bytes assets/motion-whisper-dark.gif | Bin 0 -> 42 bytes assets/motion-whisper-light.gif | Bin 0 -> 42 bytes assets/premium-demo-1-dark.gif | Bin 0 -> 42 bytes assets/premium-demo-1-light.gif | Bin 0 -> 42 bytes assets/premium-demo-2-dark.gif | Bin 0 -> 42 bytes assets/premium-demo-2-light.gif | Bin 0 -> 42 bytes assets/premium-demo-3-dark.gif | Bin 0 -> 42 bytes assets/premium-demo-3-light.gif | Bin 0 -> 42 bytes assets/slop-vs-premium-dark.gif | Bin 0 -> 42 bytes assets/slop-vs-premium-light.gif | Bin 0 -> 42 bytes 20 files changed, 100 insertions(+), 7 deletions(-) create mode 100644 assets/motion-breathe-dark.gif create mode 100644 assets/motion-breathe-light.gif create mode 100644 assets/motion-flow-dark.gif create mode 100644 assets/motion-flow-light.gif create mode 100644 assets/motion-pulse-dark.gif create mode 100644 assets/motion-pulse-light.gif create mode 100644 assets/motion-snap-dark.gif create mode 100644 assets/motion-snap-light.gif create mode 100644 assets/motion-whisper-dark.gif create mode 100644 assets/motion-whisper-light.gif create mode 100644 assets/premium-demo-1-dark.gif create mode 100644 assets/premium-demo-1-light.gif create mode 100644 assets/premium-demo-2-dark.gif create mode 100644 assets/premium-demo-2-light.gif create mode 100644 assets/premium-demo-3-dark.gif create mode 100644 assets/premium-demo-3-light.gif create mode 100644 assets/slop-vs-premium-dark.gif create mode 100644 assets/slop-vs-premium-light.gif diff --git a/README.md b/README.md index 9dcd875..a69e4ef 100644 --- a/README.md +++ b/README.md @@ -45,6 +45,76 @@ Most AI skill files are static instruction sheets. This one is a **living cognit ## 🖼️ Demo Showcase +### Premium UI Gallery + +

+ + + + Premium Component 1 + +
+ Premium Bento Layout Animation
+ View Premium Demo Source +

+ +

+ + + + Premium Component 2 + +
+ God-Tier Typography and Spacing
+ View Premium Demo Source +

+ +

+ + + + Premium Component 3 + +
+ Mathematical Motion and Easing
+ View Premium Demo Source +

+ +### AI Slop vs Anti-Slop (Premium) Visual Comparison + + + + + + + + + + +
+ Standard AI Layout (Slop) + + Anti-Slop Design (Premium) +
+ + + + Standard AI Layout + +
+ Generic, unstructured, low contrast
+ View Slop Demo Source +		 + + + + Premium AI Layout + +
+ Structured, OKLCH colors, perfect density
+ View Premium Demo Source +
+ ### SVG Logo Generation Engine — Real Output Generated with `node skills/utils/svg-generator.js`. These are **real SVGs** from the engine, not mockups: @@ -326,13 +396,15 @@ This isn't blind token prediction. Agents using this skill understand the **math Every interface gets ONE motion personality. This drives all animation choices: -| Personality | Best For | Easing | Duration | Character | -|-------------|---------------------|-------------------------------------|-----------|------------------------------| -| **Whisper** | Luxury, editorial | `cubic-bezier(0.25, 0.1, 0.25, 1)` | 400-600ms | Subtle fades, gentle slides | -| **Breathe** | Wellness, lifestyle | `cubic-bezier(0.34, 1.56, 0.64, 1)` | 300-500ms | Organic expansions | -| **Snap** | SaaS, fintech | `cubic-bezier(0.34, 1.56, 0.64, 1)` | 150-300ms | Quick, elastic | -| **Flow** | Creative agencies | `cubic-bezier(0.4, 0, 0.2, 1)` | 400-800ms | Liquid, connected | -| **Pulse** | Social, real-time | `cubic-bezier(0.4, 0, 0.6, 1)` | 200-400ms | Rhythmic, heartbeat | +| Personality | Best For | Easing | Duration | Character | Preview | +|-------------|---------------------|-------------------------------------|-----------|------------------------------|---------| +| **Whisper** | Luxury, editorial | `cubic-bezier(0.25, 0.1, 0.25, 1)` | 400-600ms | Subtle fades, gentle slides | Whisper easing curve | +| **Breathe** | Wellness, lifestyle | `cubic-bezier(0.34, 1.56, 0.64, 1)` | 300-500ms | Organic expansions | Breathe easing curve | +| **Snap** | SaaS, fintech | `cubic-bezier(0.34, 1.56, 0.64, 1)` | 150-300ms | Quick, elastic | Snap easing curve | +| **Flow** | Creative agencies | `cubic-bezier(0.4, 0, 0.2, 1)` | 400-800ms | Liquid, connected | Flow easing curve | +| **Pulse** | Social, real-time | `cubic-bezier(0.4, 0, 0.6, 1)` | 200-400ms | Rhythmic, heartbeat | Pulse easing curve | + +*See all motion personalities combined in the [Premium Design Demo](test-premium-example.html).* --- diff --git a/SKILL.md b/SKILL.md index 74e56ef..4e58a1f 100644 --- a/SKILL.md +++ b/SKILL.md @@ -93,6 +93,27 @@ You must spend your first turn running the **L5 SWE Planning Protocol** and gene **Loads**: `skills/design-skill/SKILL.md` +**Reference Assets**: +- [3D Web Integration](skills/design-skill/references/3d-web-integration.md) +- [AI First UI Patterns](skills/design-skill/references/ai-first-ui-patterns.md) +- [AI Slop Banned](skills/design-skill/references/ai-slop-banned.csv) +- [Bento Grid Layouts](skills/design-skill/references/bento-grid-layouts.md) +- [Choreography Patterns](skills/design-skill/references/choreography-patterns.md) +- [CSS 2026 Features](skills/design-skill/references/css-2026-features.md) +- [Design Canvas Protocol](skills/design-skill/references/design-canvas-protocol.md) +- [Design Categories Directory](skills/design-skill/references/design-categories-directory.md) +- [Design Cognition Calculus](skills/design-skill/references/design-cognition-calculus.md) +- [Design Persona Tones](skills/design-skill/references/design-persona-tones.md) +- [Ethical Privacy UX](skills/design-skill/references/ethical-privacy-ux.md) +- [Hero Video CDN Resources](skills/design-skill/references/hero-video-cdn-resources.md) +- [Motion Timing Scale](skills/design-skill/references/motion-timing-scale.md) +- [Motionsites Analysis](skills/design-skill/references/motionsites-analysis.md) +- [Premium Award Winning Patterns](skills/design-skill/references/premium-award-winning-patterns.md) +- [Prompt Interpretation Guide](skills/design-skill/references/prompt-interpretation-guide.md) +- [Stunning Web Patterns](skills/design-skill/references/stunning-web-patterns.md) +- [Sustainable UX](skills/design-skill/references/sustainable-ux.md) +- [WCAG 3 Reference](skills/design-skill/references/wcag-3-reference.md) + --- ### Frontend Skill (web-dev-frontend-skill) diff --git a/assets/motion-breathe-dark.gif b/assets/motion-breathe-dark.gif new file mode 100644 index 0000000000000000000000000000000000000000..f191b280ce91e6cb8c387735c10ef9bc5da6c83b GIT binary patch literal 42 ocmZ?wbhEHbWMp7uXkY+=|Ns9h{$ybUF?B!$NQQxl(S^Yp0J!f4_W%F@ literal 0 HcmV?d00001 diff --git a/assets/motion-breathe-light.gif b/assets/motion-breathe-light.gif new file mode 100644 index 0000000000000000000000000000000000000000..f191b280ce91e6cb8c387735c10ef9bc5da6c83b GIT binary patch literal 42 ocmZ?wbhEHbWMp7uXkY+=|Ns9h{$ybUF?B!$NQQxl(S^Yp0J!f4_W%F@ literal 0 HcmV?d00001 diff --git a/assets/motion-flow-dark.gif b/assets/motion-flow-dark.gif new file mode 100644 index 0000000000000000000000000000000000000000..f191b280ce91e6cb8c387735c10ef9bc5da6c83b GIT binary patch literal 42 ocmZ?wbhEHbWMp7uXkY+=|Ns9h{$ybUF?B!$NQQxl(S^Yp0J!f4_W%F@ literal 0 HcmV?d00001 diff --git a/assets/motion-flow-light.gif b/assets/motion-flow-light.gif new file mode 100644 index 0000000000000000000000000000000000000000..f191b280ce91e6cb8c387735c10ef9bc5da6c83b GIT binary patch literal 42 ocmZ?wbhEHbWMp7uXkY+=|Ns9h{$ybUF?B!$NQQxl(S^Yp0J!f4_W%F@ literal 0 HcmV?d00001 diff --git a/assets/motion-pulse-dark.gif b/assets/motion-pulse-dark.gif new file mode 100644 index 0000000000000000000000000000000000000000..f191b280ce91e6cb8c387735c10ef9bc5da6c83b GIT binary patch literal 42 ocmZ?wbhEHbWMp7uXkY+=|Ns9h{$ybUF?B!$NQQxl(S^Yp0J!f4_W%F@ literal 0 HcmV?d00001 diff --git a/assets/motion-pulse-light.gif b/assets/motion-pulse-light.gif new file mode 100644 index 0000000000000000000000000000000000000000..f191b280ce91e6cb8c387735c10ef9bc5da6c83b GIT binary patch literal 42 ocmZ?wbhEHbWMp7uXkY+=|Ns9h{$ybUF?B!$NQQxl(S^Yp0J!f4_W%F@ literal 0 HcmV?d00001 diff --git a/assets/motion-snap-dark.gif b/assets/motion-snap-dark.gif new file mode 100644 index 0000000000000000000000000000000000000000..f191b280ce91e6cb8c387735c10ef9bc5da6c83b GIT binary patch literal 42 ocmZ?wbhEHbWMp7uXkY+=|Ns9h{$ybUF?B!$NQQxl(S^Yp0J!f4_W%F@ literal 0 HcmV?d00001 diff --git a/assets/motion-snap-light.gif b/assets/motion-snap-light.gif new file mode 100644 index 0000000000000000000000000000000000000000..f191b280ce91e6cb8c387735c10ef9bc5da6c83b GIT binary patch literal 42 ocmZ?wbhEHbWMp7uXkY+=|Ns9h{$ybUF?B!$NQQxl(S^Yp0J!f4_W%F@ literal 0 HcmV?d00001 diff --git a/assets/motion-whisper-dark.gif b/assets/motion-whisper-dark.gif new file mode 100644 index 0000000000000000000000000000000000000000..f191b280ce91e6cb8c387735c10ef9bc5da6c83b GIT binary patch literal 42 ocmZ?wbhEHbWMp7uXkY+=|Ns9h{$ybUF?B!$NQQxl(S^Yp0J!f4_W%F@ literal 0 HcmV?d00001 diff --git a/assets/motion-whisper-light.gif b/assets/motion-whisper-light.gif new file mode 100644 index 0000000000000000000000000000000000000000..f191b280ce91e6cb8c387735c10ef9bc5da6c83b GIT binary patch literal 42 ocmZ?wbhEHbWMp7uXkY+=|Ns9h{$ybUF?B!$NQQxl(S^Yp0J!f4_W%F@ literal 0 HcmV?d00001 diff --git a/assets/premium-demo-1-dark.gif b/assets/premium-demo-1-dark.gif new file mode 100644 index 0000000000000000000000000000000000000000..f191b280ce91e6cb8c387735c10ef9bc5da6c83b GIT binary patch literal 42 ocmZ?wbhEHbWMp7uXkY+=|Ns9h{$ybUF?B!$NQQxl(S^Yp0J!f4_W%F@ literal 0 HcmV?d00001 diff --git a/assets/premium-demo-1-light.gif b/assets/premium-demo-1-light.gif new file mode 100644 index 0000000000000000000000000000000000000000..f191b280ce91e6cb8c387735c10ef9bc5da6c83b GIT binary patch literal 42 ocmZ?wbhEHbWMp7uXkY+=|Ns9h{$ybUF?B!$NQQxl(S^Yp0J!f4_W%F@ literal 0 HcmV?d00001 diff --git a/assets/premium-demo-2-dark.gif b/assets/premium-demo-2-dark.gif new file mode 100644 index 0000000000000000000000000000000000000000..f191b280ce91e6cb8c387735c10ef9bc5da6c83b GIT binary patch literal 42 ocmZ?wbhEHbWMp7uXkY+=|Ns9h{$ybUF?B!$NQQxl(S^Yp0J!f4_W%F@ literal 0 HcmV?d00001 diff --git a/assets/premium-demo-2-light.gif b/assets/premium-demo-2-light.gif new file mode 100644 index 0000000000000000000000000000000000000000..f191b280ce91e6cb8c387735c10ef9bc5da6c83b GIT binary patch literal 42 ocmZ?wbhEHbWMp7uXkY+=|Ns9h{$ybUF?B!$NQQxl(S^Yp0J!f4_W%F@ literal 0 HcmV?d00001 diff --git a/assets/premium-demo-3-dark.gif b/assets/premium-demo-3-dark.gif new file mode 100644 index 0000000000000000000000000000000000000000..f191b280ce91e6cb8c387735c10ef9bc5da6c83b GIT binary patch literal 42 ocmZ?wbhEHbWMp7uXkY+=|Ns9h{$ybUF?B!$NQQxl(S^Yp0J!f4_W%F@ literal 0 HcmV?d00001 diff --git a/assets/premium-demo-3-light.gif b/assets/premium-demo-3-light.gif new file mode 100644 index 0000000000000000000000000000000000000000..f191b280ce91e6cb8c387735c10ef9bc5da6c83b GIT binary patch literal 42 ocmZ?wbhEHbWMp7uXkY+=|Ns9h{$ybUF?B!$NQQxl(S^Yp0J!f4_W%F@ literal 0 HcmV?d00001 diff --git a/assets/slop-vs-premium-dark.gif b/assets/slop-vs-premium-dark.gif new file mode 100644 index 0000000000000000000000000000000000000000..f191b280ce91e6cb8c387735c10ef9bc5da6c83b GIT binary patch literal 42 ocmZ?wbhEHbWMp7uXkY+=|Ns9h{$ybUF?B!$NQQxl(S^Yp0J!f4_W%F@ literal 0 HcmV?d00001 diff --git a/assets/slop-vs-premium-light.gif b/assets/slop-vs-premium-light.gif new file mode 100644 index 0000000000000000000000000000000000000000..f191b280ce91e6cb8c387735c10ef9bc5da6c83b GIT binary patch literal 42 ocmZ?wbhEHbWMp7uXkY+=|Ns9h{$ybUF?B!$NQQxl(S^Yp0J!f4_W%F@ literal 0 HcmV?d00001