imhcode 1.0.0

package/skills/mobile-app-ui-design/INDEX.md

@@ -0,0 +1,131 @@
+# Codebase Index
+
+## Overview
+This repository contains a comprehensive mobile app UI/UX design skill and reference guide focused on creating professional, polished mobile interfaces.
+
+## File Structure
+
+```
+mobile-app-ui-design/
+├── SKILL.md                      # Mobile App UI/UX Design Skill Guide
+├── references/
+│   └── industry-conventions.md   # Industry-Specific Design Reference
+├── INDEX.md                      # This file
+└── README.md                     # Documentation & Installation
+```
+
+---
+
+## SKILL.md
+**Mobile App UI/UX Design Skill**
+
+A comprehensive guide for designing high-quality mobile app interfaces following proven design principles from top-tier apps.
+
+### Key Sections:
+- **Core Philosophy** (lines 10-18): User-centric design approach
+- **Design Process** (lines 20-96): 5-step framework
+  - Step 1: Understand Context (lines 23-27)
+  - Step 2: Structure First - UX Lens (lines 29-37)
+  - Step 3: Visual Design - UI Lens (lines 39-76)
+    - Typography (lines 41-46)
+    - Color System - 60/30/10 Rule (lines 48-56)
+    - Spacing - 8-Point Grid (lines 58-64)
+    - Shadows (lines 66-69)
+    - Visual Cues & Imagery (lines 71-77)
+  - Step 4: Design for Emotion - Peak-End Rule (lines 79-87)
+  - Step 5: Polish & Details (lines 89-96)
+- **Smart Patterns** (lines 98-124): User-stage personalization, search, status tracking, categories
+- **Anti-Patterns to Avoid** (lines 126-136): Common design mistakes
+- **Implementation Notes** (lines 138-149): Technical guidance for React/Tailwind
+
+### Design Principles Summary:
+- One font family, max 4 sizes, 2 weights
+- 60/30/10 color rule
+- 8-point grid spacing system
+- Soft shadows matched to backgrounds
+- Thumb-zone primary actions
+- Emotional feedback loops
+- Peak-end rule application
+
+---
+
+## references/industry-conventions.md
+**Industry Conventions & Emotional Design Reference**
+
+Deep dive into industry-specific design languages and psychological principles for emotional design.
+
+### Key Sections:
+- **Industry-Specific Design Languages** (lines 3-55)
+  - AI/Tech (lines 7-11)
+  - Crypto/Web3 (lines 13-17): Phantom case study
+  - Finance/Banking (lines 19-23): Revolut case study
+  - Health/Wellness (lines 25-29): Ahead case study
+  - Sleep/Meditation (lines 31-34)
+  - Education/Learning (lines 36-39): Duolingo case study
+  - Fitness (lines 41-44)
+  - Productivity (lines 46-49)
+  - E-commerce/Food (lines 51-54)
+
+- **Emotional Design Principles** (lines 59-120)
+  - Peak-End Rule (lines 60-96): Nobel Prize research by Daniel Kahneman
+  - Emotional Feedback Loops (lines 98-103)
+  - Three Strategic Principles from Spotify (lines 105-120)
+    - The Trojan Horse: Hide complexity
+    - The Vanity Mirror: Identity-based sharing
+    - The Comfort Trap: Consistency as moat
+
+- **Design Process for Client/Product Work** (lines 124-152)
+  - Phase 1: Discovery & Inspiration (lines 126-129)
+  - Phase 2: UI Direction (lines 131-135)
+  - Phase 3: UX Structure (lines 137-144)
+  - Phase 4: Combine UI + UX (lines 146-148)
+  - UI vs UX lens separation (lines 150-152)
+
+### Key Insights:
+- Industry conventions build familiarity vs. breaking them stands out
+- Peak-end rule: users remember the most intense moment + final impression
+- Emotional feedback > functional feedback
+- Separate UI and UX research lenses
+
+---
+
+## Quick Reference Guide
+
+### When to Use This Skill
+- Designing mobile app screens
+- Creating app mockups
+- Building mobile UI components
+- Improving existing mobile designs
+- Creating onboarding flows
+- Designing mobile navigation
+- Building React Native/Flutter/SwiftUI prototypes
+
+### Core Design Framework
+1. **Understand** → Context, user, primary action, industry conventions
+2. **Structure** → User flow, MVP elements, thumb zone, F-pattern
+3. **Visual Design** → Typography, color (60/30/10), spacing (8pt grid), shadows
+4. **Emotion** → Peak moment, ending, feedback loops
+5. **Polish** → Micro-interactions, states, accessibility
+
+### Design Laws Applied
+- **60/30/10 Color Rule**: 60% neutral, 30% complementary, 10% accent
+- **8-Point Grid**: All spacing divisible by 8 or 4
+- **Peak-End Rule**: Users remember peak + ending moments
+- **Thumb Zone**: Primary actions in bottom 1/3 of screen
+- **F-Pattern**: Natural reading/scanning order
+- **Typography Hierarchy**: Max 4 sizes, 2 weights, opacity for hierarchy
+
+---
+
+## Implementation Tech Stack
+- React (for artifacts)
+- Tailwind CSS (utility classes)
+- Lucide React (iconography)
+- Recharts (data visualization)
+- CSS transitions (micro-interactions)
+- Mobile-first design (375px baseline)
+
+---
+
+## Tags
+`mobile-ui` `ux-design` `emotional-design` `design-system` `react-native` `flutter` `swiftui` `tailwind` `design-principles` `app-design`

