Help us improve
Share bugs, ideas, or general feedback.
From cs-design-sample1
Crextio-inspired 디자인 가이드 스킬 (warm cream #F5F3EE + amber/slate 액센트). ICE 스코어링 페이지와 문제정의 관리 페이지에 적용된 디자인 시스템을 공식화한 레퍼런스. Use when user types: - "/cs-design-sample1" - "디자인 가이드 보여줘" - "크렉시오 스타일 적용" - "--audit [file]" to check a file - "--apply [file]" to apply the design
npx claudepluginhub intenet1001-commits/csncompany_2-0 --plugin cs-design-sample1How this skill is triggered — by the user, by Claude, or both
Slash command
/cs-design-sample1:cs-design-sample1This skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
이 세션에서 확립된 디자인 언어를 캡처한 재사용 가능한 레퍼런스 스킬.
Guides Next.js Cache Components and Partial Prerendering (PPR): 'use cache' directives, cacheLife(), cacheTag(), revalidateTag() for caching, invalidation, static/dynamic optimization. Auto-activates on cacheComponents: true.
Creates, reads, edits, and analyzes .docx files using docx-js for new documents, pandoc for text extraction, Python scripts for XML unpacking/validation/changes, and LibreOffice for conversions.
Share bugs, ideas, or general feedback.
이 세션에서 확립된 디자인 언어를 캡처한 재사용 가능한 레퍼런스 스킬.
참조 파일: knowledge/design-guide.md (이 스킬과 같은 플러그인 내)
/cs-design-sample1 # 디자인 가이드 전체 출력
/cs-design-sample1 --audit [file] # 파일이 가이드를 따르는지 검사
/cs-design-sample1 --apply [file] # 파일에 디자인 가이드 적용
knowledge/design-guide.md를 Read--audit [file]목적: 지정된 파일이 이 디자인 가이드를 따르는지 검사하고 위반 사항 리포트
실행 절차:
knowledge/design-guide.md를 Read (가이드 로드)
지정된 [file]을 Read
다음 항목을 체크:
배경/레이아웃 체크
bg-[#F5F3EE] 또는 bg-[#f5f3ee] 페이지 배경 사용 여부rounded-2xl (not rounded-xl) 카드 사용 여부shadow-sm or shadow-md (not border border-gray-200) 카드 스타일 여부space-y-5 페이지 간격 여부색상 체크
bg-slate-900 (not bg-blue-600) 여부bg-slate-900 (not bg-gray-800) 여부bg-slate-900 (not bg-gray-50) 여부bg-stone-100 (not bg-gray-100) 여부안티패턴 체크
bg-gradient-to-br 배경 사용 없는지border border-gray-200 카드 테두리 없는지bg-blue-600 primary 버튼 없는지결과 리포트 출력:
✅ 통과: [항목 목록]
⚠️ 위반: [항목 + 위치 + 수정 제안]
📊 준수율: X/Y 항목 (XX%)
--apply [file]목적: 지정된 파일에 이 디자인 가이드를 자동 적용
실행 절차:
knowledge/design-guide.md를 Read (가이드 로드)[file]을 Read--audit 방식으로 위반 항목 파악bg-gradient-to-br from-slate-50... → bg-[#F5F3EE]border border-gray-200 카드 → shadow-sm 제거rounded-xl → rounded-2xlbg-blue-600 primary button → bg-slate-900bg-gray-800 filter active → bg-slate-900bg-gray-50 border-b table header → bg-slate-900bg-gray-100 secondary button → bg-stone-100space-y-6 page gap → space-y-5✅ 적용 완료: X개 항목 수정
📝 변경 내역: [목록]
| 요소 | 값 |
|---|---|
| 배경 | #F5F3EE warm cream |
| Primary accent | amber-400 (#FBBF24) |
| Dark accent | slate-900 (#0F172A) |
| Neutral | stone-* |
| 카드 스타일 | bg-white rounded-2xl shadow-sm |
| 테이블 헤더 | bg-slate-900 text-slate-400 |
| Primary 버튼 | bg-slate-900 text-white |
| KPI 카드 | white / slate-900 / amber-400 3종 |
app/ice/page.tsx, app/problems/page.tsx)