스킬 ckm-design-system

📦

ckm-design-system

Name: ckm-design-system
Author: nextlevelbuilder

v1.0.0 콘텐츠 리비전 r1 중간 위험 ⚙️ 외부 명령어📁 파일 시스템 접근🌐 네트워크 접근🔑 환경 변수⚡ 스크립트 포함

토큰 기반 디자인 시스템 구축

토큰, 컴포넌트, 프레젠테이션 자산을 별도로 처리하면 디자인 시스템이 일관성을 잃습니다. 이 스킬은 일관된 구현을 위한 토큰 아키텍처, 검증기, 슬라이드 헬퍼를 제공합니다.

지원: Claude Codex Code(CC)

⚠️ 50 나쁨

Maintain this Skill? Claim it ⚠️ 50 나쁨

내 에이전트로 설치

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

에이전트 요청

Review the Skillstore skill "ckm-design-system" from https://skillstore.io/skills/nextlevelbuilder-ckm-design-system.md and its manifest at https://skillstore.io/api/skills/nextlevelbuilder-ckm-design-system/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.

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

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

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

Markdown 상세 GET /skills/nextlevelbuilder-ckm-design-system.md 서명된 manifest GET /api/skills/nextlevelbuilder-ckm-design-system/manifest 서명된 lockfile GET /api/skills/nextlevelbuilder-ckm-design-system/lockfile

테스트해 보기

"ckm-design-system" 사용 중입니다. 대시보드 제품을 위한 토큰 계획을 요청합니다.

예상 결과:

원시 값, semantic alias, 컴포넌트별 토큰을 포괄하는 3계층 토큰 맵.
색상, 타이포그래피, 간격, 그림자, 상호작용 상태에 대한 권장 명명 규칙.

"ckm-design-system" 사용 중입니다. 프론트엔드 폴더의 토큰 준수 검토를 요청합니다.

예상 결과:

하드코딩된 색상, 픽셀 값, rem 값을 나열하는 로컬 감사 요약.
색상, 간격, 반경, 타이포그래피 토큰 패밀리를 사용한 권장 대체 항목.

"ckm-design-system" 사용 중입니다. 브랜드 프레젠테이션 계획을 요청합니다.

예상 결과:

권장 레이아웃, 카피 공식, 차트 유형, 감정적 흐름을 포함한 슬라이드별 구조.
토큰을 준수하는 슬라이드 스타일링과 배경 이미지 선택을 위한 가이드.

보안 감사

중간 위험

v4 • 2026. 7. 5. 버전별 보고서 열기

Most static findings are false positives from Markdown code fences, JavaScript template literals, CSV design vocabulary, dictionary key access, and fixed public resource URLs. Confirmed issues are local filesystem write/read risks in the token generator plus semantic risks in slide generation: unescaped HTML content and unrestricted output paths. No prompt-injection attempt was found in the reviewed skill files.

스캔된 파일

4,805

분석된 줄 수

검토 항목

오탐 무시됨

확인된 보안 우려 사항 (2)

중간

scripts/generate-slide.py:415-420 scripts/generate-slide.py:737-745

Unescaped Slide Content In Generated HTML

Slide fields from input data are inserted directly into HTML templates. Untrusted JSON can inject HTML or scripts into generated decks opened in a browser.

The generator reads slide JSON and interpolates values such as title, subtitle, and CTA text directly into HTML strings. I did not see escaping or sanitization before write_text emits the deck.

중간

scripts/generate-slide.py:743-745

Unrestricted Slide Output Path

The slide generator accepts --output as a path and writes to it without restricting the destination. Prompt-controlled arguments could overwrite writable files outside the intended slide directory.

args.output is converted directly to a Path, its parent directory is created, and HTML is written there. The risk depends on invocation context, so confidence is high but not absolute.

기능 검토 항목 (6)

이 스킬에 대해 예상될 수 있는 실제 로컬 기능이므로 검토가 필요하지만, 확인된 악의적 동작으로는 집계되지 않습니다.

중간

scripts/generate-tokens.cjs:184

Node.js fs operations

const tokens = JSON.parse(fs.readFileSync(configPath, 'utf-8'));

The token generator reads a user-supplied config path with no workspace restriction. This is expected CLI behavior, but it can read arbitrary accessible JSON files when invoked with unsafe arguments.

중간

scripts/generate-tokens.cjs:197

Node.js fs operations

fs.mkdirSync(path.dirname(outputPath), { recursive: true });

The --output argument is resolved directly and its parent directory is created recursively. Without output path restrictions, a prompt-controlled invocation could create directories outside the intended project area.