package/skills/mobile-app-ui-design/README.md

@@ -0,0 +1,135 @@
+# Mobile App UI/UX Design Skill
+
+[![Install with npx](https://img.shields.io/badge/install-npx%20skills%20add-blue)](https://skills.sh)
+[![Agent Skills](https://img.shields.io/badge/agent-skills-purple)](https://agentskills.io)
+[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](LICENSE)
+
+A comprehensive Claude Code skill for designing professional, polished mobile app interfaces that follow proven design principles from top-tier apps like Airbnb, Duolingo, Spotify, Revolut, and Phantom.
+
+## Overview
+
+This skill guides the creation of mobile app UIs that are intentional, smooth, personal, and alive — not just functional. It covers everything from design philosophy to implementation details.
+
+## Features
+
+- **Complete Design Process**: 5-step framework from context to polish
+- **Industry-Specific Conventions**: Design patterns for 9+ industries (AI, Crypto, Finance, Health, etc.)
+- **Emotional Design Principles**: Peak-End Rule, feedback loops, strategic patterns
+- **Design Systems**: Typography, color (60/30/10 rule), spacing (8-point grid)
+- **Implementation Guidance**: React, Tailwind CSS, component patterns
+
+## When to Use
+
+This skill automatically triggers when you ask Claude to:
+- Design a mobile app screen
+- Create app mockups
+- Build mobile UI components
+- Improve an existing mobile app design
+- Create onboarding flows
+- Design mobile navigation
+- Build React Native/Flutter/SwiftUI interfaces
+
+## Design Principles
+
+### Core Philosophy
+Great mobile UI isn't about flashiness — it's about intentionality. Every pixel, spacing value, and color choice should serve the user.
+
+### Key Design Laws
+- **60/30/10 Color Rule**: 60% neutral, 30% complementary, 10% accent
+- **8-Point Grid System**: All spacing divisible by 8 or 4
+- **Peak-End Rule**: Users remember peak moment + ending
+- **Thumb Zone**: Primary actions in bottom 1/3 of screen
+- **F-Pattern**: Natural reading/scanning order
+- **Typography Hierarchy**: Max 4 sizes, 2 weights
+
+## Examples
+
+```
+"Design a fitness app home screen"
+"Create a banking app dashboard"
+"Build a meditation app interface"
+"Design a crypto wallet transaction screen"
+"Create an onboarding flow for a health app"
+```
+
+## File Structure
+
+```
+.
+├── SKILL.md                      # Main skill guide
+├── references/
+│   └── industry-conventions.md   # Industry-specific patterns & emotional design
+├── INDEX.md                      # Navigation & quick reference
+└── README.md                     # This file
+```
+
+## Installation
+
+### Quick Install (Recommended)
+```bash
+npx skills add ceorkm/mobile-app-ui-design
+```
+
+### Manual Installation
+1. Clone this repository
+2. Copy files to `~/.claude/skills/mobile-app-ui-design/`
+3. Restart Claude Code
+
+### Direct Download
+```bash
+npx skills add ceorkm/mobile-app-ui-design
+```
+
+## What's Included
+
+### SKILL.md
+- Core design philosophy
+- 5-step design process
+- Visual design rules (typography, color, spacing, shadows)
+- Smart UI patterns
+- Anti-patterns to avoid
+- Implementation notes
+
+### industry-conventions.md
+- Industry-specific design languages (AI, Crypto, Finance, Health, etc.)
+- Peak-End Rule from Nobel Prize research
+- Emotional feedback loops
+- Spotify's strategic principles
+- 4-phase design process for client work
+
+### INDEX.md
+- Complete navigation with line numbers
+- Quick reference guide
+- Design laws summary
+- Tech stack overview
+
+## Tech Stack
+
+The skill provides guidance for:
+- React (artifacts)
+- Tailwind CSS (utility classes)
+- Lucide React (icons)
+- Recharts (data visualization)
+- CSS transitions (micro-interactions)
+
+## Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+## License
+
+MIT License - feel free to use this skill in your projects.
+
+## Credits
+
+Design principles compiled from industry best practices, research papers, and case studies from leading design teams at:
+- Airbnb
+- Duolingo
+- Spotify
+- Revolut
+- Phantom
+- Apple (Design Award winners)
+
+---
+
+**Made for Claude Code** • [Report Issues](https://github.com/ceorkm/mobile-app-ui-design/issues)

package/skills/mobile-app-ui-design/SKILL.md

@@ -0,0 +1,7 @@
+---
+name: mobile-app-ui-design
+description: mobile app ui design patterns and best practices
+---
+# Mobile App Ui Design
+
+This skill provides mobile app ui design guidelines. Load the agent's primary skills for detailed implementation patterns.

package/skills/mobile-app-ui-design/references/industry-conventions.md

@@ -0,0 +1,151 @@
+# Industry Conventions & Emotional Design Reference
+
+## Industry-Specific Design Languages
+
+Different app categories have established visual conventions that users expect. Understanding these helps you decide when to follow conventions (for familiarity) and when to break them (to stand out).
+
+### AI / Tech Products
+- Soft gradients and moving elements
+- Depth and dimensionality with glowing elements
+- Smooth animations communicating intelligence
+- Dark or light themes with ethereal accent colors
+
+### Crypto / Web3
+- Futuristic aesthetic: neon colors, bold typography
+- Dark mode backgrounds with geometric shapes
+- High-contrast, cutting-edge visual language
+- Key lesson from Phantom: **polish builds trust** — treat visual details, motion, and transitions as core product features, not fluff
+
+### Finance / Banking
+- Blue-dominant palettes (trust, stability, reliability)
+- Generous white space, clean layouts, conservative typography
+- Design must feel safe and professional
+- Key lesson from Revolut: tactile interactions (draggable charts, 3D card flips) turn basic features into premium experiences
+
+### Health / Wellness
+- Bright, approachable colors to reduce anxiety
+- Friendly illustrations and warm micro-interactions
+- Non-intimidating onboarding flows
+- Key lesson from Ahead (Apple Design Award): guide users kindly, build the "peak" as a personalized insight moment
+
+### Sleep / Meditation
+- Purple and deep blue tones (calming associations)
+- Minimal UI, soft transitions
+- Ambient, low-contrast interfaces
+
+### Education / Learning
+- Bright, playful color palettes
+- Character-driven experiences with personality
+- Key lesson from Duolingo: character animations and emotional feedback loops doubled DAUs from 14.2M to 34M+ in 2 years
+
+### Fitness
+- Energetic colors, bold typography
+- Progress-focused with visual momentum indicators
+- Adapt UI complexity to user stage (new → returning → power user)
+
+### Productivity
+- Clean, minimal, information-dense but organized
+- Strong grid systems and consistent spacing
+- Quick-action patterns and keyboard shortcuts
+
+### E-commerce / Food
+- High-quality product photography
+- Prominent CTAs and frictionless checkout flows
+- Trust signals: reviews, ratings, delivery estimates
+
+---
+
+## Emotional Design Principles
+
+### The Peak-End Rule (from Nobel Prize-winning research by Daniel Kahneman)
+The brain doesn't remember an experience as a whole — it compresses it into two moments:
+1. **The Peak**: the most intense/emotional moment
+2. **The End**: the final impression before leaving
+
+Disney parks use this — 70% of visitors return not because the whole day was flawless, but because the moments they remember were.
+
+### Applying Peak-End to Mobile Apps
+
+**Mapping your journey:**
+1. Lay out every step in your core flow (use FigJam, sticky notes, whatever)
+2. Ask: Where is the user slowed down? Where might stress peak? Where's the quiet in between?
+3. Treat this map as a living document
+
+**Designing the peak:**
+- Pick ONE spot to create a "holy dang" moment
+- After completing a core task, hitting a milestone, or investing significant effort
+- Can be: a badge, a sparkle animation, surprise copy, a personalized brief that builds in front of them
+- Micro-animations and supporting tags showing unique value to the user's specific action
+
+**Designing the ending:**
+- Never let the app just "fall off" without closure
+- Celebrate what was done (check mark, summary card)
+- Encourage what comes next
+- Reaffirm progress ("You showed up today. That's huge.")
+- Gentle nudge to return
+
+**Reducing negative peaks:**
+- Look at wait screens, error states, long forms
+- Use uplifting microcopy
+- Add helpful tools before users even ask
+- Use delays as opportunities (loading animations, tips) instead of dead space
+
+**Testing and iterating:**
+- Try timing changes, emojis vs icons, animations vs static feedback
+- Watch where people drop off and where they linger longer than expected
+
+### Emotional Feedback Loops
+When users take actions, don't just give functional feedback — give emotional feedback:
+- Correct answer → encouragement, cheer, character reaction (not just a green check)
+- Mistake → gentle correction with personality (not just a red X)
+- Milestone → celebration that feels proportional to the achievement
+- Progress → momentum visualization (streaks, levels, completion bars with motion)
+
+### Three Strategic Principles (from Spotify's playbook)
+
+**1. The Trojan Horse — Hide complex tech in familiar interfaces**
+- Wrap sophisticated features in UI patterns users already know
+- Users don't want to interact with algorithms — they want experiences that feel natural
+- Ask: "What's the simplest, most familiar way users can interact with this feature?"
+
+**2. The Vanity Mirror — Make sharing about identity, not the app**
+- Create personal insights so meaningful that sharing feels like self-expression
+- Don't celebrate what users did in your app — celebrate who they are
+- "You're a night owl who does their best work after 9 PM" > "You completed 25 tasks"
+
+**3. The Comfort Trap — Consistency as a competitive moat**
+- Every interaction should follow the same logic and feel like it belongs to the same family
+- Predictable patterns become second nature → switching costs increase
+- Design consistency isn't about aesthetics — it's about creating habits that competitors can't replicate
+
+---
+
+## Design Process for Client/Product Work
+
+### Phase 1: Discovery & Inspiration
+1. Understand the product fundamentally: what problem, who's it for, what's different
+2. Gather UI inspiration (Mobbin, Dribbble, Behance, Twitter, real apps)
+3. Organize into mood boards by "vibe" — separate categories for different directions
+4. Present 3-5 distinct directions to stakeholders
+
+### Phase 2: UI Direction (Visual Only)
+1. Create 3-5 mockup screens exploring different visual executions
+2. Mix and match: client picks button style from A, typography from B, cards from C
+3. Finalize one unified visual direction before touching UX
+
+### Phase 3: UX Structure
+1. Brain dump ALL features, then refine to MVP (3-5 core screens)
+2. Map screen flows as labeled boxes with arrows
+3. Create wireframes (grayscale, structural, no visual design)
+4. Iterate with stakeholder feedback
+
+### Phase 4: Combine UI + UX
+1. Apply the finalized visual direction to approved wireframes
+2. Check in early — there should be no major surprises
+3. Polish: pixel-perfect alignment, all states designed (error, empty, loading, success)
+
+### Key Separation
+- **UI lens**: How do colors work together? What emotions do they evoke? What's the spacing, typography, visual hierarchy?
+- **UX lens**: Where's the search bar? Are tap targets big enough? How many steps to complete a core task? Can anything be eliminated?
+
+Never mix these lenses during research — gather UI and UX inspiration separately.

package/skills/modern-web-design/SKILL.md

@@ -0,0 +1,8 @@
+---
+name: modern-web-design
+description: modern web design — loaded from design-skills plugin
+source: design-skills-plugin
+---
+# Modern Web Design
+
+> **Plugin Skill**: This skill is provided by the `design-skills` plugin. When available, read the full skill from the plugin directory. When not available, use the agent's embedded knowledge of modern web design patterns.