القائمة
OntoAir의 보기옵션 컨트롤 바(`#controls`)에 토글/뱃지를 추가하고 template.html과 dev.html을 동기화하는 스킬. window.O 메타데이터에 따라 조건부 표시. ui-engineer가 사용.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
| name | ontoair-ui-controls |
| description | OntoAir의 보기옵션 컨트롤 바(`#controls`)에 토글/뱃지를 추가하고 template.html과 dev.html을 동기화하는 스킬. window.O 메타데이터에 따라 조건부 표시. ui-engineer가 사용. |
OntoAir의 #controls 영역(우하단 보기옵션 바)에 새 토글/뱃지를 추가한다.
| 파일 | 사용 시점 |
|---|---|
resources/template.html | 앱 번들 + QuickLook 미리보기 |
resources/dev.html | scripts/dev.sh 브라우저 hot reload |
둘은 부분적으로 중복된 마크업이다. #controls 블록은 라인 단위로 동일하므로 한 쪽만 바꾸면 dev에서 본 결과와 실제 앱 결과가 어긋난다.
<div id='controls'>
<button id='bh' class='active'>Hierarchy</button>
<button id='bf'>Force</button>
<button id='b2'>2D</button>
<button id='bre'>Reason</button>
<button id='brec'>Rec</button>
<button id='br'>Reset</button>
</div>
CSS는 이미 #controls button이 잡혀 있다. 새 요소도 <button> 또는 <span>이면 자동으로 톤이 맞는다.
읽기 전용 뱃지 (이번 phase 권장):
<button id='bgeo' class='ctrl-badge' title='Geo coordinates detected' style='display:none'>GEO</button>
#controls button.ctrl-badge{background:#eaf2ff;color:#1c4f99;border-color:#b9d3f3;cursor:default}
#controls button.ctrl-badge:hover{background:#eaf2ff}
미래에 지도 토글로 승격할 자리. 현재는 클릭 시 변화 없도록 둔다 (또는 짧은 console.info만).
template.html의 마지막 <script> 블록(현재 TBox 배너 처리 IIFE) 안에 토글 한 줄 추가:
// 같은 IIFE 안에 추가
if(window.O && window.O.hasGeo){
const bgeo = document.getElementById('bgeo');
if(bgeo) bgeo.style.display = '';
}
파서 로딩이 비동기이므로 dev.html의 기존 maybeShowTBoxBanner 폴링 패턴을 그대로 재사용:
function maybeShowGeoBadge(){
let tries=0;
const t=setInterval(()=>{tries++;
if(window.O){
if(window.O.hasGeo){const b=document.getElementById('bgeo');if(b)b.style.display='';}
clearInterval(t);
} else if(tries>40) clearInterval(t);
},100);
}
호출은 maybeShowTBoxBanner(); 다음 줄에 maybeShowGeoBadge();.
이 앱의 색 톤:
#c62828#e0b850 / 본문 #866b00#fff / 텍스트 #555geo 같은 정보성 뱃지는 파란 계열 권장 (#1c4f99 텍스트, #eaf2ff 배경). 너무 강조해서 컨트롤 버튼들 사이에서 튀지 않게.
#bgeo 존재getComputedStyle(bgeo).display !== 'none'getComputedStyle(bgeo).display === 'none'#controls 블록이 라인 단위로 동기화됨 (단, dev.html에는 <select id='sampleSel'> 같은 dev 전용 요소는 별개)<style> 블록 생성 — 기존 블록에 한 줄 추가disabled 속성 — cursor:default만 줘도 충분 (포커스 흐름 안 깨짐)style.display=''(보임) 대신 style.display='block'/'inline-block' — #controls는 flex라 빈 문자열이 맞다체스를 OntoAir에 시각화하는 통합 워크플로우 오케스트레이터. chess-ontology-architect, chess-position-curator, ontoair-parser-engineer, ontoair-ui-engineer, ontoair-qa로 구성된 5인 팀을 TeamCreate로 띄워 (1)schema 설계 → (2)position TTL 작성 → (3)GRID/filter/focus 3개 generic 기능 추가 → (4)통합 검증을 phase로 진행. '체스 온톨로지 시각화', '체스 ontoair', 'chess RDF' 같은 요청 시 사용.
체스 도메인을 RDF/OWL로 표현하는 스키마 설계 패턴. Piece 계층, Square, TacticalPattern 노드 모델링, 핵심 ObjectProperty(attacks/defends/pinnedBy), 3원 관계의 reification(별도 노드화), GRID view용 datatype property 컨벤션. 체스 ontology 작성 시 사용.
체스 position을 TTL로 작성하는 스킬. FEN 파싱, piece 위치 + 공격선 계산, 전술 패턴(Fork/Pin/Skewer/DoubleAttack) 자동 추출, gridX/gridY로 GRID view 호환 좌표 부여. test/sample-chess*.ttl 작성 시 사용.
OntoAir의 RDF 파서(parseTTL/parseXML)에서 geo 좌표를 추출해 정규화된 필드로 노출하는 스킬. WGS84·schema.org namespace, lat/long/latitude/longitude 키 alias, 숫자/literal 둘 다 지원. parser-engineer가 사용.
OntoAir 변경의 통합 정합성을 검증하는 스킬. dev 서버(scripts/dev.sh) 기반 webapp-testing, Node 단독 파서 어설션, scripts/build.sh swift 빌드 회귀 테스트, 양성/음성 샘플 매트릭스를 모두 다룬다. qa가 사용.
OntoAir 사이드바에 predicate별 edge 표시/숨김 체크박스를 추가하는 generic 기능. attacks만, defends만, partOf만 등 보고 싶은 관계 타입을 선택. 체스(attacks/defends 분리), 소셜그래프(친구/팔로워), 학술그래프(인용/공저) 등에 활용. ui-engineer가 사용.