data-visualization-engine
Creates interactive charts, graphs, and visual data representations. Supports D3, Chart.js, and custom canvas rendering.
소스 정보
- 저장소
- Fadil369/Solutions
- 최근 소스 활동
- 2026년 4월 9일 00:36
- 감지된 SKILL.md 언어
- 영어
- 스타
- 1
- 포크
- 0
설치 방법
기본적으로 소스를 먼저 확인하는 Prompt가 선택됩니다. 직접 명령으로 전환하거나 로컬 사본을 다운로드할 수도 있습니다.
소스 파일 검토
설치 여부를 결정하기 전에 SKILL.md와 SkillsMP에 표시된 보조 파일을 읽어 보세요.
SKILL.md 표시 중
SKILL.md
소스 지침 · 읽기 전용 미리보기- name
- Data Visualization Engine
- version
- 1.0.0
- description
- Creates interactive charts, graphs, and visual data representations. Supports D3, Chart.js, and custom canvas rendering.
- author
- workspace
- activated
- false
# Data Visualization Engine
Creates interactive charts, graphs, and visual data representations. Supports D3, Chart.js, and custom canvas rendering.
## Decision Framework
### When to Apply
Use when: Dashboards, reports, analytics views, data exploration interfaces
### When NOT to Apply
Don't use when: Simple data tables, single number displays
## Anti-Patterns
### 1. Misleading Charts
```javascript
// BAD: Truncated Y-axis exaggerates differences
options: { scales: { y: { min: 95, max: 100 } } }
// GOOD: Zero-based Y-axis
options: { scales: { y: { beginAtZero: true } } }
```
### 2. 3D Charts
3D charts distort data perception. Always prefer 2D.
### 3. No Legends
Charts without legends are meaningless when multiple series exist.
## Trigger Phrases
- "Create chart"
- "Data visualization"
- "Graph component"
- "Dashboard charts"
- "Interactive visualization"
## Patterns
### Responsive Chart Component
```javascript
const ChartContainer = ({ type, data, options }) => {
const containerRef = useRef(null);
const chartRef = useRef(null);
useEffect(() => {
if (chartRef.current) chartRef.current.destroy();
chartRef.current = new Chart(containerRef.current, {
type, data,
options: { responsive: true, maintainAspectRatio: false, ...options }
});
return () => chartRef.current?.destroy();
}, [type, data, options]);
return <div style={{ position: 'relative', height: '400px' }}>
<canvas ref={containerRef} />
</div>;
};
```
## Integration
- Works with: dashboard-composition-engine, performance-budget-enforcer
GitHub에서 보기