前端安装

Name: 前端安装
Author: JHamidun

其他社区

作者仓库星标 7
作者更新于实时读取
作者仓库 claude-code-config-pack

流狐档案事实层信息：领域、Agent、信任分、运行环境、权限与网络

领域: 通用
兼容 Agent: Claude Code
Cursor
Cline
Codex
Windsurf
Gemini CLI

+20
信任分: 88 / 100 · 社区维护
作者 / 版本 / 许可: @JHamidun · 未声明 license
Token 消耗评级: 低消耗
接入复杂程度: 即装即用
是否需要外部 API Key: 不需要
兼容的系统: macOS · Linux · Windows
底层运行要求: Node.js
文件与系统权限: 只读
允许写入 / 修改
网络行为: 仅限本地
安装命令数: 26 条

档案由构建时根据 SKILL.md 与安装命令自动衍生，可能与作者实际意图存在差异。

需要注意： 未限定 allowed-tools，默认拥有全部工具权限。

输出预览 d3-visualization.preview

---
name: d3-visualization
description: Create D3.js charts, graphs, and interactive data visualizations Создание интерактивных визуализ…
category: 通用
runtime: Node.js
---

# d3-visualization 输出预览

## PART A: 任务判断
- 适用问题：通用任务拆解、检查和交付。
- 输入要求：目标材料、限制条件、期望输出和验收方式。
- 证据边界：围绕“Overview / When to Use / D3 Basics”读取原文规则，不把推断写成作者承诺。

## PART B: 执行结果
- **01** 任务判断：确认你的需求是否属于通用任务拆解、检查和交付，并标出输入、限制和预期结果。
- **02** 执行计划：优先按“Overview / When to Use / D3 Basics”拆成步骤，说明每一步会读取什么、修改什么、产出什么。
- **03** 交付结果：给出可复制的命令、文件改动、检查清单或内容草稿，并说明如何继续迭代。
- **04** 风险边界：结合 读取文件、写入/修改文件、主要在本地完成、通常不需要额外 API Key 给出执行前确认项。

## Running Rules
- 读取文件、写入/修改文件；主要在本地完成；通常不需要额外 API Key。
- 先小样例验证，再放大到真实任务。
- 交付时同时给结果、检查口径和下一步迭代建议。

SKILL.md SKILL.md

---
name: d3-visualization
description: Create D3.js charts, graphs, and interactive data visualizations Создание интерактивных визуализ…
category: 通用
source: JHamidun/claude-code-config-pack
---

# d3-visualization

## 什么时候使用
- 把通用方向的常用动作沉淀成 Agent 可调用的技能 适合处理通用任务拆解、检查、交付和复盘，核心价值是把输入、判断、执行、验证和交付边界固定下来，避免 Agent 泛泛回答。 把任务拆成可执行、可检查、可继续迭代的步骤；通常不需要额外…
- 面向通用任务拆解、检查和交付，优先处理能明确输入、步骤和验收标准的工作。

## 需要提供什么
- 目标材料、目录范围、期望结果和不可改动内容。
- 是否允许联网、执行命令、读写文件或调用外部服务。

## 执行规则
- 围绕「Overview / When to Use / D3 Basics」组织步骤，不把推断写成作者事实。
- 读取文件、写入/修改文件；主要在本地完成；通常不需要额外 API Key。
- 先跑小样例，确认结果可检查后再扩大任务范围。

## 输出要求
- 给出最终产物、关键证据、验证方式和下一步动作。
- 信息不足时标记 unknown，不编造命令、平台或依赖。

证据边界与执行链路

作者原文负责流程事实；仓库文件负责来源和命令；流狐只补充适用场景、限制和质量判断。

skill "d3-visualization" {
  输入层     -> 用户目标 + 目标文件 + 禁止范围 + 验收标准
  上下文层   -> Overview / When to Use / D3 Basics
  规则层     -> SKILL.md 触发条件 / 执行顺序 / 输出格式
  运行层     -> Node.js | 读取文件、写入/修改文件 | 主要在本地完成
  安全层     -> 通常不需要额外 API Key + 小任务验证 + diff / 日志复核
  输出层     -> 可复制结果 + 检查清单 + 下一步迭代
}

