스킬 delon-chart
📦

delon-chart

콘텐츠 리비전 r1 안전 ⚙️ 외부 명령어🌐 네트워크 접근

@delon 차트 대시보드 구축

Angular 팀에는 ng-alain 대시보드 패턴과 일치하는 일관된 차트가 필요합니다. 이 skill은 일반적인 엔터프라이즈 시각화를 위한 @delon/chart 예제와 지침을 제공합니다.

지원: Claude Codex Code(CC)
Maintain this Skill? Claim it 🥉 79 브론즈

내 에이전트로 설치

이 요청을 에이전트에 복사하세요. 공식 Skill 페이지와 매니페스트가 포함되어 있습니다.

에이전트 요청
Review the Skillstore skill "delon-chart" from https://skillstore.io/skills/7spade-delon-chart.md and its manifest at https://skillstore.io/api/skills/7spade-delon-chart/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.

에이전트는 계속해서 계획을 표시하고 보안 정책에서 요구하는 확인을 요청해야 합니다.

에이전트가 읽기 쉬운 리소스

AI 에이전트, 크롤러, 스크립트가 전체 페이지 대신 정리된 컨텍스트만 필요할 때 이 링크를 사용하세요.

Markdown 상세 GET /skills/7spade-delon-chart.md 서명된 manifest GET /api/skills/7spade-delon-chart/manifest 서명된 lockfile GET /api/skills/7spade-delon-chart/lockfile

테스트해 보기

"delon-chart" 사용 중입니다. @delon/chart로 작업 상태 대시보드를 만드세요.

예상 결과:

  • 요약 chart cards, 작업 상태 막대 차트, 작업 유형 donut chart가 포함된 대시보드 레이아웃.
  • computed signals로 차트 데이터를 계산하고 차트 높이를 고정으로 유지하기 위한 지침.

"delon-chart" 사용 중입니다. Angular signals에 대한 내 차트 데이터 패턴을 검토하세요.

예상 결과:

  • 템플릿 대신 computed values에서 서비스 데이터를 변환하라는 권장 사항.
  • 차트 컴포넌트를 렌더링하기 전 loading 및 empty states에 대한 참고 사항.

"delon-chart" 사용 중입니다. 건설 진행률 보고에 사용할 차트를 선택하세요.

예상 결과:

  • 날짜별 진행률을 위한 timeline chart, 계획 대비 실제 작업을 위한 radar chart, 주간 변동을 위한 trend indicators.
  • imports, data shape, responsive heights, large dataset limits에 대한 짧은 구현 체크리스트.

보안 감사

안전
v6 • 2026. 7. 6. 버전별 보고서 열기

All external-command detections are false positives caused by Markdown fences, TypeScript template literals, or inline option formatting in SKILL.md. The two URL findings are documentation links only; no prompt injection, exfiltration intent, or executable command guidance was found.

1
스캔된 파일
395
분석된 줄 수
0
검토 항목
0
오탐 무시됨

위험 요인

⚙️ 외부 명령어 (45)
SKILL.md:21-37 SKILL.md:37-47 SKILL.md:47-53 SKILL.md:59-68 SKILL.md:68-71 SKILL.md:71-72 SKILL.md:72-73 SKILL.md:73-74 SKILL.md:74-78 SKILL.md:78-90 SKILL.md:90-94 SKILL.md:94-111 SKILL.md:111-114 SKILL.md:114-115 SKILL.md:115-116 SKILL.md:116-117 SKILL.md:117-121 SKILL.md:121-136 SKILL.md:136-140 SKILL.md:140-154 SKILL.md:154-158 SKILL.md:158-170 SKILL.md:170-172 SKILL.md:172 SKILL.md:173 SKILL.md:179-196 SKILL.md:232-280 SKILL.md:280-287 SKILL.md:287-291 SKILL.md:291-294 SKILL.md:294-301 SKILL.md:301-306 SKILL.md:306-308 SKILL.md:313-315 SKILL.md:315-320 SKILL.md:320-328 SKILL.md:328-352 SKILL.md:352-354 SKILL.md:354-357 SKILL.md:357-359 SKILL.md:359-364 SKILL.md:364-366 SKILL.md:366-369 SKILL.md:369-375 SKILL.md:375-382
🌐 네트워크 접근 (2)
SKILL.md:387 SKILL.md:388
가장 최근에 완료된 정적·의미론적 감사에서 확인된 보안 발견 사항이 감지되지 않았습니다. 이는 스킬에 부작용이 없음을 증명하지 않습니다.
감사자: codex 감사 이력 보기 →
이 보고서 공유 및 인용

버전이 지정된 평가 보고서, 중립 배지, 임베드 카드 및 인용을 공유하세요. Skillstore는 근거를 보고하지만 이 Skill의 안전 여부를 판단하지 않습니다.

버전별 보고서 열기
보안 평가

보고서 링크 복사

https://skillstore.io/skills/7spade-delon-chart/audits/6?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdown 배지

