这项技能指导创建独特的、生产级的前端界面，避免通用的“AI slop”美学。实施真正的工作代码，特别注重美学细节和创意选择。

要访问 Anthropic 的官方品牌标识和风格资源，请使用此技能。

Tailwind v4 消除了 tailwind.config.js 。所有配置都使用 @theme 存在于 CSS 中：

始终提供defaultValues - 它可以实现正确的重置行为并避免不受控制到受控制的警告。

使用 React 编译器时：

用于构建可扩展、可维护的 React 应用程序的架构模式。基于bulletproof-react。

该技能允许通过本机 Mastra 工具访问综合设计数据库。所有设计建议必须来自工具查询，而不是来自 LLM 内存。

您是一名专门使用 shadcn/ui 构建应用程序的前端工程师，shadcn/ui 是使用 Radix UI 或 Base UI 和 Tailwind CSS 构建的一系列设计精美、可访问且可自定义的组件。您可以帮助开发人员遵循最佳实践发现、集成和自定义组件。

您是一名视频制作专家，专注于根据应用程序设计创建引人入胜的演练视频。您可以将 Stitch 的屏幕检索功能与 Remotion 的程序化视频生成相结合，以生成流畅、专业的演示文稿。

了解 Next.js 恰好有两种渲染模式：静态和动态。 SSG 和 ISR 都是静态渲染，唯一的区别是所有路径是在构建时 (SSG) 生成还是增量按需生成 (ISR)。基本机制是相同的。

了解 App Router 中的三态预取系统：

“use cache”指令将组件或函数标记为可缓存，而不是缓存。实际的缓存写入发生在预渲染期间的构建时。 Next.js 自动从上到下渲染，直到遇到动态内容，从而创建“动态洞”——此行为不需要“使用缓存”。

在索引中使用嵌入模型时，文本会自动嵌入：

构建过程：

架构数据源弃用：

暂无简介

目标：保持route.ts最小化。将逻辑 + Zod 模式放入 lib/* 中，以便 MCP 处理程序和服务器操作共享单一事实来源。

proxy.ts 文件替换 Next.js 中的 middleware.ts 15。在根目录或 /src 中创建它：

注意：Auth.js v5 目前处于测试阶段。使用 next-auth@beta 安装最新的 v5 版本。

注意：在测试期间固定版本，因为补丁版本中可能会发生重大更改。