📦
prompt-engineering-patterns
86프로덕션 LLM 프롬프트 최적화
LLM 프롬프트는 지침, 예시, 평가 기준이 명확하지 않아 실패하는 경우가 많습니다. 이 스킬은 Claude, Codex, Claude Code 및 유사 도구에서 프롬프트를 개선하기 위한 템플릿과 워크플로를 제공합니다.
생산성 보기
스킬 design-system-patterns
📦
design-system-patterns
콘텐츠 리비전 r1 안전 ⚙️ 외부 명령어🌐 네트워크 접근
확장 가능한 디자인 시스템 구축
디자인 시스템은 토큰, 테마, 컴포넌트가 서로 별도로 커질 때 일관성을 잃는 경우가 많습니다. 이 스킬은 토큰 계층, 테마 전환, 컴포넌트 API, 거버넌스를 위한 패턴을 제공합니다.
지원: Claude Codex Code(CC)
내 에이전트로 설치
이 요청을 에이전트에 복사하세요. 공식 Skill 페이지와 매니페스트가 포함되어 있습니다.
에이전트 요청
Review the Skillstore skill "design-system-patterns" from https://skillstore.io/skills/wshobson-design-system-patterns.md and its manifest at https://skillstore.io/api/skills/wshobson-design-system-patterns/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.에이전트는 계속해서 계획을 표시하고 보안 정책에서 요구하는 확인을 요청해야 합니다.
에이전트가 읽기 쉬운 리소스
AI 에이전트, 크롤러, 스크립트가 전체 페이지 대신 정리된 컨텍스트만 필요할 때 이 링크를 사용하세요.
테스트해 보기
"design-system-patterns" 사용 중입니다. SaaS 대시보드용 디자인 토큰을 계획하세요.
예상 결과:
- primitive, semantic, component 토큰을 포함한 계층형 토큰 모델.
- 텍스트, 표면, 테두리, 간격, 상호작용 토큰을 위한 명명 규칙.
- 토큰 변경 버전 관리 및 사용법 문서화를 위한 지침.
"design-system-patterns" 사용 중입니다. 다크 모드 구현을 검토하세요.
예상 결과:
- CSS custom properties를 기반으로 한 테마 계약.
- 시스템 환경설정 감지 및 저장된 사용자 환경설정에 대한 권장 사항.
- 대비, reduced motion, forced color 지원에 대한 점검.
"design-system-patterns" 사용 중입니다. 재사용 가능한 컴포넌트 라이브러리 접근 방식을 설계하세요.
예상 결과:
- variants, sizes, slots, composition을 위한 컴포넌트 API 권장 사항.
- 키보드 동작 및 ARIA 속성에 대한 접근성 기대사항.
- 사용자와 마이그레이션 계획을 위한 문서화 주제.
보안 감사
안전v4 • 2026. 7. 7. 버전별 보고서 열기
All static findings are false positives. The content is documentation examples and public links. No prompt injection, command execution, exfiltration, or malicious intent was found.
4
스캔된 파일
1,899
분석된 줄 수
0
검토 항목
0
오탐 무시됨
위험 요인
⚙️ 외부 명령어 (18)
references/component-architecture.md:102-145 references/design-tokens.md:320-330 references/design-tokens.md:330-333 references/design-tokens.md:333-336 references/theming-architecture.md:191-278 references/theming-architecture.md:296-303 references/theming-architecture.md:305-312 references/theming-architecture.md:314-322 references/theming-architecture.md:449-468 SKILL.md:57-92 SKILL.md:92-98 SKILL.md:98-137 SKILL.md:137-141 SKILL.md:141-201 SKILL.md:201-205 SKILL.md:205-254 SKILL.md:254-258 SKILL.md:258-310
🌐 네트워크 접근 (5)
가장 최근에 완료된 정적·의미론적 감사에서 확인된 보안 발견 사항이 감지되지 않았습니다. 이는 스킬에 부작용이 없음을 증명하지 않습니다.
감사자: codex 감사 이력 보기 →
이 보고서 공유 및 인용
버전이 지정된 평가 보고서, 중립 배지, 임베드 카드 및 인용을 공유하세요. Skillstore는 근거를 보고하지만 이 Skill의 안전 여부를 판단하지 않습니다.
보고서 링크 복사
https://skillstore.io/skills/wshobson-design-system-patterns/audits/4?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdown 배지
[](https://skillstore.io/skills/wshobson-design-system-patterns?utm_source=security_passport_badge)HTML 배지
<a href="https://skillstore.io/skills/wshobson-design-system-patterns?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/wshobson-design-system-patterns/security.svg" alt="Skillstore security assessment" loading="lazy"></a>임베드 카드
<iframe src="https://skillstore.io/embed/skills/wshobson-design-system-patterns.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 인용
wshobson. (2026). design-system-patterns security audit report (audit version 4) [Author version unspecified]. Skillstore. https://skillstore.io/skills/wshobson-design-system-patterns/audits/4BibTeX 인용
@techreport{wshobson-wshobson-design-system-patterns-2026,
author = {wshobson},
title = {design-system-patterns security audit report (audit version 4)},
institution = {Skillstore},
year = {2026},
number = {4},
url = {https://skillstore.io/skills/wshobson-design-system-patterns/audits/4},
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: "design-system-patterns security audit report (audit version 4)"
version: "unspecified"
type: report
authors:
- name: "wshobson"
date-released: "2026-07-07"
url: "https://skillstore.io/skills/wshobson-design-system-patterns/audits/4"
identifiers:
- type: other
value: "skillstore:wshobson-design-system-patterns:audit:4"
description: "Skillstore immutable audit report identifier"
Skillstore 점수
이 점수의 이유 증거 신뢰도: 높음 45
아키텍처
85
유지보수성
87
콘텐츠
71
커뮤니티
83
사양 준수
만들 수 있는 것
토큰 기반 만들기
공유 UI 라이브러리를 구축하기 전에 토큰 카테고리, 명명 규칙, 플랫폼 출력을 정의합니다.
테마 전환 계획
안정적인 CSS custom property 계약으로 라이트, 다크, 고대비, 시스템 테마를 구현합니다.
컴포넌트 API 표준화
compound components, variant systems, 접근성 패턴을 사용해 재사용 가능한 컴포넌트를 예측 가능하게 만듭니다.
이 프롬프트를 사용해 보세요
초급 토큰 계획
Use this skill to design a basic token hierarchy for colors, typography, spacing, and radii in a new web app.
테마 아키텍처 검토
Use this skill to review my current CSS variables and propose a light and dark theme architecture with semantic tokens.
컴포넌트 라이브러리 API 설계
Use this skill to design component API patterns for buttons, accordions, badges, and form controls with variants and accessibility states.
고급 멀티 플랫폼 시스템
Use this skill to define a multi-brand token pipeline with Style Dictionary outputs, governance rules, and migration guidance.
모범 사례
- 의도를 표현할 때는 semantic 토큰 이름을 사용하고, 원시 값은 primitive 토큰에 유지하세요.
- 실제 컴포넌트, 접근성 상태, 플랫폼 출력에 대해 모든 테마를 테스트하세요.
- 토큰 및 컴포넌트 변경을 마이그레이션 노트가 포함된 버전 관리 API 변경으로 다루세요.
피하기
- 토큰이 결정을 표현해야 하는 경우 컴포넌트 내부에 색상과 간격을 하드코딩하지 마세요.
- CSS variables로 테마 계약을 전달할 수 있는 경우 테마별 컴포넌트 분기를 만들지 마세요.
- 사용법, 접근성 동작, 디자인 소유권을 문서화하지 않고 variants를 추가하지 마세요.
자주 묻는 질문
이 스킬은 완전한 디자인 시스템을 생성하나요?
아니요. 제품과 스택에 맞게 조정할 수 있는 패턴, 예제, 계획 지침을 제공합니다.
다크 모드에 도움이 될 수 있나요?
예. CSS custom properties, React theme providers, 시스템 환경설정 감지, 지속적인 테마 선택을 다룹니다.
모바일 디자인 토큰을 지원하나요?
예. CSS, iOS, Android를 위한 멀티 플랫폼 토큰 출력 개념을 설명합니다.
Figma 통합은 자동인가요?
아니요. Figma-to-code 워크플로와 토큰 파이프라인 구조를 다루지만 Figma에 연결하지는 않습니다.
누가 이 스킬을 사용해야 하나요?
디자인 시스템 엔지니어, 프론트엔드 개발자, UI 플랫폼 팀이 공유 UI 기반을 구조화하는 데 사용할 수 있습니다.
보안에 민감한 동작이 포함되어 있나요?
확인된 민감한 동작은 발견되지 않았습니다. 검토된 위험 지표는 문서 예제와 공개 리소스 링크였습니다.
개발자 세부 정보
작성자
wshobson라이선스
MIT
Skillstore 리비전
r1
버전 안내
작성자가 버전을 선언하지 않았습니다.
참조
36e07d5e13068e5be64447e8f20b427cf2cbd21a
유지보수 최신성
2026. 7. 18.
사용량
9 다운로드 · 290 조회
wshobson의 다른 스킬
전체 보기📦
context-driven-development
81컨텍스트 기반 개발 관리
제품 목표, 스택 선택, 워크플로 규칙이 흩어져 있으면 AI 지원 프로젝트의 일관성이 떨어집니다. 이 스킬은 Conductor 컨텍스트 아티팩트를 통해 Claude, Codex, Claude Code를 안내합니다.
코딩 및 개발 보기
📦
startup-financial-modeling
80스타트업 재무 모델 구축
스타트업 팀은 채용, 자금 조달, 현금 사용을 계획하기 전에 명확한 예측이 필요합니다. 이 스킬은 매출, 비용, 런웨이, 시나리오를 실용적인 재무 계획 산출물로 구조화합니다.
데이터 및 분석 보기
📦
kpi-dashboard-design
79의사결정을 이끄는 KPI 대시보드 설계
팀은 종종 많은 숫자를 보여주지만 행동을 안내하지는 못하는 대시보드를 만듭니다. 이 스킬은 Claude, Codex, Claude Code가 의미 있는 KPI를 선택하고, 뷰를 구조화하며, 지표를 명확하게 제시하도록 돕습니다.
디자인 및 크리에이티브 보기
📦
postmortem-writing
79비난 없는 인시던트 사후 분석 작성
인시던트 리뷰는 종종 일관성이 없거나, 비난에 초점이 맞춰지거나, 실행으로 옮기기 어렵게 됩니다. 이 스킬은 Claude, Codex, Claude Code가 명확한 타임라인, 근본 원인, 담당자를 포함한 구조화된 사후 분석을 작성하도록 돕습니다.
글쓰기 및 콘텐츠 보기
📦
data-storytelling
79명확한 데이터 스토리 만들기
원시 지표만으로는 이해관계자를 설득하거나 의사결정을 뒷받침하기 어려운 경우가 많습니다. 이 스킬은 Claude, Codex, Claude Code가 분석을 명확한 내러티브, 시각 자료, 추천 사항으로 구성하도록 돕습니다.
데이터 및 분석 보기
관련 스킬
전체 보기📦
design-system
82Build Consistent Design Systems and Slides
작성자 nextlevelbuilder
Inconsistent tokens and components make design handoffs difficult. This skill structures tokens, validates usage, and generates brand-aligned presentation assets.
디자인 및 크리에이티브 보기
📦
ux-designer
80리서치 기반 디자인 가이드로 UX 개선
작성자 shubhamsaboo
팀은 종종 가정에 기반해 플로우를 설계하다가 접근성 문제를 놓칩니다. 이 스킬은 UX 모범 사례를 활용해 리서치, 구조, 인터랙션 디자인, 리뷰를 안내합니다.
디자인 및 크리에이티브 보기
📦
design-lint
80Check designs with deterministic CSS rules
작성자 cubha
Design reviews can vary between reviewers and slow down delivery. This skill applies repeatable checks to HTML and CSS so teams can catch token, layout, and accessibility issues before release.
디자인 및 크리에이티브 보기
📦
ui-ux-designer
79접근성 높은 제품 인터페이스 설계
작성자 sickn33
팀은 사용자 요구를 일관되고 접근성 높은 인터페이스로 전환하는 데 어려움을 겪는 경우가 많습니다. 이 스킬은 리서치, 플로우, 디자인 시스템, 토큰, 핸드오프를 안내합니다.
디자인 및 크리에이티브 보기
📦
extract
79재사용 가능한 디자인 시스템 패턴 추출
작성자 pbakaus
팀은 애플리케이션 전반에서 UI 컴포넌트, 토큰, 레이아웃 패턴을 중복해서 만드는 경우가 많습니다. 이 스킬은 Claude, Codex 또는 Claude Code가 재사용 가능한 패턴을 찾아 유지 관리되는 디자인 시스템으로 통합하도록 돕습니다.
디자인 및 크리에이티브 보기
📦
ui-styling
83Build Accessible Tailwind Interfaces
작성자 nextlevelbuilder
Building consistent, responsive interfaces requires many component, styling, and accessibility decisions. This skill provides shadcn/ui patterns, Tailwind guidance, and focused automation.
디자인 및 크리에이티브 보기