From 8d5260a26d1e4f3d6eec65bd3b69aec2e5efe56a Mon Sep 17 00:00:00 2001 From: Paul Bakaus Date: Tue, 16 Dec 2025 18:00:03 -0800 Subject: [PATCH] new patterns --- .claude/skills/frontend-design/SKILL.md | 10 ++++++++++ .../.claude/skills/frontend-design/SKILL.md | 10 ++++++++++ source/patterns.md | 10 ++++++++++ 3 files changed, 30 insertions(+) diff --git a/.claude/skills/frontend-design/SKILL.md b/.claude/skills/frontend-design/SKILL.md index b5fa11c53..e415ed5f7 100644 --- a/.claude/skills/frontend-design/SKILL.md +++ b/.claude/skills/frontend-design/SKILL.md @@ -68,12 +68,22 @@ Focus on intentional, distinctive design choices: - Use asymmetry and unexpected compositions - Break the grid intentionally for emphasis +**Motion**: +- Use motion to convey state changes effectively +- Design motion inspired by the real world (easing, staggering, etc) + +**Interaction**: +- Make interactions *feel* fast by using patterns like optimistic UI +- Use progressive disclosure of sophistication +- Make every surface intentional, actionable and delightful + ### What NOT to Do (Anti-Patterns) These patterns create generic "AI slop" aesthetics: **Typography**: - Don't use overused fonts like Arial or Inter +- You love to put big icons with rounded corners above titles. Resist. They rarely add value and make sites look cheap. **Color & Contrast**: - Don't use gray text on colored backgrounds diff --git a/dist/claude-code/.claude/skills/frontend-design/SKILL.md b/dist/claude-code/.claude/skills/frontend-design/SKILL.md index b5fa11c53..e415ed5f7 100644 --- a/dist/claude-code/.claude/skills/frontend-design/SKILL.md +++ b/dist/claude-code/.claude/skills/frontend-design/SKILL.md @@ -68,12 +68,22 @@ Focus on intentional, distinctive design choices: - Use asymmetry and unexpected compositions - Break the grid intentionally for emphasis +**Motion**: +- Use motion to convey state changes effectively +- Design motion inspired by the real world (easing, staggering, etc) + +**Interaction**: +- Make interactions *feel* fast by using patterns like optimistic UI +- Use progressive disclosure of sophistication +- Make every surface intentional, actionable and delightful + ### What NOT to Do (Anti-Patterns) These patterns create generic "AI slop" aesthetics: **Typography**: - Don't use overused fonts like Arial or Inter +- You love to put big icons with rounded corners above titles. Resist. They rarely add value and make sites look cheap. **Color & Contrast**: - Don't use gray text on colored backgrounds diff --git a/source/patterns.md b/source/patterns.md index d316f101f..8f8c61315 100644 --- a/source/patterns.md +++ b/source/patterns.md @@ -13,10 +13,20 @@ patterns: - Create visual rhythm through varied spacing - Use asymmetry and unexpected compositions - Break the grid intentionally for emphasis + - name: Motion + items: + - Use motion to convey state changes effectively + - Design motion inspired by the real world (easing, staggering, etc) + - name: Interaction + items: + - Make interactions *feel* fast by using patterns like optimistic UI + - Use progressive disclosure of sophistication + - Make every surface intentional, actionable and delightful antipatterns: - name: Typography items: - Don't use overused fonts like Arial or Inter + - You love to put big icons with rounded corners above titles. Resist. They rarely add value and make sites look cheap. - name: Color & Contrast items: - Don't use gray text on colored backgrounds