@elsahafy/ux-mcp-server 2.0.0 → 4.0.0

package/README.md

@@ -1,10 +1,36 @@
 # UX MCP Server
 
-Model Context Protocol server that provides UX best practices, accessibility guidelines, usability heuristics, UI patterns, and design system principles to AI assistants.
+[![npm version](https://badge.fury.io/js/@elsahafy%2Fux-mcp-server.svg)](https://www.npmjs.com/package/@elsahafy/ux-mcp-server)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+
+Model Context Protocol server that provides comprehensive UX best practices, accessibility guidelines (WCAG), usability heuristics (Nielsen), UI patterns, performance optimization, SEO, internationalization, animation, and React patterns to AI assistants.
+
+## Installation
+
+### npm (Recommended)
+
+```bash
+npm install -g @elsahafy/ux-mcp-server
+```
+
+### npx (No Installation)
+
+```bash
+npx @elsahafy/ux-mcp-server
+```
+
+### From Source
+
+```bash
+git clone https://github.com/elsahafy/ux-mcp-server.git
+cd ux-mcp-server
+npm install
+npm run build
+```
 
 ## Features
 
-### 📚 Resources (Static Knowledge)
+### 📚 Resources (12 Knowledge Bases)
 
 Access comprehensive UX knowledge bases:
 
@@ -15,10 +41,15 @@ Access comprehensive UX knowledge bases:
 - **ux://responsive/design** - Responsive design & mobile-first principles
 - **ux://themes/dark-mode** - Dark mode implementation guide
 - **ux://content/error-messages** - User-friendly error message library
+- **ux://performance/optimization** - Core Web Vitals & performance best practices
+- **ux://seo/guidelines** - SEO best practices, meta tags, structured data
+- **ux://i18n/patterns** - Internationalization & localization patterns
+- **ux://animation/motion** - Motion design principles & accessibility
+- **ux://react/patterns** - Advanced React patterns & state management
 
-### 🛠️ Tools (Dynamic Operations)
+### 🛠️ Tools (11 Dynamic Operations)
 
-Eight powerful tools for UX analysis and generation:
+Powerful tools for UX analysis and generation:
 
 1. **analyze_accessibility** - Check code for WCAG violations
 2. **review_usability** - Evaluate against Nielsen's heuristics
@@ -28,6 +59,9 @@ Eight powerful tools for UX analysis and generation:
 6. **check_contrast** - Verify WCAG color contrast ratios
 7. **check_responsive** - Analyze mobile-first and responsive design
 8. **suggest_error_message** - Get user-friendly error messages
+9. **analyze_performance** - Check code for performance issues & Core Web Vitals
+10. **check_seo** - Analyze HTML for SEO best practices
+11. **suggest_animation** - Recommend animations for UI interactions
 
 ### 💬 Prompts (Pre-configured Reviews)
 
@@ -37,22 +71,29 @@ Three comprehensive review workflows:
 2. **usability_audit** - Complete Nielsen heuristics evaluation
 3. **design_system_setup** - Guide for creating design systems
 
-## Installation
+## Usage with Claude Desktop
 
-```bash
-# Install dependencies
-npm install
+After installing via npm, add to your Claude Desktop config file.
 
-# Build the project
-npm run build
+### Configuration
 
-# Test locally
-npm run dev
-```
+**Location of config file:**
+- macOS: `~/Library/Application Support/Claude/claude_desktop_config.json`
+- Windows: `%APPDATA%\Claude\claude_desktop_config.json`
 
-## Usage with Claude Desktop
+**If installed globally via npm:**
 
-Add to your Claude Desktop config (`claude_desktop_config.json`):
+```json
+{
+  "mcpServers": {
+    "ux-best-practices": {
+      "command": "ux-mcp-server"
+    }
+  }
+}
+```
+
+**If installed from source:**
 
 ```json
 {
@@ -60,18 +101,20 @@ Add to your Claude Desktop config (`claude_desktop_config.json`):
     "ux-best-practices": {
       "command": "node",
       "args": [
-        "/path/to/ux-mcp-server/dist/index.js"
+        "/absolute/path/to/ux-mcp-server/dist/index.js"
       ]
     }
   }
 }
 ```
 
-On Windows, the path might look like:
+On Windows (source install), the path might look like:
 ```json
 "C:\\Users\\YourName\\ux-mcp-server\\dist\\index.js"
 ```
 
+After updating the config, restart Claude Desktop.
+
 ## Example Usage
 
 ### Analyze Accessibility
@@ -107,6 +150,42 @@ On Windows, the path might look like:
 // Claude will use check_contrast tool
 ```
 
+### Analyze Performance
+
+```typescript
+"Analyze this React component for performance issues"
+
+// Claude will use analyze_performance tool to check:
+// - Image optimization
+// - CSS performance
+// - JavaScript bundle size
+// - Loading patterns
+```
+
+### Check SEO
+
+```typescript
+"Review this HTML page for SEO best practices"
+
+// Claude will use check_seo tool to validate:
+// - Meta tags (title, description)
+// - Open Graph tags
+// - Structured data (JSON-LD)
+// - Canonical URLs
+```
+
+### Suggest Animation
+
+```typescript
+"What animation should I use for a button click?"
+
+// Claude will use suggest_animation tool to recommend:
+// - Animation type
+// - Duration and easing
+// - CSS/JS implementation
+// - Accessibility considerations
+```
+
 ## Knowledge Base Contents
 
 ### WCAG Guidelines
@@ -142,6 +221,48 @@ On Windows, the path might look like:
 - Color theory
 - Component API design
 
+### Performance Optimization
+- Core Web Vitals (LCP, INP, CLS)
+- Image optimization strategies
+- CSS performance
+- JavaScript bundle optimization
+- Lazy loading & code splitting
+- Caching strategies
+- Performance budgets
+
+### SEO Best Practices
+- Meta tags (title, description, keywords)
+- Open Graph protocol
+- Twitter Cards
+- Structured data (JSON-LD, Schema.org)
+- Technical SEO (robots.txt, sitemap, canonical)
+- Local SEO & rich snippets
+
+### Internationalization (i18n)
+- Text direction (LTR/RTL support)
+- Locale-aware formatting (dates, numbers, currencies)
+- Translation patterns
+- Cultural considerations
+- Font and character set handling
+- URL structures for multilingual sites
+
+### Animation & Motion Design
+- Disney's 12 principles of animation
+- Timing and easing functions
+- Motion design principles
+- Performance (GPU acceleration)
+- Accessibility (prefers-reduced-motion)
+- Common UI animation patterns
+
+### React Patterns
+- Compound components
+- Custom hooks
+- State management strategies
+- Performance optimization (memoization, code splitting)
+- Error boundaries
+- Accessibility patterns in React
+- Testing best practices
+
 ## Development
 
 ```bash
@@ -166,6 +287,13 @@ All examples and guidelines are framework-agnostic, focusing on:
 
 Works with React, Vue, Svelte, Angular, or vanilla JavaScript.
 
+## What's New in v2.0.0
+
+- ✨ 5 new knowledge resources: Performance, SEO, i18n, Animation, React Patterns
+- 🛠️ 3 new tools: analyze_performance, check_seo, suggest_animation
+- 📦 Total: 12 resources, 11 tools, 3 prompts
+- 🚀 Published to npm for easy installation
+
 ## Contributing
 
 To add new patterns or guidelines:
@@ -173,6 +301,8 @@ To add new patterns or guidelines:
 1. Add content to appropriate file in `knowledge/` directory
 2. Update tool implementations in `src/index.ts` if needed
 3. Rebuild: `npm run build`
+4. Test locally: `npm run dev`
+5. Submit a pull request
 
 ## License
 
@@ -184,7 +314,18 @@ MIT
 - Nielsen's Usability Heuristics by Jakob Nielsen
 - UI Patterns from established design systems and best practices
 - Design Token concepts from design system community
+- Core Web Vitals from Google Web.dev
+- SEO best practices from Google Search Central
+- Animation principles from Disney and Material Design
+- React patterns from React community and best practices
+- i18n standards from Unicode CLDR and W3C
+
+## Links
+
+- **npm Package**: https://www.npmjs.com/package/@elsahafy/ux-mcp-server
+- **GitHub Repository**: https://github.com/elsahafy/ux-mcp-server
+- **Issues & Feedback**: https://github.com/elsahafy/ux-mcp-server/issues
 
 ---
 
-**Built for AI-assisted development with accessibility and usability as first-class citizens.**
+**Built for AI-assisted development with accessibility, usability, performance, and SEO as first-class citizens.**