frontend-fullchain-optimization
Frontend Full-Chain Performance Optimization Guide
A frontend performance diagnostic and optimization system based on Web Vitals core metrics. Core principle: User-centric — optimization is about doing less, not more.
Metric Threshold Quick Reference
| Metric | Good | Needs Improvement | Poor | Unit | Focus |
|---|---|---|---|---|---|
| LCP | ≤ 2.5s | 2.5s - 4s | > 4s | Time | Largest Contentful Paint |
| FCP | ≤ 1.8s | 1.8s - 3s | > 3s | Time | First Contentful Paint |
| INP | ≤ 200ms | 200ms - 500ms | > 500ms | Time | Interaction to Next Paint |
| CLS | ≤ 0.1 | 0.1 - 0.25 | > 0.25 | Score | Visual Stability |
| TTFB | ≤ 800ms | 800ms - 1.8s | > 1.8s | Time | Time to First Byte |
| FID | ≤ 100ms | 100ms - 300ms | > 300ms | Time | First Input Delay |
| TBT | Tasks > 50ms are long tasks | — | — | Time | Total Blocking Time |
Measurement advice: Don't rely on a single P75. Combine P60/P75/P90/P99 percentiles with daily avg/max/min trend lines. Desktop: target P98+; Mobile core pages: target P95–P99.
Diagnostic Decision Tree
More from mindfold-ai/marketplace
cc-codex-spec-bootstrap
Claude Code + Codex parallel pipeline for bootstrapping Trellis coding specs. CC analyzes the repo with GitNexus (knowledge graph) + ABCoder (AST), creates Trellis task PRDs with full architectural context and MCP tool instructions, then Codex agents run those tasks in parallel to fill spec files. Use when: bootstrapping coding guidelines, setting up Trellis specs, 'bootstrap specs for codex', 'create spec tasks', 'CC + Codex spec pipeline', 'initialize coding guidelines with code intelligence'. Also triggers when user wants to set up GitNexus or ABCoder MCP for multi-agent spec generation.
238trellis-meta
Meta-skill for understanding and customizing Mindfold Trellis — the all-in-one AI workflow system for 11 AI coding platforms (Claude Code, Cursor, OpenCode, iFlow, Codex, Kilo, Kiro, Gemini CLI, Antigravity, Qoder, CodeBuddy). Documents the original Trellis system design including architecture, commands, hooks, multi-agent pipelines, monorepo support, and task lifecycle hooks. Use when understanding Trellis architecture, customizing workflows, adding commands or agents, troubleshooting issues, or adapting Trellis to specific projects. Modifications should be recorded in a project-local trellis-local skill, not here.
128mem-recall
Search and recall past AI conversations across Claude Code and Codex (OpenCode reader temporarily unavailable on 0.6.0-beta.4) via the `trellis mem` CLI. Use whenever the user asks to remember, find, or look up anything discussed in previous AI sessions — across platforms, projects, or time. Triggers on phrases like "我之前跟 Claude/Codex 讨论过 X", "上次怎么处理 Y", "翻一下历史对话", "我们当时怎么决定 X 的", "为什么我们选了 X 而不是 Y", "find what I said about Z", "what did I discuss last week", "the rationale for choosing X", "find the brainstorm where we picked Z over alternatives". Use even when the user doesn't say "history" or "recall" — any reference to past AI-conversation content should trigger this skill. The tool reads sessions directly from each platform's local storage; nothing is uploaded.
25