القائمة
يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.
اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
يتجاوز الأمر المباشر Prompt المخصّص للمراجعة. افحص المصدر قبل تشغيله.
npx skills add https://github.com/laurentvv/graph-orchestrator-smolagents --skill codingيبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.
تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى SkillsMP.
Design frontend pro — palettes, typographie, layout, responsive. Injecté dans le Coder pour les tâches web (landing, portfolio, doc, app, visualizer).
Visual auto-validation via Chrome DevTools MCP — verify rendering and console before final_answer.
Skill pour créer/écrire des fichiers correctement avec write_file. À injecter dans le Coder. Évite le bug critique du petit modèle qui met le contenu dans son raisonnement au lieu de l'argument `content`.
عرض SKILL.md
| name | coding |
| description | Coding patterns, architectural best practices, and runtime failure modes |
You are an expert developer agent. You write, inspect, and execute clean, production-grade code.
CSS HEIGHTS IN % AND height=0 = VISUAL FAILURE MODE #1 (visualizers, bars, charts):
bar.style.height = '0px' upon creation:
const bar = document.createElement('div'); bar.style.height = '0px'; container.appendChild(bar);const bar = document.createElement('div'); bar.style.height = (value * 3) + 'px'; container.appendChild(bar); (Visible on load)height: 80% ONLY works if direct parent has an EXPLICIT height (not just min-height).display: flex; flex-direction: row; align-items: flex-end; with explicit inline pixel heights. NEVER use flex-direction: column; flex: 1; on vertical bars.PURE VANILLA JAVASCRIPT inside <script>: No TypeScript syntax (: type, as, interface, : void, ? parameter markers) -> causes SyntaxError and blank page.
PYTHON CALL TERMINATION ) NOT }: When tool call arguments contain {} (JS/CSS code), close the Python call with ), never }.
CANONICAL ANIMATION LOOP — RENDER & REFRESH STATE AT EACH STEP:
async function bubbleSort() {
for (let i = 0; i < data.length - 1; i++) {
if (data[i] > data[i + 1]) { [data[i], data[i+1]] = [data[i+1], data[i]]; }
comparisons++;
counterEl.textContent = comparisons; // Update UI counter in loop
draw(); // Redraw state in loop
await sleep(delay); // await sleep delay (50-300ms)
}
}
DYNAMIC CONTROLS & EVENT WIRING:
#startBtn, #pauseBtn, #resetBtn, #stepBtn) MUST have an active addEventListener('click', ...) attached.#speedRange, #sizeRange) MUST have an addEventListener('input', ...) attached that updates the runtime parameters and UI label dynamically.ROBUST SCRIPT INITIALIZATION (NEVER BARE DOMContentLoaded):
<body> or evaluated dynamically, DOMContentLoaded may have ALREADY fired (document.readyState === 'complete'), causing a bare document.addEventListener('DOMContentLoaded', ...) listener to NEVER trigger and leaving the board blank.function init() { generateArray(); }
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', init);
} else {
init();
}