Communitygithub.com

cylqwe7855-alt/build-professional-workbench

초고속 멀티 직업 워크벤치 구축 Skill: 오프라인 순수 웹, 로컬 영속성, 복잡한 대시보드 및 완전한 교사 사례

build-professional-workbench란 무엇인가요?

이 Skill은 다양한 직업군을 위한 전문 워크벤치를 빠르게 구축할 수 있도록 설계되었습니다. 새로운 빌드, 확장, 리디자인, 감사 등 요청 유형을 분류하고, 대상 직업과 조직, 역할을 분석하여 최적의 애플리케이션을 생성합니다. 로컬 오프라인 환경을 기본으로 하며, 모든 데이터는 브라우저 내 IndexedDB나 로컬스토리지에 자동 저장되어 네트워크 없이도 완벽하게 작동합니다. 각 페이지에는 고유한 KPI와 차트 조합을 가진 대시보드가 할당되며, 'Quiet Luxury A' 디자인 시스템을 적용하여 편안하면서도 전문적인 UI를 제공합니다. 생성된 결과물은 순수 HTML/CSS/JavaScript로 구성되어 CDN 의존성이 없고, 56개의 모듈 항목, 22개의 차트 패밀리, 편집 가능한 테이블, 버전 관리된 백업/가져오기 등 풍부한 기능을 즉시 사용할 수 있습니다. 이 Skill은 Claude Code, Cursor, Codex 등 AI 에이전트 플랫폼과 호환되며, Red Skill 패키지 검증 및 워크벤치 자체 검증 스크립트를 제공하여 품질을 보장합니다.

지원 대상~Claude Code~Codex CLI✓Cursor
npx skills add cylqwe7855-alt/build-professional-workbench

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

문서

초고속 멀티 직업 워크벤치 구축 Skill

역할 중심의 운영 제품을 만드세요. 단순히 대시보드 셸을 개명하는 것이 아닙니다. 기존 아키텍처가 있다면 그것을 유지하세요. 새로운 순수 웹 빌드의 경우 assets/reference-workbench-template/에서 시작하여 교육 참조 도메인을 완전히 교체하세요.

시작

  1. 요청을 새 빌드, 확장, 리디자인, 감사로 분류하세요.
  2. 직업, 조직, 역할, 사용자, 업무 개체, 생애 주기, 결정, 위험, 승인, 개인정보 경계 및 배포 모드를 추론하세요. 누락된 선택이 제품을 실질적으로 변경하는 경우에만 질문하세요.
  3. 필요한 참조 문서만 읽으세요:
  4. 새 오프라인 프로젝트의 경우 다음을 실행하세요:
python3 scripts/scaffold_professional_workbench.py <target> --profile <profile> --profession "..." --organization-name "..." --role-name "..." --user-name "..." --deployment-mode local-offline
  1. 스캐폴딩을 시작점으로 취급하세요. 모든 라우트, 레코드, 워크플로우, 차트, 컨트롤, 영속성 경로 및 도메인 잔재 검사가 통과할 때까지 전달하지 마세요.

직업 모델링

  • 역할의 주요 명사를 정의하세요: 케이스, 클라이언트, 환자, 프로젝트, 후보자, 계정, 콘텐츠, 자산, 실험, 주문, 인시던트 또는 이에 상응하는 개체.
  • 생애 주기 상태, 소유자, 인계, 마감일, 결정, 예외 조건, 증거 및 승인을 정의하세요.
  • 개인 업무, 팀 운영, 공유 리소스, 분석 및 관리/규정 준수를 분리하세요.
  • 조직, 역할, 기간, 지역, 팀 또는 포트폴리오 컨텍스트를 항상 표시하세요.
  • 내비게이션에는 명시적인 중국어 텍스트 레이블을 사용하고, 아이콘은 의미를 강화하는 용도로만 사용하세요.
  • profession-profiles.md에서 하나의 프로필을 선택하거나 하이브리드 역할을 위해 프로필을 결합하세요. 실제 역할이 지원하는 책임만 유지하세요.

