brookcs3/mcp-awwwards-todo-system

🏆 MCP Awwwards-Evaluated Todo System

Professional MCP server for Claude Desktop with systematic design principles and award-winning interface standards.

An MCP (Model Context Protocol) server for Claude Desktop that provides professional todo management with systematic design principles and maintains award-winning interface standards across conversations.

🎯 Overview

This MCP server integrates seamlessly with Claude Desktop to provide intelligent todo management that meets professional design standards.

System combines foundational design principles:

• Swiss Grid System (Josef Müller-Brockmann) → Mathematical precision, modular layout
• Typography Hierarchy (Ellen Lupton - "Thinking with Type") → Clear information structure
• Awwwards Evaluation (40% Design, 30% Usability, 20% Creativity, 10% Content) → Industry standard assessment
• Cross-Chat Persistence → Never lose progress between conversations
• Contextual Triggers → Smart auto-display based on conversation flow

✨ Features

🏆 Professional Design Standards

╔══════════════════════════════════════════════════╗
║  🏆 MCP AWWWARDS TODO SYSTEM v1.0.0          ║
║  Professional MCP Server for Claude Desktop      ║
╚══════════════════════════════════════════════════╝

▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
▓ [ ] Review MCP server documentation         ▓
▓ [✓] Create typography style guide          ▓  
▓ [~] Test font combinations                 ▓
▓ [ ] Apply Awwwards evaluation criteria     ▓
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓

▓ DESIGN:     9.2/10 (Swiss Grid + Typography) ▓
▓ USABILITY:  8.8/10 (Clear symbols + scanning) ▓
▓ CREATIVITY: 8.5/10 (Functional minimalism)   ▓
▓ CONTENT:    8.0/10 (Meaningful organization) ▓
▓                                              ▓
▓ OVERALL:    8.9/10 → SITE OF THE DAY LEVEL   ▓
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓

🎨 Style Variations

• Minimalist: Clean ▓ borders, optimal for daily use
• Brutalist: Bold ▓▓ borders, celebration style for completions
• Terminal: Gradient ░▒▓ borders, energy visualization for progress
• Modern: Light ▫ borders, fresh approach for topic shifts

📊 Awwwards Evaluation System

Every todo display is automatically evaluated against professional criteria:

• Design (40%): Visual aesthetics, layout quality, typography hierarchy
• Usability (30%): UX clarity, navigation, functional efficiency
• Creativity (20%): Innovation, originality, systematic approach
• Content (10%): Information quality, meaningful organization

Achievement Levels:

• 9.0+: Site of the Day 🏆
• 8.5+: Developer Award 🥇
• 6.5+: Honorable Mention 🎖️
• <6.5: Keep Improving 📈

🔄 Cross-Chat Persistence

• Todos persist across all conversations
• Smart initialization loads most recent incomplete session
• Multi-session management with easy switching
• Automatic progress tracking and timestamps

🔥 Contextual Auto-Display

Todos appear automatically when:

• User explicitly requests ("show todos")
• Every 10 messages in conversation
• Item completed (🎉 celebration style)
• Significant progress made (⚡ energy style)
• Partial task completion (✨ update style)
• Topic shifts in conversation (🔄 fresh style)

🚀 Installation & Setup

Quick Install (Recommended)

1. Clone the repository to your MCP server directory:

cd /Users/cameronbrooks/Server/MCP
git clone https://github.com/brookcs3/mcp-awwwards-todo-system.git mcp-awwwards-todo
cd mcp-awwwards-todo
./install.sh

2. Restart Claude Desktop

3. Done! The system will automatically initialize in your next conversation.

Manual Installation

1. Clone the repository:

cd /Users/cameronbrooks/Server/MCP
git clone https://github.com/brookcs3/mcp-awwwards-todo-system.git mcp-awwwards-todo
cd mcp-awwwards-todo

2. Add to your Claude Desktop MCP configuration:

Edit ~/Library/Application Support/Claude/claude_desktop_config.json:

{
  "mcpServers": {
    "mcp-awwwards-todo": {
      "command": "node",
      "args": ["/Users/cameronbrooks/Server/MCP/mcp-awwwards-todo/mcp-server.js"]
    }
  }
}

3. Restart Claude Desktop

Verification

Test the installation:

node mcp-server.js

You should see:

🏆 MCP Awwwards Todo System - Server Starting...
Server Info: { name: 'MCP Awwwards Todo System', version: '1.0.0', ... }

📖 Usage Guide

Automatic Initialization

When you start a new conversation, the system automatically:

1. Checks for incomplete todos from previous conversations
2. Displays most recent session with full Awwwards evaluation
3. Lists other active sessions if they exist
4. Asks if you want to switch focus to a different project

