القائمة
d3.js — data-driven document library for binding data to DOM, generating SVG visualizations, and creating interactive charts.
يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.
اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
يتجاوز الأمر المباشر Prompt المخصّص للمراجعة. افحص المصدر قبل تشغيله.
npx skills add https://github.com/skeletorflet/opencode-supreme-setup --skill d3jsيبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.
تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى SkillsMP.
Hyperframes-based video template for retro pixel deck motion design. Use when users want a high-fidelity, multi-scene HTML-to-video composition with advanced transitions, interactive preview controls, and ready-to-render default style.
Generate and iterate ad creative including headlines, descriptions, and primary text. Useful for paid social and search ad iteration.
Browser automation CLI for AI agents. Use when the user needs to inspect, test, or automate browser behavior: navigating pages, filling forms, clicking buttons, taking screenshots, extracting page data, testing web apps, dogfooding Open Design previews, QA, bug hunts, or reviewing app quality. Prefer local Open Design preview URLs unless the user explicitly asks for external browsing.
استنادا إلى تصنيف SOC المهني
عرض SKILL.md
| name | d3js |
| description | d3.js — data-driven document library for binding data to DOM, generating SVG visualizations, and creating interactive charts. |
d3.select(el), d3.selectAll(selector). Chain .attr(), .style(), .classed(), .text(), .html(). Use selection.call(fn) for reusable behavior.
selection.data(data).join('circle') — enter/update/exit pattern. Accessor: d => d.value. Key function for stable updates. selection.datum() for static data.
d3.scaleLinear(), d3.scaleBand() (ordinal), d3.scaleTime(), d3.scaleSequential() (color). Domain → range mapping. .nice() for clean axis ticks. .clamp() to bound output.
d3.axisLeft(scale), d3.axisBottom(scale). .ticks(count), .tickFormat(fn). Append to <g> with transform. Customize tick lines, labels, grid lines.
Path generators: d3.line(), d3.area(), d3.arc() (pie), d3.symbol() (shapes). d3.pie() computes angles. d3.curveMonotoneX for smooth interpolation.
selection.transition().duration(500).ease(d3.easeCubic). Interpolate between values. transition.delay() for staggered. transition.attrTween() for custom.
d3.forceSimulation(nodes). Forces: forceLink, forceManyBody (charge), forceCenter, forceCollide. .on("tick", render). simulation.alpha() for cooling.
d3.geoAlbersUsa(), d3.geoMercator(), d3.geoOrthographic(). .fitSize([w, h], geojson). d3.geoPath(projection) renders GeoJSON to SVG paths.
d3.hierarchy(data), d3.tree(), d3.cluster(), d3.pack() (circle packing), d3.partition() (icicle), d3.treemap(). .descendants(), .links() for data extraction.
Use <g> groups for reusable chart components. Debounce resize handlers. Use Canvas for >1000 elements. Separate concerns (data prep, scale, draw, interact).