解读按原文结构重写，命令、链接、术语均保留；右侧可核对作者原始 SKILL.md

先判断是否适合

核心用途：把通用方向的常用动作沉淀成 Agent 可调用的技能适合处理通用任务拆解、检查、交付和复盘，核心价值是把输入、判断、执行、验证和交付边界固定下来，避免 Agent 泛泛回答。把任务拆成可执行、可检查、可继续迭代的步骤；通常不需要额外 API Key，适…
适用任务：更适合通用任务拆解、检查、交付和复盘，尤其是输入、步骤、验收口径可以反复复用的场景。
不宜硬套：如果任务只有一次性问答、来源材料很少，或需要作者没有说明的命令和外部服务，应先降级为普通对话。

作者设计意图

触发依据：使用时机、上下文收集、输出格式和失败处理共同决定它是否适合当前任务。
来源边界：作者原文负责事实，仓库文件负责命令和文件证据；Fluxly 只补充用途、限制和使用判断。

作者的方法与取舍

执行主线：任务围绕「Overview / When to Use / D3 Basics」组织，把触发条件、必要上下文、执行规则和交付标准连成一条可复核的链路。
设计重点：重点不在重复教程，而在解释作者为什么规定这些步骤、哪些条件不可省略，以及结果偏离时应回到哪一层检查。
使用判断：先确认任务与原文边界一致，再决定是否启用；来源没有说明的命令、平台和依赖保持未知，不由 Fluxly 补写。

边界和复核

依赖条件：通常不需要额外 API Key，适合先用小任务验证触发是否稳定。
权限提醒：会涉及 read / write 权限，执行前要说明可读写范围、命令边界和回退方式。
质量标准：结果应包含明确产物、必要证据和下一步动作；如果只是泛泛解释，需要补充输入和验收条件后重跑。

D3.js Visualization Skill

Overview

Создание интерактивных визуализаций данных с D3.js: графики, диаграммы, карты.

When to Use

Интерактивные графики
Кастомные визуализации
Data storytelling
Dashboards
Анимированные диаграммы

D3 Basics

Setup

<!-- CDN -->
<script src="https://d3js.org/d3.v7.min.js"></script>

<!-- Or npm -->
<!-- npm install d3 -->

Core Concepts

// Selection
d3.select("#chart")       // Single element
d3.selectAll(".bar")      // Multiple elements

// Data binding
const data = [10, 20, 30, 40, 50];

d3.select("#chart")
  .selectAll("rect")
  .data(data)
  .join("rect")
  .attr("height", d => d)
  .attr("width", 20);

// Scales
const xScale = d3.scaleLinear()
  .domain([0, 100])    // Input range
  .range([0, 500]);    // Output range

const colorScale = d3.scaleOrdinal()
  .domain(["A", "B", "C"])
  .range(["red", "green", "blue"]);

Chart Templates

Bar Chart

function barChart(data, selector) {
  const margin = { top: 20, right: 20, bottom: 30, left: 40 };
  const width = 600 - margin.left - margin.right;
  const height = 400 - margin.top - margin.bottom;

  // Clear previous
  d3.select(selector).html("");

  // SVG container
  const svg = d3.select(selector)
    .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", `translate(${margin.left},${margin.top})`);

  // Scales
  const x = d3.scaleBand()
    .domain(data.map(d => d.label))
    .range([0, width])
    .padding(0.2);

  const y = d3.scaleLinear()
    .domain([0, d3.max(data, d => d.value)])
    .nice()
    .range([height, 0]);

  // Axes
  svg.append("g")
    .attr("transform", `translate(0,${height})`)
    .call(d3.axisBottom(x));

  svg.append("g")
    .call(d3.axisLeft(y));

  // Bars
  svg.selectAll(".bar")
    .data(data)
    .join("rect")
    .attr("class", "bar")
    .attr("x", d => x(d.label))
    .attr("y", d => y(d.value))
    .attr("width", x.bandwidth())
    .attr("height", d => height - y(d.value))
    .attr("fill", "steelblue")
    .on("mouseover", function() {
      d3.select(this).attr("fill", "orange");
    })
    .on("mouseout", function() {
      d3.select(this).attr("fill", "steelblue");
    });
}

