asset-optimization

Optimize and validate media delivery in the TotalCross Astro website. Use when adding or replacing raster images, animation, or video; changing Astro Image, Picture, or getImage usage; investigating asset-size or page-payload budget failures; or reviewing source-versus-generated media provenance.

Ir para a instalação

Repositório: TotalCross/totalcross.github.io
Última atividade na origem: 11 de agosto de 2026 às 01:38
Idioma detectado do SKILL.md: inglês
Estrelas: 0
Forks: 2

Opções de instalação

Por padrão, está selecionado o prompt que primeiro revisa a origem. Você pode mudar para um comando direto ou baixar uma cópia local.

Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.

Um comando direto ignora o prompt de revisão. Verifique a origem antes de executá-lo.

npx skills add https://github.com/TotalCross/totalcross.github.io --skill asset-optimization

O comando permanece em uma só linha. Role horizontalmente para revisá-lo antes de copiar.

Prefere uma cópia local? Baixe os arquivos disponíveis atualmente no SkillsMP.

Revise os arquivos de origem

Leia o SKILL.md e os arquivos complementares exibidos pelo SkillsMP antes de decidir se vai instalar.

Explorador de arquivos

2 arquivos

SKILL.md

Instruções da origem · Visualização somente leitura

Voltar à pesquisa Voltar à instalação

Asset optimization

Measure generated delivery, preserve provenance, and keep optimization changes tied to the page that consumes each asset.

Workflow

Read the active ExecPlan state and inspect the current asset report before editing.

Locate page references with rg; do not scan or rewrite unrelated media.

Preserve historical src/assets/** provenance under REUSE.toml. Run the license-validation skill for new derivatives or moved files.

Prefer Astro Picture for responsive AVIF/WebP photographic content, Image for optimized local images, and getImage for CSS backgrounds. Size responsive candidates from the maximum rendered CSS width multiplied by the target device pixel ratio; provide approximately 2x coverage for important imagery when the source resolution permits it. Never upscale a low-resolution source to create a fake quality improvement: obtain a better source or constrain the rendered CSS width instead. Keep intrinsic sizes, eager-load only the LCP asset, and lazy-load below-fold images.

Replace large animated GIF delivery with WebM plus MP4 fallback and a compact poster. Record deterministic conversion commands; do not add ffmpeg to normal builds.

Complete the coherent slice before final validation. Run npm run assets:test, npm run license:check, npm run workflow:check, npm run check, one fresh npm run build, npm run assets:check, then npm run validate as required by the active milestone.

Budget policy

Treat scripts/assets/budgets.mjs as canonical. Hard limits apply to generated dist/ output and representative fallback-resource proxies. Source masters remain report-only when normal page delivery is transformed. Keep warnings visible; add a reviewed path-specific exception only when measured visual quality justifies one.