완전한 페이지 구축

  • 모든 내비게이션 항목에 제목, 컨텍스트, 작업, 조밀한 레코드, 상태 및 하나의 개별 분석 대시보드가 있는 완전한 페이지를 제공하세요.
  • 플레이스홀더, 세 줄 테이블, 반복된 이름만 바뀐 카드, 장식용 차트 및 지원되지 않는 버튼을 피하세요.
  • 결정론적이고 일관된 데모 레코드를 사용하고 시뮬레이션된 데이터로 레이블을 지정하세요.
  • 적절한 정상, 빈, 로딩, 경고, 오류, 비활성화, 기한 초과, 충돌, 승인 및 확인 상태를 포함하세요.
  • 레코드가 많은 페이지는 검색 가능, 필터 가능, 정렬 가능하며 페이지네이션 또는 제어된 스크롤로 제한되어야 합니다.
  • 기본 레코드는 직접 편집 가능해야 합니다. 생성, 업데이트 및 삭제는 테이블, 세부 정보, 내보내기 및 대시보드에서 사용하는 동일한 소스에 반영되어야 합니다.
  • 날짜, 범위, 필터 및 세그먼트 컨트롤은 실제 레코드에 대해 작동해야 합니다. 시각적 전용 컨트롤은 결함입니다.
  • 현재 필터링된 레코드를 안정적인 헤더와 함께 내보내세요. 가져오기 시 형식, 행 형태, 제한 및 병합/교체 의도를 검증하고, 미리보기를 먼저 제공하며 실패 시 현재 데이터를 변경하지 않고 유지하세요.
  • 주요 업무 개체를 목록, 세부 정보, 워크플로우 및 대시보드 페이지에 걸쳐 추적하세요.

고유한 대시보드 할당

  • 각 페이지에 서로 다른 비즈니스 질문, KPI 세트, 차트 조합, 진단, 상호작용 및 색상 변형을 제공하세요.
  • 추세에는 시간, 범주에는 막대, 밀도에는 히트맵, 흐름에는 Sankey, 관계에는 네트워크, 프로필에는 레이더 또는 평행 좌표, 일정에는 간트, 분포에는 히스토그램 또는 상자 그림을 사용하세요.
  • 각 대시보드를 하나의 주요 차트, 3~4개의 KPI, 보조 진단, 순위 또는 세그먼트화된 뷰, 범위 컨트롤, 툴팁 및 간결한 해석으로 구성하세요.
  • 차트를 동일한 표시 레코드에 바인딩하고 접근 가능한 텍스트 요약을 제공하세요.
  • 재무, 의료, 법률, 안전 및 규정 준수 결과는 의사 결정 지원으로 취급하고, 자율적인 전문 판단으로 간주하지 마세요.

Quiet Luxury A 적용

  • 사용자가 다른 시각적 방향을 선택하지 않는 한, 번들된 css/premium-minimal.css를 최종 캐스케이드 레이어로 사용하세요.
  • 따뜻한 아이보리 필드, 잉크-그린 타이포그래피, 채도 낮은 세이지 악센트, 세리프 디스플레이 제목, 시스템 산세리프 컨트롤, 세밀한 규칙 및 넉넉한 여백을 유지하세요.
  • 둥근 모서리 카드와 무거운 그림자보다 편집적 계층 구조와 정렬을 선호하세요.
  • 셸은 차분하게 유지하고 텍스트 레이블을 사용하세요. 밝은 분석 대시보드를 사용하고, 어두운 흑연은 공간적 히어로 또는 무한 캔버스를 위해 남겨두세요.
  • 히트맵은 조밀하지만 차분하게 유지하고, 5개의 정사각형 셀 레벨을 사용하세요.
  • 호버 검사, 포커스, 선택, 드릴다운, 세부 정보 서랍, 모달, 팬/줌 및 점진적 공개를 상태를 명확히 하는 곳에 사용하세요.
  • 모션은 짧고 중단 가능하게 유지하며 prefers-reduced-motion에서 비활성화하세요.
  • 키보드 접근, 가시적 포커스, 의미론적 컨트롤, 터치 레이아웃 및 인쇄/보고서 보기를 유지하세요.
  • --workbench-folio, 컨텍스트 선택기 및 히어로 언어를 새 조직 및 직업에 맞게 조정하세요.
  • 참조 히어로 이미지는 js/hero-media.js에 텍스트로 포함되어 있으므로 Skill은 Red Skill과 호환되며 생성된 사이트는 완전히 오프라인 상태로 유지됩니다.