[![Skillstore security assessment](https://skillstore.io/badges/skills/7spade-delon-chart/security.svg)](https://skillstore.io/skills/7spade-delon-chart?utm_source=security_passport_badge)

HTML 배지

<a href="https://skillstore.io/skills/7spade-delon-chart?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/7spade-delon-chart/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

임베드 카드

<iframe src="https://skillstore.io/embed/skills/7spade-delon-chart.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>
학술 인용 (APA · BibTeX · CFF)

APA 인용

7Spade. (2026). delon-chart security audit report (audit version 6) [Author version unspecified]. Skillstore. https://skillstore.io/skills/7spade-delon-chart/audits/6

BibTeX 인용

@techreport{7spade-7spade-delon-chart-2026, author = {7Spade}, title = {delon-chart security audit report (audit version 6)}, institution = {Skillstore}, year = {2026}, number = {6}, url = {https://skillstore.io/skills/7spade-delon-chart/audits/6}, note = {Author version unspecified} }

CITATION.cff

cff-version: 1.2.0 message: "If you use this Skill, cite its author and this versioned security audit report." title: "delon-chart security audit report (audit version 6)" version: "unspecified" type: report authors: - name: "7Spade" date-released: "2026-07-06" url: "https://skillstore.io/skills/7spade-delon-chart/audits/6" identifiers: - type: other value: "skillstore:7spade-delon-chart:audit:6" description: "Skillstore immutable audit report identifier"

Skillstore 점수

이 점수의 이유 증거 신뢰도: 높음
55
아키텍처
85
유지보수성
87
콘텐츠
70
커뮤니티
91
사양 준수

만들 수 있는 것

작업 상태 차트 만들기

작업 상태, 작업 유형, 전체 작업 수를 요약하는 막대 차트와 원형 차트를 구축합니다.

임원용 대시보드 설계

간결한 대시보드 요약을 위해 chart cards, trend indicators, G2Plot charts를 결합합니다.

차트 구현 패턴 검토

차트 데이터가 signals, computed values, loading states, responsive heights를 사용하는지 확인합니다.

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

막대 차트 시작하기 
Angular standalone component에서 작업 상태를 위한 간단한 @delon/chart bar chart를 만드세요. 데이터 소스에는 signals를 사용하세요.
대시보드 카드 추가 
프로젝트 작업 추적을 위해 chart-card, trend, g2-bar, g2-pie 컴포넌트를 사용한 ng-alain 대시보드 섹션을 설계하세요.
기존 차트 개선 
내 Angular 차트 구현을 검토하고 computed signals, loading states, responsive chart heights를 사용하는 변경 사항을 제안하세요.
고급 시각화 계획 
@delon/chart와 ng-alain 패턴을 사용하여 timeline, radar, bar, donut charts가 포함된 건설 진행률 대시보드를 계획하세요.

모범 사례

  • computed signals를 사용하여 애플리케이션 상태에서 차트 데이터를 도출하세요.
  • 대시보드를 렌더링하기 전에 안정적인 차트 높이와 반응형 중단점을 설정하세요.
  • 차트 데이터를 사용할 수 없을 때 loading 및 empty states를 표시하세요.

피하기

  • Angular signals를 사용할 때 차트 데이터 배열을 직접 변경하지 마세요.
  • 무거운 필터링 및 매핑 로직을 Angular 템플릿 안에 두지 마세요.
  • 데이터 포인트를 제한하거나 집계하지 않고 대규모 차트 데이터셋을 렌더링하지 마세요.

자주 묻는 질문

이 skill은 무엇을 구축하는 데 도움이 되나요?
@delon/chart, G2Plot wrappers, ng-alain 레이아웃 패턴으로 Angular 대시보드 차트를 구축하는 데 도움이 됩니다.
이 skill은 명령을 실행하나요?
아니요. 차트 컴포넌트에 대한 문서와 예제를 제공합니다.
어떤 차트 컴포넌트를 다루나요?
chart-card, g2-bar, g2-mini-bar, g2-pie, g2-radar, timeline, trend를 다룹니다.
Angular standalone components를 지원하나요?
예. 예제는 standalone component imports와 signal 기반 데이터 패턴을 보여줍니다.
ng-alain 외부에서도 사용할 수 있나요?
예제는 ng-alain과 @delon/chart용으로 설계되었습니다. 다른 Angular 앱에서는 조정이 필요할 수 있습니다.
실시간 데이터 통합이 포함되어 있나요?
서비스 기반 signals를 위한 패턴을 보여주지만, 자체 데이터 소스를 직접 연결해야 합니다.

개발자 세부 정보

작성자

7Spade

라이선스

MIT

Skillstore 리비전

r1

버전 안내

작성자가 버전을 선언하지 않았습니다.

리포지토리

https://github.com/7Spade/ng-dragon/tree/main/.github/skills/delon-chart

참조

c1fdca50ff516318f65fed0d7f9e82797c5171dc

유지보수 최신성

2026. 7. 22.

사용량

11 다운로드 · 224 조회

파일 구조

📄 SKILL.md

7Spade의 다른 스킬

전체 보기

관련 스킬

전체 보기