스킬 modern-javascript-patterns

📦

modern-javascript-patterns

Name: modern-javascript-patterns
Author: sickn33

안전

Modern JavaScript Patterns

또한 다음에서 사용할 수 있습니다: wshobson

Write cleaner, more maintainable JavaScript using ES6+ features like async/await, destructuring, spread operators, and functional programming patterns.

지원: Claude Codex Code(CC)

📊 71 적절함

스킬 ZIP 다운로드

Claude에서 업로드

설정 → 기능 → 스킬 → 스킬 업로드로 이동

토글을 켜고 사용 시작

테스트해 보기

"modern-javascript-patterns" 사용 중입니다. Convert this callback to async/await: function getData(id, callback) { fetch('/api/' + id) .then(res => res.json()) .then(data => callback(null, data)) .catch(err => callback(err)); }

예상 결과:

Refactored async/await version:

async function getData(id) {
try {
const res = await fetch(`/api/${id}`);
const data = await res.json();
return data;
} catch (err) {
throw err;
}
}

Benefits:
- Cleaner, synchronous-looking code
- Better error handling with try/catch
- Easier to debug and maintain

"modern-javascript-patterns" 사용 중입니다. Apply destructuring to this code: const user = { name: 'John', age: 30, address: { city: 'NYC' } }; const name = user.name; const city = user.address.city;

예상 결과:

Refactored with destructuring:

const user = { name: 'John', age: 30, address: { city: 'NYC' } };
const { name, address: { city } } = user;

Or with renaming:
const { name: userName, address: { city: userCity } } = user;

보안 감사

안전

v1 • 2/25/2026

All 89 static findings are FALSE POSITIVES. The scanner misinterprets JavaScript code examples in markdown documentation as security risks. Backticks in code blocks are not shell commands. References to fetch() and dynamic import() are legitimate ES6+ patterns being taught. This is a safe educational skill about modern JavaScript patterns.

스캔된 파일

949

분석된 줄 수

발견 사항

총 감사 수

높은 위험 문제 (1)

resources/implementation-playbook.md:78 resources/implementation-playbook.md:80 resources/implementation-playbook.md:92 resources/implementation-playbook.md:101 resources/implementation-playbook.md:114 resources/implementation-playbook.md:118 resources/implementation-playbook.md:880

Weak Cryptographic Algorithm Detection (FALSE POSITIVE)

Scanner detected 'weak cryptographic algorithm' at lines 78, 80, 92, 101, 114, 118, 880. This is a FALSE POSITIVE - the scanner misinterprets JavaScript code examples (destructuring, toLowerCase(), spread operators) as cryptographic code. This is educational documentation about JavaScript syntax patterns.

중간 위험 문제 (2)

resources/implementation-playbook.md:25-48 SKILL.md:33 SKILL.md:37

External Command Detection (FALSE POSITIVE)

Scanner detected 'Ruby/shell backtick execution' at 61 locations. This is a FALSE POSITIVE - the scanner detects backticks (`) in markdown code blocks. These are JavaScript code examples in markdown documentation, NOT shell commands.

resources/implementation-playbook.md:727 resources/implementation-playbook.md:728 resources/implementation-playbook.md:732

Dynamic Import Detection (FALSE POSITIVE)

Scanner detected 'Dynamic import() expression' at lines 727, 728, 732. This is a FALSE POSITIVE - dynamic import() is a legitimate ES6+ JavaScript feature for lazy-loading modules. This is a core pattern being taught by this skill.

낮은 위험 문제 (2)

resources/implementation-playbook.md:337 resources/implementation-playbook.md:387 resources/implementation-playbook.md:393 resources/implementation-playbook.md:906-910

Network Access Detection (FALSE POSITIVE)

Scanner detected 'Fetch API call' and 'Hardcoded URL' at lines 337, 387, 393, 789, 906-910. This is a FALSE POSITIVE - these are code examples showing how to use the Fetch API and links to legitimate educational resources (MDN, JavaScript.info, You Don't Know JS).

resources/implementation-playbook.md:272 resources/implementation-playbook.md:275 resources/implementation-playbook.md:380

System Reconnaissance Detection (FALSE POSITIVE)

Scanner detected 'system reconnaissance' at 6 locations. This is a FALSE POSITIVE - the scanner misinterprets references to async iteration and system-related programming patterns as reconnaissance.

감사자: claude

품질 점수

아키텍처

100

유지보수성

콘텐츠

커뮤니티

보안

사양 준수

만들 수 있는 것

Legacy Code Modernization

Refactor older callback-based JavaScript code to use Promises and async/await for better readability and error handling.

Learning Modern JavaScript

Understand and apply ES6+ features like destructuring, spread operators, and modules to write more expressive code.

Code Review Improvements

Apply modern JavaScript patterns during code reviews to suggest cleaner, more maintainable implementations.

이 프롬프트를 사용해 보세요

Convert Callback to Async/Await

Convert this callback-based JavaScript function to use async/await syntax. Show the before and after code.

[Insert callback code here]

Apply Destructuring

Refactor this JavaScript code to use object and array destructuring. Make the code more concise and readable.

[Insert code with nested properties or arrays here]

Implement Functional Pipeline

Transform this imperative JavaScript code to use functional programming with map, filter, and reduce. Show a chainable pipeline approach.

[Insert loop-based transformation code here]

Lazy Load Module

Show me how to implement lazy loading with dynamic import() for this feature module. Include error handling and conditional loading logic.

모범 사례

Use const by default, let only when reassignment is needed
Prefer arrow functions for callbacks to avoid this binding issues
Use async/await over Promise chains for better readability

피하기

Using var instead of const/let - lacks block scoping
Callback hell with nested anonymous functions
Mutating objects directly instead of using immutable patterns

자주 묻는 질문

What is the difference between let and const?

Use const by default for values that will not be reassigned. Use let only when you need to reassign a variable. Avoid var in modern JavaScript.

When should I use async/await over Promises?

Use async/await for cleaner, more readable asynchronous code. It works well for sequential async operations. Use Promise.all for parallel operations.

What is destructuring in JavaScript?

Destructuring allows you to extract values from arrays or properties from objects into distinct variables using a concise syntax.

What are the benefits of arrow functions?

Arrow functions have shorter syntax, lexical this binding (inherits this from surrounding scope), and cannot be used as constructors.

What is the spread operator used for?

The spread operator (...) expands iterables (arrays, strings) into individual elements. It is used for array concatenation, object cloning, and function arguments.

How do dynamic imports help performance?

Dynamic import() loads modules on-demand, enabling code splitting. This reduces initial bundle size and improves page load time.

개발자 세부 정보

작성자

sickn33

라이선스

MIT

리포지토리

https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/modern-javascript-patterns

참조

main

파일 구조

📁 resources/

📄 implementation-playbook.md

📄 SKILL.md