wilwaldon writes a curated toolkit of 70+ tools'' skills, plugins, MCP servers, and CLAUDE.md config snippets'' organized by use case to help Claude Code produce better-looking frontend output, covering everything from aesthetic direction and site-wide theming through animation, Figma-to-code pipelines, browser automation testing, and deployment.
- The "essentials" stack for any project is just three commands: the official frontend-design skill, Context7 (live docs), and Playwright MCP
- MCP servers consume ~55k tokens at session start; skills load only ~100 tokens, making them a cheaper way to inject specialized knowledge
- Figma's MCP server now supports "Code to Canvas" (Feb 2026), pushing a running UI back into Figma as editable layers
- The Design Tokens skill derives an entire OKLCH color palette from a single `--brand-hue` number
- The "essentials" stack for any project is just three commands: the official frontend-design skill, Context7 (live docs), and Playwright MCP
- MCP servers consume ~55k tokens at session start; skills load only ~100 tokens, making them a cheaper way to inject specialized knowledge
- Figma's MCP server now supports "Code to Canvas" (Feb 2026), pushing a running UI back into Figma as editable layers
- The Design Tokens skill derives an entire OKLCH color palette from a single `--brand-hue` number
This tutorial provides a step-by-step guide to building a lightweight personal AI agent inspired by the nanobot architecture in Google Colab. The approach focuses on recreating core components—such as provider abstractions, tool registration, session memory, and lifecycle hooks—rather than relying on heavy external frameworks. Key features include a tool registry for Python functions, token-budgeted memory management, and an MCP-style tool server for external capabilities. The guide includes a complete Python implementation that supports both live OpenAI-compatible models and a deterministic mock provider for offline testing.
Main topics covered:
- Provider abstraction for multi-model compatibility
- Automated tool schema generation using decorators
- Session-specific memory with token budgeting
- Lifecycle hooks for auditing and timing
- Dynamic skill loading and MCP server connection
Main topics covered:
- Provider abstraction for multi-model compatibility
- Automated tool schema generation using decorators
- Session-specific memory with token budgeting
- Lifecycle hooks for auditing and timing
- Dynamic skill loading and MCP server connection
