js-and-css-optimization

JavaScript data structure and CSS rendering optimization — index maps, combined iterations, Set/Map lookups, immutable sort, loop min/max, property caching, SVG wrapper animation, layout thrashing, content-visibility. Use when optimizing hot loops, data processing, DOM performance, or scroll rendering.

Aller à l'installation

Dépôt: ihj04982/my-cursor-settings
Dernière activité de la source: 25 mars 2026 à 00:21
Langue détectée de SKILL.md: anglais
Étoiles: 0
Forks: 0

Options d'installation

Le prompt qui vérifie d'abord la source est sélectionné par défaut. Vous pouvez passer à une commande directe ou télécharger une copie locale.

Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.

Une commande directe contourne le prompt de vérification. Examinez la source avant de l'exécuter.

npx skills add https://github.com/ihj04982/my-cursor-settings --skill js-and-css-optimization

La commande reste sur une seule ligne. Faites défiler horizontalement pour la vérifier avant de la copier.

Vous préférez une copie locale ? Téléchargez les fichiers actuellement disponibles dans SkillsMP.

Vérifiez les fichiers source

Lisez SKILL.md et les fichiers associés affichés par SkillsMP avant de décider de l'installer.

SKILL.md

Instructions source · Aperçu en lecture seule

Retour à la recherche Retour à l’installation

frontend-skill

Use when the task asks for a visually strong landing page, website, app, prototype, demo, or game UI. This skill enforces restrained composition, image-led hierarchy, cohesive content structure, and tasteful motion while avoiding generic cards, weak branding, and UI clutter.

2026-04-14

playwright-cli

Automate browser interactions, test web pages and work with Playwright tests.

2026-04-14

vitest-testing-skills

Advanced guidelines and best practices for writing tests using Vitest. Apply this skill when generating, reviewing, or refactoring test codes to prevent common pitfalls and ensure high performance.

2026-04-14

Tout voir dans ce dépôt

const admins = users.filter((u) => u.isAdmin);
const testers = users.filter((u) => u.isTester);
const inactive = users.filter((u) => !u.isActive);

const admins: User[] = [], testers: User[] = [], inactive: User[] = [];
for (const user of users) {
  if (user.isAdmin) admins.push(user);
  if (user.isTester) testers.push(user);
  if (!user.isActive) inactive.push(user);
}

const allowedIds = new Set(['a', 'b', 'c']);
items.filter(item => allowedIds.has(item.id))

const sorted = useMemo(() => users.sort((a, b) => a.name.localeCompare(b.name)), [users])

const sorted = useMemo(() => users.toSorted((a, b) => a.name.localeCompare(b.name)), [users])

const sorted = [...projects].sort((a, b) => b.updatedAt - a.updatedAt);
return sorted[0];

let latest = projects[0];
for (let i = 1; i < projects.length; i++) {
  if (projects[i].updatedAt > latest.updatedAt) latest = projects[i];
}
return latest;

function hasChanges(current: string[], original: string[]) {
  if (current.length !== original.length) return true;
  const currentSorted = current.toSorted();
  const originalSorted = original.toSorted();
  return currentSorted.some((v, i) => v !== originalSorted[i]);
}

for (let i = 0; i < arr.length; i++) { process(obj.config.settings.value); }

const value = obj.config.settings.value;
const len = arr.length;
for (let i = 0; i < len; i++) { process(value); }

<svg className="animate-spin" width="24" height="24" viewBox="0 0 24 24">
  <circle cx="12" cy="12" r="10" stroke="currentColor" />
</svg>

<div className="animate-spin">
  <svg width="24" height="24" viewBox="0 0 24 24">
    <circle cx="12" cy="12" r="10" stroke="currentColor" />
  </svg>
</div>

element.style.width = '100px';
const width = element.offsetWidth; // forces reflow
element.style.height = '200px';
const height = element.offsetHeight; // forces another reflow

element.style.width = '100px';
element.style.height = '200px';
const { width, height } = element.getBoundingClientRect();

.message-item {
  content-visibility: auto;
  contain-intrinsic-size: 0 80px;
}

js-and-css-optimization

Options d'installation

Vérifiez les fichiers source

JS & CSS Optimization

JavaScript Data Optimization

1. Build Index Maps for Repeated Lookups

JS & CSS Optimization

JavaScript Data Optimization

1. Build Index Maps for Repeated Lookups

2. Combine Multiple Array Iterations

3. Use Set/Map for O(1) Lookups

4. Use toSorted() Instead of sort() for Immutability

5. Use Loop for Min/Max Instead of Sort

6. Early Length Check for Array Comparisons

7. Cache Property Access in Loops

CSS Rendering Optimization

8. Animate SVG Wrapper Instead of SVG Element

9. Avoid Layout Thrashing

10. CSS content-visibility for Long Lists

Checklist

name	js-and-css-optimization
description	JavaScript data structure and CSS rendering optimization — index maps, combined iterations, Set/Map lookups, immutable sort, loop min/max, property caching, SVG wrapper animation, layout thrashing, content-visibility. Use when optimizing hot loops, data processing, DOM performance, or scroll rendering.

js-and-css-optimization

Informations de source

Options d'installation

Vérifiez les fichiers source

Plus depuis ce dépôt

Plus depuis ce dépôt

JS & CSS Optimization

JavaScript Data Optimization

1. Build Index Maps for Repeated Lookups

JS & CSS Optimization

JavaScript Data Optimization

1. Build Index Maps for Repeated Lookups

2. Combine Multiple Array Iterations

3. Use Set/Map for O(1) Lookups

4. Use toSorted() Instead of sort() for Immutability

5. Use Loop for Min/Max Instead of Sort

6. Early Length Check for Array Comparisons

7. Cache Property Access in Loops

CSS Rendering Optimization

8. Animate SVG Wrapper Instead of SVG Element

9. Avoid Layout Thrashing

10. CSS content-visibility for Long Lists

Checklist