// Usage
const data = [
  { label: "A", value: 30 },
  { label: "B", value: 80 },
  { label: "C", value: 45 },
  { label: "D", value: 60 },
  { label: "E", value: 20 }
];

barChart(data, "#chart");

Line Chart

function lineChart(data, selector) {
  const margin = { top: 20, right: 30, bottom: 30, left: 50 };
  const width = 600 - margin.left - margin.right;
  const height = 400 - margin.top - margin.bottom;

  d3.select(selector).html("");

  const svg = d3.select(selector)
    .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", `translate(${margin.left},${margin.top})`);

  // Parse dates if needed
  const parseDate = d3.timeParse("%Y-%m-%d");
  data.forEach(d => {
    d.date = parseDate(d.date);
  });

  // Scales
  const x = d3.scaleTime()
    .domain(d3.extent(data, d => d.date))
    .range([0, width]);

  const y = d3.scaleLinear()
    .domain([0, d3.max(data, d => d.value)])
    .nice()
    .range([height, 0]);

  // Line generator
  const line = d3.line()
    .x(d => x(d.date))
    .y(d => y(d.value))
    .curve(d3.curveMonotoneX);

  // Axes
  svg.append("g")
    .attr("transform", `translate(0,${height})`)
    .call(d3.axisBottom(x).ticks(6));

  svg.append("g")
    .call(d3.axisLeft(y));

  // Line path
  svg.append("path")
    .datum(data)
    .attr("fill", "none")
    .attr("stroke", "steelblue")
    .attr("stroke-width", 2)
    .attr("d", line);

  // Dots
  svg.selectAll(".dot")
    .data(data)
    .join("circle")
    .attr("class", "dot")
    .attr("cx", d => x(d.date))
    .attr("cy", d => y(d.value))
    .attr("r", 4)
    .attr("fill", "steelblue");
}

Pie Chart

function pieChart(data, selector) {
  const width = 400;
  const height = 400;
  const radius = Math.min(width, height) / 2;

  d3.select(selector).html("");

  const svg = d3.select(selector)
    .append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", `translate(${width/2},${height/2})`);

  // Color scale
  const color = d3.scaleOrdinal()
    .domain(data.map(d => d.label))
    .range(d3.schemeCategory10);

  // Pie generator
  const pie = d3.pie()
    .value(d => d.value)
    .sort(null);

  // Arc generator
  const arc = d3.arc()
    .innerRadius(0)
    .outerRadius(radius - 10);

  const arcHover = d3.arc()
    .innerRadius(0)
    .outerRadius(radius);

  // Draw slices
  svg.selectAll("path")
    .data(pie(data))
    .join("path")
    .attr("d", arc)
    .attr("fill", d => color(d.data.label))
    .attr("stroke", "white")
    .attr("stroke-width", 2)
    .on("mouseover", function(event, d) {
      d3.select(this)
        .transition()
        .duration(200)
        .attr("d", arcHover);
    })
    .on("mouseout", function(event, d) {
      d3.select(this)
        .transition()
        .duration(200)
        .attr("d", arc);
    });

  // Labels
  svg.selectAll("text")
    .data(pie(data))
    .join("text")
    .attr("transform", d => `translate(${arc.centroid(d)})`)
    .attr("text-anchor", "middle")
    .text(d => d.data.label)
    .style("font-size", "12px")
    .style("fill", "white");
}

Donut Chart

function donutChart(data, selector) {
  const width = 400;
  const height = 400;
  const radius = Math.min(width, height) / 2;
  const innerRadius = radius * 0.6;  // Donut hole

  // ... same as pie but with:
  const arc = d3.arc()
    .innerRadius(innerRadius)
    .outerRadius(radius - 10);

  // Center text
  svg.append("text")
    .attr("text-anchor", "middle")
    .attr("dy", "0.35em")
    .style("font-size", "24px")
    .text(d3.sum(data, d => d.value));
}

Interactive Features

// Create tooltip div
const tooltip = d3.select("body")
  .append("div")
  .attr("class", "tooltip")
  .style("position", "absolute")
  .style("visibility", "hidden")
  .style("background", "rgba(0,0,0,0.8)")
  .style("color", "white")
  .style("padding", "8px")
  .style("border-radius", "4px");