중간

scripts/generate-tokens.cjs:198

Node.js fs operations

fs.writeFileSync(outputPath, output);

The script writes generated content to a user-supplied output path without restricting it to a known output directory. This can overwrite arbitrary writable files if invoked with unsafe arguments.

중간

scripts/generate-tokens.cjs:178

Node.js fs stat operations

if (!fs.existsSync(configPath)) {

The script resolves the --config value from process.cwd() and checks that path without constraining it to the project. This is user-directed, but it still allows probing arbitrary accessible paths if unsafe arguments are supplied.

중간

scripts/generate-tokens.cjs:184

Synchronous file operations

const tokens = JSON.parse(fs.readFileSync(configPath, 'utf-8'));

The same user-supplied config path is read synchronously and is not limited to a safe directory. The risk is local file exposure through misuse rather than hidden exfiltration.

중간

scripts/generate-tokens.cjs:198

Synchronous file operations

fs.writeFileSync(outputPath, output);

The synchronous write uses the unrestricted --output path. The issue is not command execution, but unintended local file overwrite when arguments are not trusted.

위험 요인

⚙️ 외부 명령어 (76)

📁 파일 시스템 접근 (15)

scripts/embed-tokens.cjs:86 scripts/embed-tokens.cjs:20 scripts/embed-tokens.cjs:86 scripts/generate-slide.py:632 scripts/generate-tokens.cjs:184 scripts/generate-tokens.cjs:197 scripts/generate-tokens.cjs:198 scripts/generate-tokens.cjs:178 scripts/generate-tokens.cjs:184 scripts/generate-tokens.cjs:198 scripts/validate-tokens.cjs:99 scripts/validate-tokens.cjs:130 scripts/validate-tokens.cjs:226 scripts/validate-tokens.cjs:130 scripts/validate-tokens.cjs:231

🌐 네트워크 접근 (28)

🔑 환경 변수 (6)

scripts/fetch-background.py:208 scripts/fetch-background.py:213 scripts/fetch-background.py:214 scripts/slide_search_core.py:430 scripts/slide_search_core.py:431 scripts/slide_search_core.py:432

⚡ 스크립트 포함 (1)

scripts/search-slides.py:10-14

감사자: codex 감사 이력 보기 →

이 보고서 공유 및 인용

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

버전별 보고서 열기

보고서 링크 복사

https://skillstore.io/skills/nextlevelbuilder-ckm-design-system/audits/4?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdown 배지

[![Skillstore security assessment](https://skillstore.io/badges/skills/nextlevelbuilder-ckm-design-system/security.svg)](https://skillstore.io/skills/nextlevelbuilder-ckm-design-system?utm_source=security_passport_badge)

HTML 배지

<a href="https://skillstore.io/skills/nextlevelbuilder-ckm-design-system?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/nextlevelbuilder-ckm-design-system/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

임베드 카드

<iframe src="https://skillstore.io/embed/skills/nextlevelbuilder-ckm-design-system.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 인용

nextlevelbuilder. (2026). ckm-design-system security audit report (audit version 4) [Author version 1.0.0]. Skillstore. https://skillstore.io/skills/nextlevelbuilder-ckm-design-system/audits/4

BibTeX 인용

@techreport{nextlevelbuilder-nextlevelbuilder-ckm-design-system-2026,
  author = {nextlevelbuilder},
  title = {ckm-design-system security audit report (audit version 4)},
  institution = {Skillstore},
  year = {2026},
  number = {4},
  url = {https://skillstore.io/skills/nextlevelbuilder-ckm-design-system/audits/4},
  note = {Author version 1.0.0}
}

CITATION.cff

cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "ckm-design-system security audit report (audit version 4)"
version: "1.0.0"
type: report
authors:
  - name: "nextlevelbuilder"
date-released: "2026-07-05"
url: "https://skillstore.io/skills/nextlevelbuilder-ckm-design-system/audits/4"
identifiers:
  - type: other
    value: "skillstore:nextlevelbuilder-ckm-design-system:audit:4"
    description: "Skillstore immutable audit report identifier"

Skillstore 점수

이 점수의 이유 증거 신뢰도: 높음

아키텍처

100

유지보수성

콘텐츠

커뮤니티

사양 준수

만들 수 있는 것

토큰 아키텍처 만들기

팀이 테마, 상태, 변형을 구현하기 전에 primitive, semantic, component 토큰을 정의합니다.

토큰 준수 여부 감사

디자인 토큰을 사용해야 하는 하드코딩된 값이 있는지 로컬 소스 파일과 HTML 자산을 스캔합니다.

브랜드 프레젠테이션 계획

슬라이드 전략, 레이아웃, 카피, 차트, 배경 참조를 사용해 일관된 프레젠테이션 덱을 계획합니다.

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

토큰 시스템 시작

ckm-design-system을 사용해 SaaS 대시보드용 primitive, semantic, component 토큰을 개요로 정리하세요. 색상, 타이포그래피, 간격, 반경, 상태 토큰을 포함하세요.

기존 UI 검증

ckm-design-system을 사용해 내 src 디렉터리에서 하드코딩된 디자인 값을 검토하세요. 위반 사항을 요약하고 해당하는 토큰 카테고리를 제안하세요.

토큰 출력 생성

ckm-design-system을 사용해 내 토큰 JSON을 CSS 변수와 Tailwind 색상 확장으로 변환하세요. 출력은 프로젝트 assets 디렉터리 안에 유지하세요.

피치 덱 시스템 설계

ckm-design-system을 사용해 전략, 레이아웃, 타이포그래피, 색상 처리, 차트 선택, 토큰 준수 HTML 출력을 포함한 10슬라이드 투자자 덱을 계획하세요.

모범 사례

primitive 값을 semantic alias 및 component 토큰과 분리해 유지하세요.
생성된 출력을 검토하거나 공유하기 전에 신뢰할 수 있는 프로젝트 폴더에서 검증기를 실행하세요.
생성된 슬라이드와 토큰 파일을 예측 가능한 자산 디렉터리에 보관하세요.

피하기

생성에 사용되는 슬라이드 데이터에 신뢰할 수 없는 HTML이나 스크립트를 붙여넣지 마세요.
절대 경로나 상위 디렉터리 탐색을 사용해 파일 쓰기 헬퍼를 실행하지 마세요.
프로덕션 컴포넌트에서 원시 hex 값과 토큰 참조를 섞지 마세요.

자주 묻는 질문

이 스킬로 전체 디자인 시스템을 만들 수 있나요?

토큰 아키텍처, 예제, 검증기, 생성 헬퍼를 제공할 수 있습니다. 그래도 제품별 디자인 결정과 검토는 필요합니다.

Tailwind를 지원하나요?

예. 토큰 생성기는 semantic 토큰 값에서 Tailwind 색상 구성을 생성할 수 있습니다.

내 코드를 자동으로 검증할 수 있나요?

소스 파일과 HTML 자산을 위한 로컬 검증기가 포함되어 있습니다. 변경하기 전에 결과를 검토하세요.

슬라이드 덱을 생성할 수 있나요?

예. 구조화된 슬라이드 데이터와 토큰 기반 템플릿에서 HTML 슬라이드 덱을 생성할 수 있습니다.

네트워크 액세스가 필요한가요?

대부분의 도구는 로컬에서 동작합니다. 생성된 슬라이드나 예제는 Google Fonts, Pexels 이미지 또는 Chart.js CDN 리소스를 참조할 수 있습니다.

신뢰할 수 없는 콘텐츠에 사용해도 안전한가요?

신뢰할 수 없는 슬라이드 데이터는 주의해서 다루세요. 슬라이드 생성기는 텍스트를 HTML에 삽입하므로 공유하기 전에 sanitize해야 합니다.

개발자 세부 정보

작성자

nextlevelbuilder

라이선스

MIT

작성자 버전

v1.0.0

Skillstore 리비전

리포지토리

https://github.com/nextlevelbuilder/ui-ux-pro-max-skill/tree/main/.claude/skills/design-system/

참조

62e2a730c5cd74eab4c7164309d810de660fcea3

유지보수 최신성

2026. 7. 18.

사용량

7 다운로드 · 15 조회

파일 구조

📁 data/

📄 slide-backgrounds.csv

📄 slide-charts.csv

📄 slide-color-logic.csv

📄 slide-copy.csv

📄 slide-layout-logic.csv

📄 slide-layouts.csv

📄 slide-strategies.csv

📄 slide-typography.csv

📁 references/

📄 component-specs.md

📄 component-tokens.md

📄 primitive-tokens.md

📄 semantic-tokens.md

📄 states-and-variants.md

📄 tailwind-integration.md

📄 token-architecture.md

📁 scripts/

📄 embed-tokens.cjs

📄 fetch-background.py

📄 generate-slide.py

📄 generate-tokens.cjs

📄 html-token-validator.py

📄 search-slides.py

📄 slide_search_core.py

📄 slide-token-validator.py

📄 validate-tokens.cjs

📁 templates/

📄 design-tokens-starter.json

📄 SKILL.md