# Nuxt layers for MCP, CSS text-fit, visual AI feedback, and typed… Canonical: https://brew.new/templates/vueschool/nuxt-layers-for-mcp-css-text-fit-visual-ai-feedback-and-typed Brand: vueschool.io Category: newsletter ![Preview of Nuxt layers for MCP, CSS text-fit, visual AI feedback, and typed…](https://cdn.brew.new/email-preview-bafa931e9fc6f863-tracking_r57wr6p2p58y2x3dfg0cf8k4kd8dv38p-1789071810978.png) ## Email content Vue School website Hi John, This week, I pulled ideas directly from posts I found interesting on Twitter/X and followed each link to dig deeper. The throughline is clear: better tooling for agent workflows, clearer platform primitives, and less glue code in day-to-day frontend work. Nuxt layers + MCP Toolkit is a powerful combo One liked post called Nuxt layers "underrated composability", and the Nuxt MCP Toolkit is a great example of why. The module lets you define MCP tools, resources, prompts, and even app widgets directly in your Nuxt codebase, then auto-discovers everything from your server/mcp/ directory. The practical win is architecture, not novelty: shared MCP definitions can live in Nuxt layers, while feature apps consume and extend them. That gives teams a clean path to reusable agent-facing capabilities without building separate servers from scratch for every project. If your team is experimenting with AI features in existing Nuxt apps, this is one of the fastest ways to move from idea to working MCP endpoint. → Explore Nuxt MCP Toolkit CSS text-fit could make responsive typography much easier → Read the CSS fit-text explainer Another post I came across pointed to the new CSS text-fit work, and it is worth watching. The proposal aims to let text grow or shrink to fit its container using native CSS rules instead of JavaScript measurement loops or hand-tuned breakpoint hacks. Early syntax in the explainer includes options like grow and shrink, with controls for whether lines scale together or individually. This is particularly promising for hero headlines, pull quotes, and card layouts where "almost fits" is usually where design quality drops. This is still in proposal/discussion territory, but if you care about type systems, design systems, or content-heavy interfaces, now is a good time to understand the model before implementations arrive. → Read the CSS fit-text explainer 💡Vue tip: When a composable starts handling API calls, retries, caching, optimistic updates, and UI state all at once, it is usually time to split responsibilities. Keep orchestration in one composable and move transport/cache policy into another to make testing and refactors dramatically easier. Agentation turns vague UI feedback into precise AI instructions → View Agentation on GitHub One of the most practical posts I "liked" this week featured Agentation, a small tool that lets you click UI elements, attach comments, and pass structured annotations to an LLM. Instead of saying "the button near the card feels off," you can send exact element paths and notes. For AI-assisted frontend workflows, this can remove a lot of back-and-forth. Designers and developers can mark intent visually, then feed that context directly into an agent prompt, webhook, or MCP endpoint. If anyone get's this working with their Vue/Nuxt app, please give us a shout (@vueschool_io on X), we'd love to hear how it works for you. → View Agentation on GitHub evlog catalogs: typed errors and audits without magic strings → View Agentation on GitHub We've featured evlog in our newsletter before, because it's such a cool logging tool. I felt compelled to bring it up again because of this sweet new feature add! evlog now let you define codes once, get autocomplete everywhere, and avoid stringly-typed observability conventions. All thanks to the “catalogs”. View the code If your app logs feel inconsistent across services, this model is worth studying. It gives teams a clearer contract between app errors, audit events, and dashboards without bolting on heavyweight infrastructure. → Read evlog catalog docs Play time: quick tooling check Which option best fits each scenario? 1. You want AI agents to call business actions from your Nuxt app: a) CSS text-fit b) Nuxt MCP Toolkit c) ResizeObserver d) Service Worker 2. You need to mark exact elements and comments before prompting an LLM: a) Agentation b) Pinia c) Lighthouse d) Storybook 3. You want typed, reusable error codes across packages: a) Local console.error b) Random enums per service c) evlog catalogs d) HTTP status text only → Answers at the end of the email! Resources worth reading around the Vue-niverse and beyond Finally, a few related links worth bookmarking: A great prompt-flow idea for agent workflows: start with /grill-with-docs, prototype quickly, then rewind and summarize in this X post. Motion/video builders should check this HTML-in-canvas update from Remotion, which unlocks effects that were hard to do before. If you are building with agents across multiple stacks, this autoskills post is an interesting automation approach. This Raycast AI Chat update thread covers built-in skills, MCP loading, and a much stronger desktop workflow. CSS background images can be cleaner with image-set(), and this post explains where it shines for 1x/2x/3x assets. If you work heavily in markdown while agents generate content, this native macOS preview app is a neat quality-of-life find. Play time: ✅ Correct answers b) Nuxt MCP Toolkit – it is built for exposing MCP tools/resources/prompts from your Nuxt app. a) Agentation – it captures element-level annotations you can pass to AI workflows. c) evlog catalogs – typed catalogs reduce magic strings and improve consistency across codebases. How many did you get right? I hope you found these updates and insights useful. If there is a Vue, Nuxt, or AI workflow topic you want us to dig into next, feel free to reply and let us know! Daniel Kelly Lead Instructor, vueschool.io Facebook X GitHub BlueSky LinkedIn YouTube Instagram TikTok Vue School is proudly part of BitterBrains – Making Developers’ Lives Easier Become a BitterBrains Community Supporter here. Courses | Vue.js Master Class | Workshops | Tutorials | Plans | Sign in 🔕 Not interested? Mute Developer Insights here. You received this email because you are subscribed to Marketing Information at thomas+vueschool@brew.marketing. Manage email preferences 2093 Philadelphia Pike #9442, Claymont, Delaware 19703, United States [Open and remix this design](https://brew.new/templates/vueschool/nuxt-layers-for-mcp-css-text-fit-visual-ai-feedback-and-typed) [Browse email designs](https://brew.new/browse/templates)