// Add to elements
svg.selectAll("rect")
  .on("mouseover", function(event, d) {
    tooltip
      .style("visibility", "visible")
      .html(`<strong>${d.label}</strong><br>Value: ${d.value}`);
  })
  .on("mousemove", function(event) {
    tooltip
      .style("top", (event.pageY - 10) + "px")
      .style("left", (event.pageX + 10) + "px");
  })
  .on("mouseout", function() {
    tooltip.style("visibility", "hidden");
  });

Zoom & Pan

const zoom = d3.zoom()
  .scaleExtent([0.5, 5])
  .on("zoom", (event) => {
    svg.attr("transform", event.transform);
  });

d3.select("svg").call(zoom);

Transitions

// Animate bars
svg.selectAll(".bar")
  .data(newData)
  .transition()
  .duration(750)
  .attr("y", d => y(d.value))
  .attr("height", d => height - y(d.value));

// Animate line
path
  .transition()
  .duration(1000)
  .attrTween("stroke-dasharray", function() {
    const length = this.getTotalLength();
    return d3.interpolate(`0,${length}`, `${length},${length}`);
  });

Responsive Charts

function responsiveChart(selector) {
  const container = d3.select(selector);

  function render() {
    const width = container.node().getBoundingClientRect().width;
    const height = width * 0.6;

    container.html("");

    const svg = container
      .append("svg")
      .attr("width", width)
      .attr("height", height);

    // ... draw chart with calculated dimensions
  }

  render();

  // Resize handler
  d3.select(window).on("resize", () => {
    render();
  });
}

Common Scales

// Linear (continuous numbers)
d3.scaleLinear().domain([0, 100]).range([0, 500])

// Time
d3.scaleTime().domain([startDate, endDate]).range([0, width])

// Ordinal (categories)
d3.scaleOrdinal().domain(["A", "B", "C"]).range(["red", "green", "blue"])

// Band (for bar charts)
d3.scaleBand().domain(categories).range([0, width]).padding(0.1)

// Log
d3.scaleLog().domain([1, 1000]).range([0, 500])

// Sqrt
d3.scaleSqrt().domain([0, 100]).range([0, 20])  // For bubble sizes

Color Schemes

// Built-in schemes
d3.schemeCategory10      // 10 colors
d3.schemeTableau10       // Tableau colors
d3.schemePaired          // 12 paired colors
d3.schemeSet3            // 12 pastel colors

// Sequential
d3.interpolateBlues      // Light to dark blue
d3.interpolateViridis    // Purple-yellow
d3.interpolateRdYlGn     // Red-yellow-green

// Usage with scale
const colorScale = d3.scaleSequential()
  .domain([0, 100])
  .interpolator(d3.interpolateViridis);

Data Transformations

// Group data
const grouped = d3.group(data, d => d.category);

// Rollup (aggregate)
const totals = d3.rollup(data,
  v => d3.sum(v, d => d.value),
  d => d.category
);

// Stack (for stacked charts)
const stack = d3.stack()
  .keys(["A", "B", "C"]);

const stackedData = stack(data);

// Bin (histogram)
const bins = d3.bin()
  .domain([0, 100])
  .thresholds(10)
  (data);

Tips

Margins convention - всегда используй margin pattern
Data join - понимай enter/update/exit
Transitions - анимируй изменения
Responsive - используй viewBox или resize handlers
Tooltips - добавляй интерактивность
Accessibility - добавляй ARIA labels
Performance - используй Canvas для больших данных

安装命令

一键复制安装选择包管理器,点击右侧复制,粘贴到终端回车即可

npx skills add JHamidun/claude-code-config-pack/.claude/skills/d3-visualization -y

查看通用安装教程

查看 Skill 原文

兼容工具

Claude Code
Cursor
Cline
Codex
Windsurf
Gemini
OpenCode
Roo Code
AAide
+Augment
GitHub Copilot
OpenClaw
KKiro
Junie
WWarp
Goose
Trae
Kilo Code
OpenHands
Amp
Zencoder
CContinue
AIAider
CodeBuddy
CodeGeeX
Replit Agent

安全审计

88 / 100

社区

未声明 license/许可。
未声明 version。
未限定 allowed-tools，默认拥有全部工具权限。

元信息

来源: github
JHamidun/claude-code-config-pack
English

分类与标签

分类其他