로컬 우선 영속성 요구

  • 생성, 편집, 삭제, 재정렬, 주석, 초안, 기본 설정 및 레이아웃 변경 사항을 검증 후 자동으로 현재 컴퓨터에 저장하세요.
  • 첫 번째 의미 있는 렌더링 전에 저장된 상태를 복원하세요. 성공적인 쓰기 없이 저장 토스트만 표시하는 것은 결함입니다.
  • 작은 JSON 레코드 및 초안에는 번들된 js/local-persistence.js를 사용하세요. 첨부 파일, 대규모 컬렉션 및 오프라인 큐에는 IndexedDB를 사용하세요.
  • 각 워크벤치에 네임스페이스를 지정하고, 저장된 레코드에 버전을 부여하며, 스키마가 변경될 때 마이그레이션을 추가하세요.
  • 저장 중, 저장됨, 실패 및 할당량 상태를 표시하세요. 실패한 쓰기를 조용히 폐기하지 마세요.
  • 버전 관리된 JSON 내보내기, 병합/교체 의미론을 사용한 검증된 원자적 가져오기, 첨부 파일 관리 및 확인된 삭제를 제공하세요. 부분적으로 적용된 가져오기는 롤백하세요.
  • 데모 시드를 개인 레코드와 분리하세요. 비밀을 저장하지 말고 브라우저 저장소가 암호화되었다고 주장하지 마세요.
  • local-offline의 경우 단일 장치 및 단일 브라우저 제한을 공개하세요. team-server 또는 enterprise의 경우 인증된 API와 서버 데이터베이스를 시스템 of record로 사용하세요. deployment-modes.md를 참조하세요.

번들된 구현 사용

참조 템플릿은 CDN이 없는 순수 HTML/CSS/JavaScript, 다중 영역 텍스트 내비게이션, 56개의 모듈 항목, 조밀한 레코드, Quiet Luxury A, 공간적 히어로, 무한 캔버스, 활동 히트맵, 사용자 정의 커서, 라우트 모션, 22개의 차트 패밀리, 편집 가능한 테이블, 네임스페이스가 지정된 localStorage, 자동 저장, 버전 관리된 백업/가져오기, 대화상자, 폼, 반응형 동작 및 인쇄 스타일을 제공합니다.

모든 참조 도메인 이름, 내비게이션, 레코드, 워크플로우, KPI, 시뮬레이션된 신원 및 히어로 문구를 교체하세요. 제목만 변경하여 비교육 워크벤치를 배송하지 마세요.

검증

  1. Red Skill 업로드를 위해 이 Skill을 준비할 때 python3 scripts/validate_redskill_package.py .를 실행하세요.
  2. 생성된 워크벤치에 대해 python3 scripts/validate_professional_workbench.py <project-path>를 실행하세요.
  3. 네이티브 구문 또는 빌드 검사를 실행하세요.
  4. 모든 내비게이션 항목이 완전한 페이지로 연결되고 고유한 대시보드를 받는지 확인하세요.
  5. 레코드 밀도, 페이지 간 일관성, 운영 필터, 폼, 세부 정보, 워크플로우 상태 및 키보드 접근을 확인하세요.
  6. 로컬 자산 및 오프라인 전달을 위한 file:// 동작을 확인하세요.
  7. 추가 → 새로고침, 편집 → 새로고침, 삭제 → 새로고침, 내보내기 → 지우기 → 가져오기, 잘못된 형식의 가져오기 거부 및 저장소 실패 보고를 확인하세요.
  8. Node.js를 사용할 수 있을 때 node scripts/test_local_persistence.js <project-path>를 실행하세요.
  9. 교육 외 프로필의 경우 교육 도메인 잔재가 0이어야 합니다.
  10. 브라우저 화면을 사용할 수 있을 때 시각 및 상호작용 QA를 수행하세요. 파일 존재 또는 구문 성공을 시각적 수락과 동일시하지 마세요.
  11. 경로, 배포 모드, 직업, 역할, 모듈 및 대시보드 범위, CRUD/필터/가져오기/내보내기 결과, 영속성 결과, 검증 및 남은 경계를 보고하세요.

가드레일

  • 외부 쓰기, 승인, 메시지, 트랜잭션 또는 게시에 대한 권한을 추론하지 마세요.
  • 시뮬레이션된 레코드를 실제 데이터로 제시하거나 민감한 식별자를 노출하지 마세요.
  • 전문가 검토 없이 고위험 결정을 자동화하지 마세요.
  • 오프라인 결과물에 외부 CDN을 사용하지 마세요.
  • 선택한 배포 모드의 아키텍처, 보안 및 수용 게이트가 통과할 때까지 production_ready를 false로 유지하세요.
  • 사용자가 요청하거나 활성 사이트 구축 지침에서 호스팅을 요구하지 않는 한 게시하거나 배포하지 마세요.

관련 스킬