Menu
OntoAir의 보기옵션 컨트롤 바(`#controls`)에 토글/뱃지를 추가하고 template.html과 dev.html을 동기화하는 스킬. window.O 메타데이터에 따라 조건부 표시. ui-engineer가 사용.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
| 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가 사용.