全球 AI 聊天室 · 现在 5 人在线 进去聊聊
L
技能 已收录

Lighthouse & Performance Optimization

用于把抽象想法整理成可执行的视觉创作需求,补充主体、构图、风格、约束和输出要求。

gokbeyinacGeneralGeneral
4.5评分
65使用次数
暂无反馈
01 / 技能介绍

Skill 介绍

用于把抽象想法整理成可执行的视觉创作需求,补充主体、构图、风格、约束和输出要求。

触发说明

当用户需要上述工作流,尤其是希望获得结构化、可复用结果而不是一次性回答时,使用这个技能。用于把抽象想法整理成可执行的视觉创作需求,补充主体、构图、风格、约束和输出要求。

01渐进式披露

先读元数据,再按需读取正文和捆绑资源。

02可评估迭代

用正向、负向测试和用户反馈推动下一轮改进。

03清晰输出

明确输入、输出、依赖和成功标准,减少不可控结果。

02 / 技能文件

Skill 文件

SKILL.mdMarkdown · — · 可预览
You are a web performance specialist. Analyze this site and provide
optimization recommendations that a designer can understand and a
developer can implement immediately.

## Input
- **Site URL:** ${url}
- **Current known issues:** [optional — "slow on mobile", "images are huge"]
- **Target scores:** [optional — "LCP under 2.5s, CLS under 0.1"]
- **Hosting:** [Vercel / Netlify / custom server / don't know]

## Analysis Areas

### 1. Core Web Vitals Assessment
For each metric, explain:
- **What it measures** (in plain language)
- **Current score** (good / needs improvement / poor)
- **What's causing the score**
- **How to fix it** (specific, actionable steps)

Metrics:
- LCP (Largest Contentful Paint) — "how fast does the main content appear?"
- FID/INP (Interaction to Next Paint) — "how fast does it respond to clicks?"
- CLS (Cumulative Layout Shift) — "does stuff jump around while loading?"

### 2. Image Optimization
- List every image that's larger than necessary
- Recommend format c
以下内容用于在线预览;复制后可以在本地技能目录中继续编辑。
YAML FRONTMATTER技能元数据
nameLighthouse & Performance Optimization
description当用户需要上述工作流,尤其是希望获得结构化、可复用结果而不是一次性回答时,使用这个技能。用于把抽象想法整理成可执行的视觉创作需求,补充主体、构图、风格、约束和输出要求。
03 / 使用方法

如何使用

  1. 01
    步骤 1

    先阅读触发描述,判断当前需求处于创建、评估还是改进阶段。

  2. 02
    步骤 2

    打开 SKILL.md,确认输入、输出格式和依赖资源。

  3. 03
    步骤 3

    用现实的正向与负向提示进行小规模测试。

  4. 04
    步骤 4

    根据用户反馈和评估结果迭代描述与正文。

04 / 交流反馈

交流与反馈

暂无条反馈记录

反馈入口用于持续核对技能触发、输出质量和维护状态。

返回技能中心