Example initialization:

🔄 MCP AWWWARDS TODO SYSTEM - CONTINUING FROM PREVIOUS CHAT

Most recent active session: Design System Project

[Professional todo display with evaluation scorecard]

📋 OTHER ACTIVE SESSIONS (2):
• API Refactor Sprint - 3/4 complete, 1 in progress
• Marketing Campaign - 1/3 complete, 2 in progress

❓ Would you like to switch to a different session?

Manual Commands

• "show todos" → Display current session
• "switch to [session-name]" → Change active session
• "create new session" → Start fresh project
• "evaluate interface" → Get detailed Awwwards breakdown

Contextual Triggers

The system intelligently displays todos:

• Every 10 messages → Periodic update
• Task completion → Celebration with brutalist style
• Progress updates → Energy visualization with terminal style
• Topic changes → Fresh display with modern style

🏗️ Architecture

MCP Server Structure

mcp-awwwards-todo-system/
├── mcp-server.js           # Main MCP server entry point
├── AwwwardsTodoSystem.js   # Core evaluation engine
├── mcp-config.json         # MCP server configuration
├── install.sh              # Automated installation script
├── package.json            # Node.js package configuration
├── README.md               # This documentation
├── index.html              # Browser demo (for testing)
└── examples/               # Usage examples
    └── basic-usage.js      # Implementation examples

Design Philosophy

Systematic Beauty Through Functional Design:

1. Mathematical Precision (Müller-Brockmann)

   • 48-character optimal reading measure
   • Consistent grid spacing
   • Modular layout proportions

2. Typography Hierarchy (Ellen Lupton)

   • Clear information structure
   • Functional symbol system
   • Left-aligned scanning patterns

3. Professional Evaluation (Awwwards)

   • Weighted scoring criteria
   • Industry standard assessment
   • Achievement level tracking

4. Contextual Intelligence

   • Conversation-aware triggers
   • Adaptive styling based on context
   • Cross-chat persistence

🔧 Configuration

MCP Server Capabilities

The server provides these MCP tools:

• create_todo_session - Create new sessions with evaluation
• display_todos - Show todos with Swiss Grid design
• update_todo_status - Update with contextual triggers
• switch_session - Multi-session management
• evaluate_interface - Awwwards-style assessment

Customization

Edit mcp-config.json to modify:

• Server name and description
• Tool capabilities
• Evaluation weights
• Style variations

Storage

Todos are persistently stored in:

~/Library/Application Support/Claude/todos.json

🧪 Testing & Development

Run Demo

node demo.js

Browser Testing

open index.html

MCP Server Testing

node mcp-server.js

Basic Usage Examples

node examples/basic-usage.js

📊 System Performance

Typical Evaluation Scores:

• Design: 9.0-9.5/10 (Swiss Grid excellence)
• Usability: 8.5-9.0/10 (Clear symbol system)
• Creativity: 8.0-8.5/10 (Functional minimalism)
• Content: 7.5-8.5/10 (Meaningful organization)

Overall Achievement Level: SITE OF THE DAY (8.9/10 average)

🤝 Contributing

This system represents a synthesis of foundational design principles with modern MCP implementation. Contributions should maintain:

• Systematic design approach
• Professional evaluation standards
• MCP protocol compatibility
• Cross-platform functionality

📚 Design References

• "Grid Systems in Graphic Design" by Josef Müller-Brockmann
• "Thinking with Type" by Ellen Lupton
• Awwwards Evaluation Criteria - Professional web design standards
• MCP Protocol - Model Context Protocol specification
• Swiss International Typographic Style - Objective clarity principles

📄 License

MIT License - Open source implementation of systematic design principles.

🆘 Support

Installation Issues:

1. Ensure Node.js is installed (node --version)
2. Check file permissions (chmod +x install.sh)
3. Verify Claude Desktop config file location
4. Restart Claude Desktop after configuration changes

Runtime Issues:

1. Check MCP server logs in Claude Desktop
2. Test server manually: node mcp-server.js
3. Verify JSON configuration syntax
4. Ensure all file paths are absolute

Design Questions:

• Swiss Grid principles follow Müller-Brockmann standards
• Typography hierarchy based on Lupton's "Thinking with Type"
• Awwwards evaluation uses official criteria weighting
• All design decisions have systematic justification

🎯 Roadmap

• Additional style variations (Bauhaus, Memphis, etc.)
• Custom evaluation criteria templates
• Team collaboration features
• Advanced typography options
• Export capabilities (PDF, PNG)
• Integration with other MCP servers

✨ Professional todo management with systematic design principles

Built for Claude Desktop users who appreciate award-winning interface design and systematic approaches to productivity.

🏆 Achievement Level: SITE OF THE DAY