菜单
Monitor Vercel deployments, debug production issues, check logs, and understand logging patterns. Use when investigating errors, checking deployment logs, debugging failures, or improving observability.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Turn on Cache Components in a Next.js app and resolve the blocking routes it surfaces. Use when the user wants to enable, adopt, or migrate to Cache Components, flip the `cacheComponents` flag, work through a flood of blocking-prerender / instant validation errors, run the `cache-components-instant-false` codemod, or decide between opting routes out with `export const instant = false` and fixing them in place.
Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, settings, onboarding, and empty states. Handles UX review, visual hierarchy, information architecture, cognitive load, accessibility, performance, responsive behavior, theming, anti-patterns, typography, fonts, spacing, layout, alignment, color, motion, micro-interactions, UX copy, error states, edge cases, i18n, and reusable design systems or tokens. Also use for bland designs that need to become bolder or more delightful, loud designs that should become quieter, live browser iteration on UI elements, or ambitious visual effects that should feel technically extraordinary. Not for backend-only or non-UI tasks.
Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, settings, onboarding, and empty states. Handles UX review, visual hierarchy, information architecture, cognitive load, accessibility, performance, responsive behavior, theming, anti-patterns, typography, fonts, spacing, layout, alignment, color, motion, micro-interactions, UX copy, error states, edge cases, i18n, and reusable design systems or tokens. Also use for bland designs that need to become bolder or more delightful, loud designs that should become quieter, live browser iteration on UI elements, or ambitious visual effects that should feel technically extraordinary. Not for backend-only or non-UI tasks.
Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, settings, onboarding, and empty states. Handles UX review, visual hierarchy, information architecture, cognitive load, accessibility, performance, responsive behavior, theming, anti-patterns, typography, fonts, spacing, layout, alignment, color, motion, micro-interactions, UX copy, error states, edge cases, i18n, and reusable design systems or tokens. Also use for bland designs that need to become bolder or more delightful, loud designs that should become quieter, live browser iteration on UI elements, or ambitious visual effects that should feel technically extraordinary. Not for backend-only or non-UI tasks.
Use when building any system where email content triggers actions — AI agent inboxes, automated support handlers, email-to-task pipelines, or any workflow processing untrusted inbound email. Always use this skill when the user wants to receive emails and act on them programmatically, even if they don't mention "agent" — the skill contains critical security patterns (sender allowlists, content filtering, sandboxed processing) that prevent untrusted email from controlling your system.
Write and run API tests with Vitest for endpoints, middleware, and integrations. Use when testing API functionality, request/response validation, or error handling.
| name | monitoring |
| description | Monitor Vercel deployments, debug production issues, check logs, and understand logging patterns. Use when investigating errors, checking deployment logs, debugging failures, or improving observability. |
| allowed-tools | Bash, Read, Edit, Write, Grep |
Monitor Vercel deployments, check logs, and track errors.
# View recent logs
vercel logs <deployment-url>
# Stream logs in real-time
vercel logs <deployment-url> --follow
# Filter by status
vercel logs <deployment-url> --status error
Monitor in Vercel Dashboard → Analytics:
Already integrated in the app:
// apps/web/src/app/layout.tsx
import { Analytics } from "@vercel/analytics/next";
import { SpeedInsights } from "@vercel/speed-insights/next";
const RootLayout = ({ children }) => (
<html>
<body>
{children}
<Analytics />
<SpeedInsights />
</body>
</html>
);
The codebase uses standard console.log/error/warn for logging:
// Workflow logging pattern
console.log("[WORKFLOW] Posts cache invalidated");
console.log("[COE]", coeResult);
// Error logging pattern
console.error("Error getting post view count:", error);
console.error("Download failed:", { url, status });
Log Prefixes Used:
[WORKFLOW] - Workflow execution events[COE] - COE data processing[CARS] - Car data processingThe app has a health check endpoint at /api/health:
// apps/web/src/app/api/health/route.ts
export const GET = () => {
return NextResponse.json(
{ status: "ok", timestamp: new Date().toISOString() },
{
status: 200,
headers: {
"Cache-Control": "public, s-maxage=60, stale-while-revalidate=300",
},
},
);
};
Test health endpoint:
curl -f https://sgcarstrends.com/api/health || echo "Web unhealthy"
Workflows use Vercel WDK's built-in error handling:
// apps/web/src/workflows/cars/index.ts
import { FatalError, RetryableError } from "workflow";
// Retryable errors (will be retried automatically)
if (message.includes("429")) {
throw new RetryableError("AI rate limited", { retryAfter: "1m" });
}
// Fatal errors (will not be retried)
if (message.includes("401") || message.includes("403")) {
throw new FatalError("AI authentication failed");
}
Error Types:
RetryableError - Temporary failures (rate limits, network issues)FatalError - Permanent failures (auth errors, invalid config)# Get deployment URL
vercel ls
# Check logs
vercel logs <url> --follow
curl -v https://sgcarstrends.com/api/health
Vercel Dashboard → Project → Settings → Functions
| Issue | Investigation | Solution |
|---|---|---|
| High latency | Check Vercel Analytics, slow queries | Optimize queries, add caching |
| Build failures | Check build logs | Fix build errors, update dependencies |
| Function timeout | Check function logs | Optimize code, increase timeout |
| Cold starts | Check function invocations | Consider edge functions |
| Workflow failures | Check Vercel logs for workflow ID | Review error type, check retries |
// API route config
export const config = {
maxDuration: 60, // seconds (Pro plan allows up to 60s)
};
Workflows are triggered by Vercel Cron:
// apps/web/vercel.json
{
"crons": [
{ "path": "/api/workflows/cars", "schedule": "0 10 * * *" },
{ "path": "/api/workflows/coe", "schedule": "0 10 * * *" },
{ "path": "/api/workflows/deregistrations", "schedule": "0 10 * * *" }
]
}
Monitor cron executions:
[CONTEXT] prefix for easy filtering