krds-a11y-mcp
Use this server to build KRDS pages with KWCAG 2.2 accessibility baked in, re-check rendered pages, and block AI task completion while violations remain.
Browse 43 KRDS components and fetch component markup/accessibility requirements; refuses to return markup when mandatory accessibility inputs are missing.
Generate KRDS page scaffolds from official patterns or a blank skeleton, optionally with government banner/header/footer, site menu, and logo.
Look up accessibility requirements without markup, KRDS design tokens, React/Next.js integration guidance, and icon-path bug fix CSS.
Validate rendered pages with axe-to-KWCAG translation, contrast measurement, keyboard/widget interaction checks, resource/layout/legacy CSS checks, and optional scripted actions for modal/error states; saves reports and screenshots.
Inspect computed styles, layout, spacing, and font application of page elements.
Enforce completion gates: a Stop hook blocks finishing when violations, stale checks, or missing site chrome remain; a PreToolUse hook blocks temporary validation scripts and KRDS kit modifications.
Install and check MCP server, hooks, and AI instructions via
initanddoctor.
Provides a framework guide and fixes for using KRDS components in Next.js applications, including handling SPA initialization and route transition reinitialization.
Provides a framework guide and fixes for using KRDS components in React SPA applications, addressing kit JavaScript initialization (DOMContentLoaded once) and client-side routing reinitialization issues.
Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@krds-a11y-mcp로그인 페이지를 KWCAG 2.2 접근성에 맞게 만들어줘"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
krds-a11y-mcp
KRDS(범정부 UI/UX 디자인 시스템) 컴포넌트를 KWCAG 2.2 접근성 조건과 함께 공급하고, 위반이 남으면 AI의 작업 종료를 막는 MCP 서버.
An MCP server that supplies KRDS (Korea Government Design System) components with KWCAG 2.2 accessibility built in, and keeps AI agents from finishing while accessibility violations remain.
설치는
npm i가 아니라 프로젝트 루트에서npx -y krds-a11y-mcp init한 줄이다. MCP 등록·훅·지시문을 한 번에 설정한다.
공급 — 접근성 조건을 갖춘 KRDS 부품·템플릿을 준다. 레이블·대체 텍스트 같은 필수 입력을 안 채우면 마크업을 주지 않는다
검사 — 렌더된 페이지를 axe와 자체 실측(명도 대비, 키보드, 화면에 안 그려진 요소)으로 검사해 KWCAG 번호로 보고한다
강제 — Claude Code·Codex 훅이 위반이 남은 채 작업을 끝내지 못하게 막는다
정직한 범위: 자동 판정은 접근성 이슈의 3~4할이다. 이 도구는 "심사 통과 보장"이 아니라 심사 전 자가진단 + 증빙 생성 도구다. KWCAG 최종 판정 기준은 전문가 심사와 보조기술(스크린리더) 실사용 평가이며, 자동 도구는 이를 대체하지 못한다.
사용 예
화면 흐름 문서 하나를 주고 한 줄로 요청했다. 가상의 도서관 좌석 예약 서비스다.

docs/screen-flow.md의 화면 흐름대로 Next.js로 만들어줘.AI가 이 서버의 부품·공통부를 받아 Next.js 화면을 만들고, 화면마다 validate_page로 검사했다. 필수 입력을 빠뜨린 부품 요청 5번은 거부됐고 값을 채워 다시 받았다. 끝내기 전에는 gate로 통과를 확인했다. 위반이 남았다면 Stop 훅이 종료를 막는다.
좌석 현황 조회 | 예약 신청 1단계 (필수 항목을 비우고 다음) |
|
|
결과는 5개 화면(상태 화면 포함 7개 기록) 모두 자동 검사 위반 0이다. 사람 확인 항목(배경 위 글자 대비 등)은 화면당 1~4건이 리포트에 남는다.
데모 코드와 흐름 문서: kim-dongho/krds-a11y-mcp-demo
Related MCP server: accessibility-mcp-server
왜 만들었나
공공 웹은 KRDS와 KWCAG 2.2(웹 접근성 국가표준, 33개 검사항목)를 함께 지켜야 한다. 그런데
KRDS 공식 패턴 샘플 33종을 전수 검사하면 33종 모두에서 접근성 문제가 나온다. 샘플을 복사하는 것만으로는 준수가 안 된다
axe 같은 자동 검사기는 WCAG 번호로 보고해 KWCAG 기준 심사·보고서와 번호가 맞지 않는다
검사는 보통 개발이 끝난 뒤에 해서 교정 왕복 비용이 크다
그래서 "검사해서 고치는" 대신 처음부터 KWCAG 조건이 들어간 KRDS 마크업을 공급하고, 검사는 조립·변환 과정에서 깨진 것을 잡는 안전망으로 둔다. 안전망은 지시가 아니라 훅으로 강제한다.
빠른 시작
요구사항: Node 20 이상. 검사 도구를 쓰려면 Chromium(아래 3번).
프로젝트 루트(git 저장소 루트)에서 설정을 설치한다
npx -y krds-a11y-mcp init도구가 주는 페이지가 불러올 KRDS 킷을 프로젝트에 설치한다. 킷을 문서루트에 복사해 서빙하는 프로젝트(JSP 등)는 그 경로를
get_page_scaffold의assetBase로 준다npm i krds-uiux@1.1.0재검사(
validate_page·inspect_page)까지 쓰려면 브라우저 검사 스택을 설치한다. 없으면 도구가 이 안내를 그대로 돌려준다npm i -D playwright @axe-core/playwright npx playwright install chromium설치 상태를 점검한다
npx -y krds-a11y-mcp doctor
init이 설치하는 것 (기존 파일은 보존하고 우리 항목만 추가, 재실행해도 중복 없음):
파일 | 내용 |
| MCP 서버 등록 (도구 9종 + 자동 주입 사용 규칙) |
| Stop 훅(위반이 남으면 작업 종료 차단) + PreToolUse 훅(금지 행동 차단) |
| 핵심 사용 규칙 (Codex 등 타 AI 도구 호환) |
| Codex용 MCP 서버 등록과 같은 두 훅 |
서버와 훅은 설치한 버전(krds-a11y-mcp@x.y.z)으로 고정된다. 세션 중에 새 버전이 나와도 판정 로직이 바뀌지 않고, 훅마다 레지스트리를 조회하지 않는다. Windows에서는 서버를 cmd /c npx로 등록한다.
설치 후 처음 한 번:
Claude Code — 프로젝트를 열고 MCP 서버를 승인한다
Codex — 프로젝트를 신뢰(trust)하고
/hooks에서 krds-a11y 훅 2개를 승인한다. 훅 내용이 바뀌면 다시 승인해야 한다
업그레이드: npx -y krds-a11y-mcp@latest init을 다시 실행하면 고정 버전만 새 버전으로 바뀐다(다른 설정은 보존).
제거: .mcp.json의 krds-a11y 항목, .claude/settings.json·.codex/hooks.json의 krds-a11y-mcp 훅 두 개, .codex/config.toml의 [mcp_servers.krds-a11y] 표, CLAUDE.md·AGENTS.md의 <!-- krds-a11y:begin -->~end 구간을 지운다.
claude mcp add krds-a11y -- npx -y krds-a11y-mcp@x.y.z또는 .mcp.json:
{
"mcpServers": {
"krds-a11y": { "command": "npx", "args": ["-y", "krds-a11y-mcp@x.y.z"] }
}
}훅은 아래 하네스 절의 설정을 붙인다.
사용 흐름
사용자: "로그인 페이지 만들어줘"
→ AI가 get_page_scaffold(pattern: "login-id", withSiteChrome: true, ...) 호출
→ 필수 입력(페이지 제목 등)이 비면 도구가 거부하고 되물음
→ 접근성 교정이 내장된 완성 마크업 수신, 콘텐츠 교체
AI가 작업을 끝내려 할 때
→ Stop 훅이 검사 기록을 판정
→ 검사가 없거나 위반이 남았으면 종료 거부 + 교정 지시
→ AI가 validate_page로 검사하고 위반 위치·교정 방법대로 고친 뒤 다시 검사도구 9종
도구 | 시점 | 하는 일 |
| 탐색 | KRDS 컴포넌트 43종 색인. 필수 입력 수와 그것을 채우는 필드명, 변형 이름을 함께 보여 줘 |
| 부품 공급 | 컴포넌트 마크업 + 보장 항목 + 필수 입력 강제. 필수 입력(레이블 등)을 안 채우면 마크업을 주지 않는다. 반복 항목은 객체 배열( |
| 설계·리뷰 | 마크업 없이 접근성 요건만 조회 |
| 페이지 생성 | KRDS 공식 패턴 기반 템플릿 13종(로그인 3·신청 5·검색 1·메인 1·서브 1·게시판 2) 또는 빈 뼈대. |
| 스타일 | 킷 디자인 토큰(색·간격·글자 크기 768개) 검색. 임의 hex 대신 토큰을 쓰게 한다 |
| React·Next.js | 킷 JS가 SPA에서 죽는 문제(DOMContentLoaded 1회 초기화)의 검증된 처방. 라우트 전환 뒤 재초기화 훅 포함 |
| 교정 | 킷 아이콘 경로 버그(206곳 404) 전면 교정 CSS |
| 완성 후 | 렌더된 페이지를 브라우저로 재검사. axe 전수 → KWCAG 33항목 번역, 명도 대비 실측, 키보드 검사(실제 Tab 순회, 탭 화살표·펼침·모달 초점/Escape 같은 위젯 조작), 사이트 공통부 누락, KRDS 사용 문제(부품 재발명·킷 스타일 조작·오류 메시지 연결 누락·라디오 그룹 이름 누락·모달 배치), 레거시 CSS의 킷 침투, 페이지 문제(리소스 404·가로 넘침·한글 깨짐·화면에 안 그려진 조작 요소). 위반 규칙별 교정 방법을 제시하고 리포트·스크린샷을 |
| 확인 | 요소의 색·배치·간격(margin·padding·gap)·폰트 적용 여부를 실측 조회 |
실패·거부 응답(필수 입력 누락, 모르는 id·변형·패턴, 검사 실행 실패)은 isError로 표시되고 다시 부르는 방법을 담는다. 오타로 보이는 이름에는 가까운 이름을 제안한다.
AI에게 주는 세부 사용 규칙은 MCP 연결 시 서버 instructions로 자동 전달된다(원본: src/server/index.ts의 SERVER_INSTRUCTIONS). init이 만드는 CLAUDE.md·AGENTS.md에는 핵심 요약만 마커 구간으로 들어간다.
하네스 — 위반이 남으면 끝내지 못하게
"완성하면 검사하라"는 지시는 따를 때도 건너뛸 때도 있다. 그래서 판정을 훅으로 옮겼다.
gate — 판정 명령
reports/의 검사 기록을 읽어 위반이 남았는지, 검사 뒤에 페이지가 바뀌었는지(낡음)를 판정한다. 판정 로직은 이 명령 한 곳에만 있고 훅과 CI가 같이 쓴다.
npx krds-a11y-mcp gate # 사람용 요약
npx krds-a11y-mcp gate --json # 훅·CI용 구조화 출력
npx krds-a11y-mcp gate --only form # 지정 화면만 (반복 가능)종료 코드 | 뜻 | 다음 행동 |
0 | 전 화면 위반 0, 검사 최신 | 없음 |
1 | 위반 잔존 또는 사이트 공통부(헤더·푸터) 누락 | 교정 후 재검사. 일부러 공통부를 뺀 페이지는 |
2 | 검사 기록 없음·낡음·검사 무효(킷 CSS 미로드, 상호작용 실패 등)·검사한 파일 없음 | validate_page 실행. 파일을 지운 화면은 |
url 검사는 validate_page에 sourceDir을 넘기면 그 아래 소스 수정 시각으로 낡음을 판정한다. 넘기지 않으면 "판정 불가"로 표기한다(통과로 꾸미지 않는다).
stop-hook — 작업 종료 차단
AI가 작업을 끝내려는 순간 gate를 판정해, 위반·공통부 누락·낡음이 남으면 종료를 거부하고 교정 지시를 모델에게 전달한다. 통과할 때까지 반복하고, 상한(기본 5회)을 넘으면 "자동 교정 실패, 사람 확인 필요"를 남기고 풀어준다. 횟수는 세션 단위로 세고, 풀어 준 세션은 다시 막지 않는다. 위반을 일부러 남겨 둔 작업이면 환경 변수 KRDS_A11Y_GATE=off로 판정을 끈다. 검사 기록이 하나도 없는 프로젝트는 막지 않는다(페이지 작업이 없던 세션의 오탐 방지).
{
"hooks": {
"Stop": [{ "hooks": [{ "type": "command", "command": "npx -y krds-a11y-mcp@x.y.z stop-hook", "timeout": 30 }] }]
}
}pretool-hook — 금지 행동 사전 차단
파일을 쓰기 직전에 세 가지를 막는다. 실사용 테스트에서 실제로 관찰된 행동들이다.
프로젝트 폴더에 임시 검사 스크립트 생성(
.axe-check.mjs류) → validate_page·inspect_page가 대체킷 원본(
node_modules/krds-uiux) 수정 → 재설치로 사라지고 보증 근거가 훼손된다문서루트로 복사한 킷(
webapp/krds-uiux등) 수정 → npm 킷과 조용히 어긋난다. 교정은 별도 CSS로
{
"hooks": {
"PreToolUse": [
{
"matcher": "Write|Edit|MultiEdit|NotebookEdit",
"hooks": [{ "type": "command", "command": "npx -y krds-a11y-mcp@x.y.z pretool-hook", "timeout": 30 }]
}
]
}
}시스템 임시 디렉터리의 일회용 스크립트와 .eslintrc.js 같은 정상 설정 파일은 막지 않는다. Bash 경유 수정은 범위 밖이다(파일 쓰기 도구만 본다).
Codex
init이 .codex/hooks.json에 같은 두 훅을 건다. PreToolUse 대상은 apply_patch|Edit|Write이고, 패치 본문의 모든 경로를 뽑아 하나라도 금지 대상이면 패치 전체를 막는다.
프로젝트 신뢰와
/hooks승인 전에는 설정도 훅도 읽히지 않는다codex exec(비대화형)에서는 훅이 실행되지 않는다. 자동화로 돌린다면 gate를 CI에서 따로 호출해야 한다
문제 해결
증상 | 확인할 것 |
Claude Code에서 krds-a11y 연결 실패, 또는 예전 버전이 뜬다 |
|
validate_page가 "검사 무효" | 페이지가 킷 CSS를 불러오지 못했다(프로젝트에 |
아이콘만 안 보인다( | 킷 v1.1.0의 아이콘 경로 버그다. |
Codex에서 훅이 안 돈다 | 프로젝트 신뢰와 |
응답에 킷 버전 경고가 나온다 | 설치된 |
템플릿이 보장하는 것과 지켜야 하는 것
템플릿은 KRDS 공식 패턴 샘플을 전수 검사해 나온 문제를 교정해 만들었다(감사 기록: docs/mapping/pattern-audit.md). 게시판 2종은 공식 샘플이 없어 하위 페이지 틀에 킷 부품을 조립했다. 보장이 유지되는 조건:
구조·클래스·속성(aria 포함)을 유지한 채 렌더된 DOM이 템플릿과 같을 것. React/Vue/JSP 변환은 자유지만 래퍼 요소를 끼우지 않는다
스타일은 킷 CSS와 동봉 CSS를 그대로 로드. Tailwind 등으로 재작성하지 않고 공존만 한다
콘텐츠는 자유, 단 조건부 항목(alt·레이블 등)은 반드시 채운다. 도구가 생성 단계에서 강제한다
시안은 배치·구성만 참고. 색·타이포는 킷 토큰을 쓴다
데모 플레이스홀더(
href="#")는 실제 URL로 바꾼다
요약하면 ⑴ 접근성 교정분은 불변 ⑵ 화면 구조는 기본값(명시 요구 시에만 이탈) ⑶ 콘텐츠·문구는 자유.
데이터의 근거
매핑표 — KRDS 컴포넌트 43종 × KWCAG 33항목을 자동 충족·조건부·범위 밖으로 분류(
docs/mapping/). 근거는 공식 킷(KRDS-uiux)의 실제 파일이며 판정마다 출처(파일·행)를 남긴다. 확신이 없으면 미확정으로 둔다KWCAG↔WCAG↔axe 번역표 — 커버리지 완전 1 / 부분 19 / 불가 13. 불가 13항목은 리포트에 수동 체크리스트와 확인 매뉴얼로 내보낸다
킷 결함 기록 — 아이콘 경로, 셀렉트 기본색 대비, 탭 role 등 공식 킷의 알려진 결함과 처리는
docs/mapping/kit-bugs.md
개발
pnpm install
pnpm test # vitest
pnpm typecheck # tsc --noEmit
pnpm build # tsup → dist/
pnpm build:previews # 템플릿 프리뷰 생성 (테스트 전에 한 번 필요)
pnpm scan:axe # 전 템플릿 axe 전수 (위반 시 exit 1)
pnpm verify:a11y # 키보드 전수·접근성 트리 검증검사 기능 테스트에는 Chromium이 필요하다(pnpm exec playwright install chromium).
라이선스
Available Tools
9 toolsget_componentKRDS 컴포넌트 공급ARead-onlyIdempotent
KRDS 컴포넌트 하나의 마크업과 접근성 요건을 반환한다. 필수 입력(레이블·대체 텍스트 등)을 inputs에 채워야 마크업을 준다 — 비우면 isError 응답으로 채울 필드명과 입력 예시를 안내하니, 그대로 채워 다시 부른다. breadcrumb·pagination·radio_button·checkbox·text_input·select는 입력값을 넣은 마크업을 만들어 주고, 나머지는 킷 원본과 채워 넣을 값을 준다. 페이지 전체 뼈대는 get_page_scaffold, 요건만 볼 때는 get_requirements, id·변형·필드명 목록은 list_components. 반환: 마크다운 — 마크업, 보장 항목, 페이지에서 따로 확인할 항목, 조립 지침, 킷 동작(상태 클래스·초기화), 필요하면 아이콘 교정 CSS.
| Name | Required | Description | Default |
|---|---|---|---|
| inputs | No | 필드명 → 값. 필드명은 list_components 각 줄의 '필드:' 목록에 있다. 여러 값은 쉼표로 잇거나 배열로, 반복 항목은 객체 배열로 준다(예: crumbs: [{crumbLabel, href}]). 확인용 입력(modalPlacement 등)은 true | |
| variant | No | 변형 이름 — list_components 각 줄의 '변형:' 목록 중 하나(예: button의 'icon'). 없으면 기본형 | |
| componentId | Yes | 컴포넌트 id — 'krds:button' 또는 'button' |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Although annotations already declare read-only, idempotent, non-destructive behavior, the description adds important operational details: empty inputs trigger an isError with field names and examples, and the retry loop is explained. It also discloses component-specific behavior and the full markdown return contents, including guaranteed items, manual checks, assembly instructions, kit behavior, and optional icon CSS.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is dense but front-loaded: purpose first, then input requirement, component categories, sibling alternatives, and return format. Every sentence carries actionable information, and there is no filler.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a read-only component retrieval tool with no output schema, the definition explains the input preconditions, error recovery, component-specific behavior, sibling routing, and return structure. An agent has enough information to invoke it correctly and interpret the response.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is 100%, so the schema already documents componentId, variant, and inputs thoroughly. The description still adds value by clarifying that inputs must contain required fields, that missing fields cause an isError response, and that field names come from list_components.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description opens with a specific verb and resource: it returns the markup and accessibility requirements for one KRDS component. It also distinguishes the tool from siblings by naming get_page_scaffold, get_requirements, and list_components as separate purposes.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
It gives explicit usage conditions: fill required inputs or receive an isError response guiding the missing fields, then retry. It also routes agents to get_page_scaffold for page structure, get_requirements for requirements only, and list_components for ids, variants, and field names.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
get_framework_guideSPA 프레임워크 × 킷 충돌 가이드ARead-onlyIdempotent
React·Next.js에서 킷을 쓸 때의 충돌(킷 JS는 DOMContentLoaded 1회 init·클라이언트 라우팅 모름)과 실사용 검증된 처방을 반환한다. 킷 위젯(탭·아코디언·GNB)이 SPA에서 동작하지 않으면 자체 해법을 발명하기 전에 이 가이드를 먼저 보라. 위젯별 상태 클래스·초기화 함수는 get_component의 '킷 동작' 절에 있다. 반환: 마크다운 — 충돌 원인과 처방(코드 포함). framework 없이 부르면 고를 수 있는 목록.
| Name | Required | Description | Default |
|---|---|---|---|
| framework | No | 프레임워크 — react(Vite 등 SPA 공통) 또는 nextjs. 비우면 목록을 안내한다 |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
The readOnly/idempotent annotations already cover the safety profile, yet the description still adds useful behavior: the return is markdown containing cause-and-prescription with code, and omitting framework yields a selectable list instead of an error. Nothing contradicts the annotations; only minor traits (version/scope of the prescriptions) are left unstated.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Roughly four dense sentences, each with a distinct job: what it returns, when to reach for it, where the related detail lives, and the exact return shape. The core purpose is front-loaded and there is no filler.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
No output schema exists, but the description compensates by naming the return format (markdown with code) and the no-argument fallback. With the single optional parameter fully documented, an agent has everything needed to call this correctly on the first attempt.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, including the enum meanings and the '비우면 목록' behavior, so the schema already carries the parameter semantics. The description restates the empty-argument fallback but adds no syntax or scoping detail beyond what the schema documents, making the baseline 3 correct.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
States a specific verb and resource: returns a conflict guide for using the kit in React/Next.js, naming the concrete failure mode (kit JS initializes once on DOMContentLoaded and is unaware of client routing). It explicitly hands off a neighboring responsibility to get_component's '킷 동작' section, so an agent can tell the two apart without opening either schema.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
Gives an explicit trigger ('킷 위젯(탭·아코디언·GNB)이 SPA에서 동작하지 않으면') and an explicit ordering rule ('자체 해법을 발명하기 전에 이 가이드를 먼저 보라'). It also names the alternative destination for per-widget details, so routing in both directions is covered.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
get_icon_fix_css킷 아이콘 버그 전면 교정 CSSARead-onlyIdempotent
킷 v1.1.0 npm판의 아이콘 경로 버그(img/img 중복, 206곳 404)를 페이지 전체 범위로 교정하는 CSS를 반환한다. get_page_scaffold(withSiteChrome)를 쓰면 자동 주입되므로 필요 없다. 레이아웃을 직접 구성하는 프로젝트(React 레이아웃 등)에서 아이콘이 안 보일 때, 빠진 곳을 한 개씩 손으로 고치지 말고 이 전체본을 받아 교정 파일로 저장하라. 컴포넌트 하나에 필요한 부분은 get_component 응답에도 들어 있다. 반환: 저장·로드 방법과 CSS 코드 블록.
| Name | Required | Description | Default |
|---|---|---|---|
| assetBase | No | CSS의 url()이 가리킬 킷 자산 경로 — 페이지에서 킷을 서빙하는 경로와 같아야 한다. 기본 "node_modules/krds-uiux", 예: "/krds-uiux" |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
어노테이션이 readOnly/idempotent/openWorld=false를 이미 선언하므로 안전성 프로파일은 구조화 데이터가 담당한다. 설명은 그 위에 버그의 성격(경로 중복으로 인한 404)과 반환물의 형태(저장·로드 방법 + CSS 코드 블록)를 추가로 공개해 실질적 가치를 더한다. 다만 출력 스키마가 없음에도 CSS 블록의 크기나 파일명 규칙 같은 세부는 언급하지 않아 5는 아니다.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
다섯 문장이 각각 목적·배제조건·사용조건·대안·반환형태라는 서로 다른 역할을 맡고 중복이 없다. 첫 문장에 버그와 산출물이 프런트로드되어 있어 스캔만으로 판단이 끝난다.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
1개 파라미터·출력 스키마 없음이라는 낮은 복잡도에 비해 설명이 오히려 충분하며, 언제 쓰고 언제 쓰지 말아야 하는지와 반환물 구성까지 갖춰 호출에 필요한 정보가 빠져 있지 않다.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
파라미터가 1개이고 스키마 설명 커버리지가 100%이므로 기준선 3이 적용된다. 설명의 assetBase 관련 서술('킷을 서빙하는 경로와 같아야 한다', 기본값 node_modules/krds-uiux)은 스키마 설명에 이미 있는 내용과 사실상 동일해 추가 의미를 거의 제공하지 않는다.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
특정 동사(반환)와 리소스(킷 v1.1.0 아이콘 경로 버그 교정용 전체 페이지 CSS)를 명시하고, 버그의 구체적 증상(img/img 중복, 206곳 404)까지 제시한다. get_page_scaffold·get_component 같은 형제 도구와의 경계도 문장 안에서 직접 밝혀 에이전트가 스키마를 열지 않고도 구분할 수 있다.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
'get_page_scaffold(withSiteChrome)를 쓰면 자동 주입되므로 필요 없다'는 사용 배제 조건과 'React 레이아웃처럼 직접 구성하는 프로젝트에서 아이콘이 안 보일 때'라는 사용 조건을 모두 명시한다. 단일 컴포넌트는 get_component 응답에 포함된다는 대안까지 제시해 대안 선택 기준이 완결되어 있다.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
get_page_scaffoldKRDS 페이지 뼈대ARead-onlyIdempotent
KRDS 페이지의 시작 골격을 반환한다. 새 페이지를 만들 때 get_component보다 먼저 부른다. pattern을 주면 공식 KRDS 패턴을 접근성 교정한 완성 템플릿을 주고(apply-complete, apply-detail, apply-form, apply-issue, apply-list, board-detail, board-list, login-id, login-select, login-tabs, main-portal, search-results, sub-page), 없으면 빈 뼈대를 준다. 로그인·신청·검색·게시판 같은 정형 화면은 반드시 pattern을 쓴다 — 레이아웃을 직접 창작하지 않는 것이 KRDS 준수의 기본이다. withSiteChrome: true면 정부 배너·헤더·푸터까지 조립한다. 본문 부품은 get_component로 채운다. 필수 입력(pageTitle, 패턴의 필수 슬롯)이 비면 isError 응답으로 채울 값을 안내한다. 반환: 마크다운 — 페이지 HTML(또는 include 조각), 교정 내역, 조립 지침.
| Name | Required | Description | Default |
|---|---|---|---|
| lang | No | <html lang> 언어 코드(BCP 47) — 예: "ko", "en". 기본 "ko" (kwcag:7.1.1) | |
| slots | No | 패턴 슬롯 값(슬롯 이름 → 문자열). 슬롯 이름은 패턴마다 다르다 — 처음엔 slots 없이 pattern만 주고 부르면 필수 슬롯 이름과 설명이 isError 응답으로 온다. pageTitle·lang·assetBase는 슬롯이 아니라 위 입력으로 준다 | |
| output | No | "parts"면 조각(head·header·main·footer·scripts)으로 나눠 준다 — 여러 화면이 공통부를 공유할 때(JSP include, 정적 사이트 공통 조각, 레이아웃 컴포넌트) 손으로 떼어 내지 말고 이것을 써라. 기본 "page" | |
| logoSrc | No | 기관 로고 이미지 경로 — 킷 로고(CSS 배경)를 바꾸는 CSS를 헤더·푸터에 넣는다. 고대비 모드에도 같은 이미지를 쓴다 | |
| orgName | No | 기관명 — withSiteChrome의 헤더·푸터 로고 대체 텍스트가 된다(로고는 CSS 배경이라 유일한 텍스트). 실제 기관명을 넣어라 | |
| pattern | No | KRDS 패턴 이름 — apply-complete, apply-detail, apply-form, apply-issue, apply-list, board-detail, board-list, login-id, login-select, login-tabs, main-portal, search-results, sub-page. 계열 이름(apply, board, login)만 주면 변형 목록과 고르는 기준을 돌려준다 | |
| homeHref | No | 로고 링크 — 기본 "/" | |
| siteMenu | No | withSiteChrome의 헤더 메뉴(1~3단계) — 주면 킷 데모 메뉴(자리 문구 수십 개) 대신 이 트리로 데스크톱 메뉴와 모바일 전체메뉴를 만든다. orgName이 함께 필요하다. 하위가 없는 항목은 href 필수(3단계는 언제나 href), 하위가 있는 항목은 여닫는 버튼이 된다. 예: [{label:"민원",children:[{label:"민원 신청",href:"/apply"}]},{label:"알림",href:"/notice"}] | |
| assetBase | No | 킷 자산 경로 — 기본 "node_modules/krds-uiux". 킷을 복사·CDN으로 서빙하면 그 경로 | |
| loginHref | No | 있으면 헤더에 로그인 링크를 둔다 (siteMenu와 함께) | |
| pageTitle | Yes | 페이지 제목 — <title>과 h1에 들어간다 (kwcag:6.4.2). 비어있으면 안 된다 | |
| withCarousel | No | 캐러셀을 쓸 예정이면 true — swiper 번들 스크립트를 넣는다. pattern 없이 빈 뼈대를 받을 때만 반영된다 | |
| withSiteChrome | No | true면 사이트 공통부(공식 배너·헤더·푸터·운영기관 식별자)를 도구가 올바른 랜드마크 구조로 조립해 포함한다 — 직접 조립보다 이 옵션을 권장. siteMenu·orgName·logoSrc로 메뉴와 로고까지 만든다 |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations only declare read-only/idempotent safety; the description adds the error contract (missing pageTitle or required slots produce an isError that tells you what to supply) and the return shape (markdown with page HTML, accessibility-correction notes, assembly instructions). This is exactly the kind of non-schema behavior an agent needs before calling.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Front-loaded with purpose and call ordering, then pattern requirements, then options, then return format. Dense but nearly every sentence carries a decision the agent must make; the long inline enumeration of 13 pattern names is the only bulky stretch, and it earns its place as the selection menu.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a 13-parameter tool with nested objects and no output schema, the description covers the generation workflow, the pattern-vs-empty-scaffold branch, error behavior, and output composition. Rich per-parameter details (siteMenu tree semantics, assetBase defaults) are left to the schema, which already handles them.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is 100%, so every parameter is already documented, and the description's parameter content (pattern list, withSiteChrome assembling banner/header/footer, slot discovery via isError) largely restates what the schema says. It adds the workflow hint that slots should be omitted on a first call, but nothing about syntax or value formats beyond the schema.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
States a specific verb and resource ('KRDS 페이지의 시작 골격을 반환한다') and immediately distinguishes itself from the sibling get_component by establishing call ordering. An agent can tell what it produces (page HTML or include fragments) without opening the schema.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
Explicitly says to call this before get_component, to use a named pattern for standard screens (로그인·신청·검색·게시판) rather than hand-rolling layout, and to fill body parts with get_component afterward. Both when-to-use and when-not-to-improvise are stated.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
get_requirements컴포넌트 접근성 요건 조회ARead-onlyIdempotent
마크업 없이 컴포넌트 하나의 접근성 요건만 조회한다 — 필수 입력(필드명·규칙), 보장 항목과 근거, 페이지 수준으로 위임되는 항목, 아직 판정되지 않은 질문. 코드 리뷰·설계 검토용이다. 마크업이 필요하면 get_component를 부른다. 반환: 마크다운.
| Name | Required | Description | Default |
|---|---|---|---|
| componentId | Yes | 컴포넌트 id — 'krds:button' 또는 'button'. 목록은 list_components |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already declare readOnly/openWorld=false/idempotent/non-destructive, so the safety profile is covered. The description adds real value beyond that by disclosing the shape of the payload (guaranteed items with rationale, items delegated to page level, unresolved questions) and the return format (markdown). It stops short of describing behavior for an invalid or unknown componentId, which would round this out.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Three tightly packed sentences: purpose and scope first, content inventory second, alternative routing and return format last. Every clause carries information and the scope constraint is front-loaded.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
With no output schema, the description correctly takes on the burden of describing what comes back, listing the four content categories and the markdown format. For a one-parameter read tool this is nearly complete; only error/unknown-id behavior is unaddressed.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100% and the single parameter is documented in-schema with both id forms ('krds:button' or 'button') and a pointer to list_components, so the description has little left to explain. The phrase '필수 입력(필드명·규칙)' could be mistaken for parameter guidance but actually describes returned content, so the description adds no parameter meaning beyond the schema. Baseline 3 is appropriate.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
Names a specific verb and resource (접근성 요건 조회 for a single component) and adds the key scope qualifier '마크업 없이', which distinguishes it from the markup-bearing sibling. It also enumerates what the response contains (필수 입력, 보장 항목과 근거, 페이지 위임 항목, 미판정 질문), so an agent knows exactly what kind of answer this tool yields.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
States the intended context ('코드 리뷰·설계 검토용') and gives an explicit alternative with the selecting condition: '마크업이 필요하면 get_component를 부른다'. That is a clean when-to-use / when-to-use-something-else pair with no inference required.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
get_tokensKRDS 디자인 토큰 조회ARead-onlyIdempotent
킷 디자인 토큰(색·간격·글자 크기 등 CSS 커스텀 프로퍼티)을 조회한다. var() 참조는 실제 값(hex 등)까지 풀어서 준다. 커스텀 CSS에서 색·크기가 필요하면 임의 값 대신 여기서 토큰을 찾아 var()로 쓰라 — 명도 대비 등 접근성 보장이 토큰에 내장돼 있다. query 없이 부르면 분류 안내를 준다. 반환: 토큰 이름·값·풀린 실제 값 목록(최대 80개).
| Name | Required | Description | Default |
|---|---|---|---|
| query | No | 검색어 — 공백 구분 낱말 전부 포함 매칭. 예: "light-color text", "pc-gap" |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already declare readOnly/idempotent/non-destructive, and the description adds substantive behavior beyond them: var() references are resolved to concrete values (hex etc.), results cap at 80 items, and a query-less call returns a classification guide rather than erroring. That is real operational context an agent could not infer from the annotations.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Four short sentences, each carrying distinct information: identity, value resolution, usage rule, and return shape. No repetition of the title or schema, and the most decision-relevant facts come first.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
With no output schema, the description carries the return-value burden and does so: token name, value, and resolved real value, capped at 80. Combined with 100% schema coverage and full annotation coverage, an agent has everything needed to call this correctly.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is 100% and the schema already explains the space-separated AND matching with examples, so the baseline is 3. The description adds meaning the schema does not: omitting query entirely yields a category guide, which tells the agent the parameter is safely optional and how to start exploring.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
States a specific verb and resource ('킷 디자인 토큰 ... 을 조회한다') and immediately scopes it with examples (색·간격·글자 크기, CSS 커스텀 프로퍼티). This clearly separates it from siblings like list_components or get_component, which deal with components rather than tokens.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
Gives an explicit when-to-use rule: if custom CSS needs colors/sizes, look up a token here and use var() instead of an arbitrary value, with the accessibility rationale stated. It also documents the no-query behavior. It does not name any alternative sibling tool or state a when-not condition, so it falls short of a 5.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
inspect_page페이지 시각 상태 점검ARead-onlyIdempotent
렌더된 페이지에서 요소의 계산 스타일(색·배경·폰트·크기·배치·margin·padding·gap)과 폰트 적용 여부를 읽는다. '이 요소가 무슨 색인가', '폰트가 진짜 적용됐나(시스템 폰트 폴백인가)', '어디에 배치됐나'를 확인할 때 임시 playwright 스크립트를 만들지 말고 이 도구를 쓴다. 파일을 쓰지 않는다. 접근성 판정(위반·KWCAG 항목)은 validate_page를 쓴다. 반환: 마크다운 — 문서 제목, 본문 폰트 적용 여부, 셀렉터마다 배치·색·폰트·간격.
| Name | Required | Description | Default |
|---|---|---|---|
| url | No | 점검할 페이지 URL(http/https). url·filePath·html 중 정확히 하나만 준다 | |
| html | No | HTML 문자열 — 최후 수단. url·filePath·html 중 정확히 하나만 준다 | |
| filePath | No | 점검할 로컬 HTML 파일 경로(프로젝트 루트 기준). url·filePath·html 중 정확히 하나만 준다 | |
| selectors | No | 점검할 CSS 셀렉터(최대 20개) — 각 셀렉터의 첫 매칭 요소를 읽고 매칭 개수를 함께 준다. 예: ["h1", ".krds-btn.primary", "#main-content"]. 비우면 문서 제목과 본문 폰트만 준다 |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already declare readOnly/idempotent/non-destructive, so the safety profile is covered; the description reinforces this with '파일을 쓰지 않는다' (no file writes). It also describes the return shape (markdown with title, body font, per-selector layout/color/font/spacing), which goes beyond annotations. Minor gap: nothing on performance/network behavior for fetching URLs, though openWorldHint covers remote access.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Front-loaded with the capability, then alternatives, then return format; every sentence carries weight. Slightly dense with parenthetical examples, but none is wasteful.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
No output schema exists, and the description compensates by specifying the markdown return contents. Combined with 100% schema coverage and read-only annotations, an agent has everything needed to call it correctly.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is 100% and each parameter (url/html/filePath mutual exclusivity, selectors max 20 with example) is already documented in the schema. The description adds little parameter-level semantics beyond reaffirming the tool reads per-selector styled output, so baseline 3 applies.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
States a specific verb (읽는다/reads) and the exact resources it extracts from a rendered page — computed color, background, font, size, layout, margin/padding/gap, and whether the font actually applied. It is clearly separable from sibling validate_page, which handles accessibility judgment.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
Explicitly names the alternative workflows it replaces ('임시 playwright 스크립트를 만들지 말고 이 도구를 쓴다') and routes accessibility/KWCAG checks to validate_page. Both when-to-use and when-not-to-use are stated.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
list_componentsKRDS 컴포넌트 목록ARead-onlyIdempotent
사용 가능한 KRDS 컴포넌트 43종의 색인을 반환한다. 각 줄은 id·이름, 필수 입력 수, 그것을 채우는 필드명(필드:), 변형 이름(변형:)을 담는다 — get_component의 componentId·inputs·variant에 그대로 쓴다. 페이지 전체를 만들 때는 이 도구보다 get_page_scaffold를 먼저 부른다. 마크업은 get_component, 요건만은 get_requirements. 반환: 마크다운 목록 한 장.
| Name | Required | Description | Default |
|---|---|---|---|
No parameters | |||
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already declare readOnlyHint, idempotentHint, and destructiveHint=false, so the safety profile is covered. The description adds genuinely new behavioral detail — the exact per-line content (id·name, required input count, 필드:, 변형:) and the return format (one markdown list) — which no structured field provides. It stops short of full disclosure only in trivial respects, since a zero-parameter static index has little else to disclose.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Four short sentences, front-loaded with what is returned and followed by the routing rules and return format. No filler, and every sentence carries a distinct piece of information.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Zero parameters, no output schema, and the description compensates by describing the return format and the structure of each line. An agent has everything needed to decide when to call it and how to consume the result.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The tool takes zero parameters, so the baseline is 4. The description goes slightly further than required by explaining how the returned fields map onto get_component's componentId, inputs, and variant arguments, giving the agent a concrete handoff path.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
Opens with a specific verb and resource ('사용 가능한 KRDS 컴포넌트 43종의 색인을 반환한다') and even quantifies the corpus size. It immediately distinguishes itself from get_component, get_requirements, and get_page_scaffold by naming each alternative in context.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
Explicitly routes the agent: whole-page construction should call get_page_scaffold first instead of this tool, markup needs get_component, and requirements-only needs get_requirements. Both when-to-use and when-not-to-use are stated with named alternatives.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
validate_page완성 페이지 KWCAG 재검사ADestructive
조립·변환이 끝난 페이지를 실제 브라우저로 열어 KWCAG 2.2 기준으로 재검사한다. axe-core 전수 실행을 KWCAG 33항목으로 번역하고, 보류된 명도 대비는 직접 실측하며, 수동 확인이 필요한 항목은 확인 절차와 함께 명시한다 — 자동 판정은 접근성 이슈의 일부이므로 이 도구의 통과가 심사 통과를 뜻하지 않는다. 템플릿을 프레임워크로 변환한 뒤, 페이지를 조립한 뒤, 콘텐츠를 채운 뒤에 호출하라. url(dev 서버·배포본) 또는 filePath(로컬 HTML)를 권장한다 — 상대 경로 자산이 그대로 해석된다. 파일을 쓴다: outDir(기본 reports/) 아래 화면별 폴더에 리포트(md)·원시 데이터(json)·스크린샷 2장을 남기고 SUMMARY.md를 갱신한다. keepRuns를 주면 보존 개수를 넘은 이전 검사 기록을 지운다. 이 기록을 Stop 훅과 gate 명령이 읽어 작업 종료를 판정한다. 요소 하나의 색·배치·폰트만 확인할 때는 inspect_page를 쓴다. 반환: 마크다운 — 결론 한 줄(위반 수·검사 무효·공통부 누락), 직전 대비, KRDS 사용 문제, 리소스 오류, 산출물 경로, 리포트 전문.
| Name | Required | Description | Default |
|---|---|---|---|
| url | No | 검사할 페이지 URL(http/https) — dev 서버·배포본. url·filePath·html 중 정확히 하나만 준다 | |
| html | No | HTML 문자열 — 상대 경로 자산이 깨지므로 최후 수단(임시 파일로 써서 검사한다). url·filePath·html 중 정확히 하나만 준다 | |
| outDir | No | 리포트·스크린샷 저장 디렉터리(기본 reports/, 프로젝트 루트 기준) — 화면별 하위 폴더에 검사 이력이 쌓인다. gate·Stop 훅은 reports/를 읽으니 바꾸지 않는 것을 권장 | |
| screen | No | 화면 이름 — 검사 기록 폴더 이름이 된다. 같은 화면을 호스트·포트를 바꿔 검사해도 이력이 이어지고, 상태 화면(actions)은 다른 이름으로 따로 기록하라 — 예: "apply-form", "apply-form-오류". 없으면 url·파일 이름에서 만든다 | |
| actions | No | 검사 전에 실행할 상호작용(순서대로, 실제 클릭·키 입력) — 모달 열림·탭 전환·오류 표시 같은 상태 화면을 검사할 때. click·fill은 selector, fill은 value, press는 key(Enter·Escape·ArrowRight 등, selector를 주면 그 요소에 초점 뒤), wait는 selector(보일 때까지) 또는 ms. 예: [{type:"click",selector:"#apply"},{type:"wait",selector:".form-hint-invalid"}]. 한 단계라도 실패하면 검사 무효로 기록돼 gate가 막는다. 임시 빌드로 초기값을 바꾸지 말고 이것을 쓴다 | |
| filePath | No | 검사할 로컬 HTML 파일 경로 — 상대 경로는 프로젝트 루트(MCP 서버 실행 위치) 기준. url·filePath·html 중 정확히 하나만 준다 | |
| keepRuns | No | 화면별로 남길 최근 검사 수 — 첫 회(기준 증빙)는 항상 따로 남기므로 결과는 첫 회 + 최근 N회(최대 N+1개)다. 미지정이면 환경 변수 KRDS_A11Y_KEEP_RUNS, 그것도 없으면 전부 보존 | |
| sourceDir | No | url(dev 서버·배포본)을 검사할 때 그 화면을 만드는 소스 폴더(프로젝트 루트 기준) — 예: "src", ["src", "public"], JSP는 "src/main/webapp". 넘기면 gate가 검사 뒤 소스가 바뀌었는지(낡음)를 판정해 재검사를 요구한다. 없으면 url 검사의 낡음은 판정 불가 |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations declare destructiveHint=true and readOnlyHint=false; the description earns that by disclosing exactly what is written (per-screen folder with md report, raw json, 2 screenshots, plus SUMMARY.md update) and what is deleted (runs beyond keepRuns). It also discloses a critical caveat: a pass here does not mean audit pass, because automated judgment covers only part of accessibility issues. It further notes the records are read by the Stop hook and gate command, explaining downstream side effects.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
It is long and dense, but front-loaded with purpose, then caveat, then invocation timing, then side effects, then the sibling pointer and return shape. Nearly every clause carries decision-relevant content; only the return-format sentence is somewhat compacted into a dense list.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
With 8 optional parameters, no output schema, and a destructive, open-world operation, the description supplies what the structured data cannot: artifact layout, gate/hook dependency, retention deletion, ambiguity (pass ≠ audit pass), and the return value's shape (one-line conclusion, delta vs previous, KRDS issues, resource errors, artifact paths, full report). Nothing an agent needs to invoke it correctly is missing.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is 100%, so the baseline is 3, but the description adds real semantics: url/filePath are preferred because relative-path assets resolve, while html breaks them; keepRuns is framed as deletion of prior run records beyond a retention count. It does not add syntax detail for screen, sourceDir, or actions beyond the schema, so it is informative rather than exhaustive.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description states a specific verb and resource: re-inspect a fully assembled/converted page in a real browser against KWCAG 2.2, running axe-core fully and translating results into 33 KWCAG items, with manual contrast measurement. It also draws the boundary against the sibling inspect_page ('요소 하나의 색·배치·폰트만 확인할 때는 inspect_page'). An agent can identify and distinguish this from all listed siblings without opening any schema.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
It gives explicit call ordering ('템플릿을 프레임워크로 변환한 뒤, 페이지를 조립한 뒤, 콘텐츠를 채운 뒤에 호출하라'), recommends url or filePath with a reason (relative assets resolve) and reserves html as a last resort. It names the alternative tool and the condition that selects it ('inspect_page'). When and when-not guidance is complete.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Tool Schema Changelog
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
6 tool updates
v0.2.0- Changed
get_component2 fields changed- changed
Input schema / properties / inputs / descriptionPrevious value: -"필수 입력 값 — 필드명: 값. 배열(헤더 목록 등)은 쉼표로 이어 받는다. 반복 항목은 객체 배열로 줘도 된다 — 예: crumbs: [{crumbLabel, href}, …]. 바깥 키 이름(crumbs·items 등)은 자유이고 항목 안의 키가 필드명이다. 상태 입력: required(필수 표시)·checked(선택된 항목)는 불리언, errorMessage(오류 상태), currentPage(현재 쪽). 확인용 입력(modalPlacement·captionSync 등 구현 의무 확인)은 true를 준다. breadcrumb·pagination·radio_button·checkbox·text_input·select는 값을 넣은 마크업을 만들어 준다. 미제공 시 요건 안내만 반환하고 마크업은 주지 않는다"New value: +"필드명 → 값. 필드명은 list_components 각 줄의 '필드:' 목록에 있다. 여러 값은 쉼표로 잇거나 배열로, 반복 항목은 객체 배열로 준다(예: crumbs: [{crumbLabel, href}]). 확인용 입력(modalPlacement 등)은 true" - changed
Input schema / properties / variant / descriptionPrevious value: -"변형 이름 — 예: 'icon', 'size'. 킷 파일명 접미사와 같다"New value: +"변형 이름 — list_components 각 줄의 '변형:' 목록 중 하나(예: button의 'icon'). 없으면 기본형"
- Changed
get_icon_fix_css1 field changed- changed
Input schema / properties / assetBase / descriptionPrevious value: -"킷 자산 경로 (기본 node_modules/krds-uiux, 예: /krds-uiux)"New value: +"CSS의 url()이 가리킬 킷 자산 경로 — 페이지에서 킷을 서빙하는 경로와 같아야 한다. 기본 \"node_modules/krds-uiux\", 예: \"/krds-uiux\""
- Changed
get_page_scaffold5 fields changed- changed
Input schema / properties / lang / descriptionPrevious value: -"주 언어 코드. 기본 \"ko\" (kwcag:7.1.1)"New value: +"<html lang> 언어 코드(BCP 47) — 예: \"ko\", \"en\". 기본 \"ko\" (kwcag:7.1.1)" - changed
Input schema / properties / pattern / descriptionPrevious value: -"KRDS 패턴 이름 (예: \"login\"). 정형 화면이면 지정하라 — 완성 구조를 반환한다"New value: +"KRDS 패턴 이름 — apply-complete, apply-detail, apply-form, apply-issue, apply-list, board-detail, board-list, login-id, login-select, login-tabs, main-portal, search-results, sub-page. 계열 이름(apply, board, login)만 주면 변형 목록과 고르는 기준을 돌려준다" - changed
Input schema / properties / siteMenu / descriptionPrevious value: -"withSiteChrome의 헤더 메뉴(1~3단계) — 주면 킷 데모 메뉴(자리 문구 수십 개) 대신 이 트리로 데스크톱 메뉴와 모바일 전체메뉴를 만든다. 하위가 없는 항목은 href 필수, 하위가 있는 항목은 여닫는 버튼이 된다. 예: [{label:\"민원\",children:[{label:\"민원 신청\",href:\"/apply\"}]},{label:\"알림\",href:\"/notice\"}]"New value: +"withSiteChrome의 헤더 메뉴(1~3단계) — 주면 킷 데모 메뉴(자리 문구 수십 개) 대신 이 트리로 데스크톱 메뉴와 모바일 전체메뉴를 만든다. orgName이 함께 필요하다. 하위가 없는 항목은 href 필수(3단계는 언제나 href), 하위가 있는 항목은 여닫는 버튼이 된다. 예: [{label:\"민원\",children:[{label:\"민원 신청\",href:\"/apply\"}]},{label:\"알림\",href:\"/notice\"}]" - changed
Input schema / properties / slots / descriptionPrevious value: -"패턴 슬롯 값 — 필수 슬롯 미입력 시 무엇을 채울지 안내만 반환한다"New value: +"패턴 슬롯 값(슬롯 이름 → 문자열). 슬롯 이름은 패턴마다 다르다 — 처음엔 slots 없이 pattern만 주고 부르면 필수 슬롯 이름과 설명이 isError 응답으로 온다. pageTitle·lang·assetBase는 슬롯이 아니라 위 입력으로 준다" - changed
Input schema / properties / withCarousel / descriptionPrevious value: -"캐러셀 사용 예정이면 true — swiper 번들 스크립트 포함"New value: +"캐러셀을 쓸 예정이면 true — swiper 번들 스크립트를 넣는다. pattern 없이 빈 뼈대를 받을 때만 반영된다"
- Changed
get_requirements1 field changed- changed
Input schema / properties / componentId / descriptionPrevious value: -"컴포넌트 id — 'krds:button' 또는 'button'"New value: +"컴포넌트 id — 'krds:button' 또는 'button'. 목록은 list_components"
- Changed
inspect_page5 fields changed- changed
Input schema / properties / filePath / descriptionPrevious value: -"점검할 로컬 HTML 파일 경로"New value: +"점검할 로컬 HTML 파일 경로(프로젝트 루트 기준). url·filePath·html 중 정확히 하나만 준다" - changed
Input schema / properties / html / descriptionPrevious value: -"HTML 문자열 — 최후 수단"New value: +"HTML 문자열 — 최후 수단. url·filePath·html 중 정확히 하나만 준다" - changed
Input schema / properties / selectors / descriptionPrevious value: -"점검할 CSS 셀렉터 목록 (각각 첫 매칭 요소를 읽음)"New value: +"점검할 CSS 셀렉터(최대 20개) — 각 셀렉터의 첫 매칭 요소를 읽고 매칭 개수를 함께 준다. 예: [\"h1\", \".krds-btn.primary\", \"#main-content\"]. 비우면 문서 제목과 본문 폰트만 준다" - changed
Input schema / properties / url / descriptionPrevious value: -"점검할 페이지 URL (http/https)"New value: +"점검할 페이지 URL(http/https). url·filePath·html 중 정확히 하나만 준다" - added
Input schema / properties / url / patternAdded value: +"^https?:\\/\\/"
- Changed
validate_page14 fields changed- added
Input schema / properties / actions / items / properties / key / descriptionAdded value: +"press의 키 이름(Playwright 표기) — 예: \"Enter\", \"Escape\", \"ArrowRight\"" - added
Input schema / properties / actions / items / properties / ms / descriptionAdded value: +"wait의 대기 시간(밀리초, 최대 30000)" - added
Input schema / properties / actions / items / properties / ms / maximumAdded value: +30000 - added
Input schema / properties / actions / items / properties / ms / minimumAdded value: +0 - changed
Input schema / properties / actions / items / properties / ms / typePrevious value: -"number"New value: +"integer" - added
Input schema / properties / actions / items / properties / selector / descriptionAdded value: +"대상 CSS 셀렉터 — 예: \"#apply\", \".open-modal\"" - added
Input schema / properties / actions / items / properties / type / descriptionAdded value: +"동작 — click·fill은 selector 필요, press는 key, wait는 selector 또는 ms" - added
Input schema / properties / actions / items / properties / value / descriptionAdded value: +"fill로 넣을 값" - changed
Input schema / properties / filePath / descriptionPrevious value: -"검사할 로컬 HTML 파일 경로"New value: +"검사할 로컬 HTML 파일 경로 — 상대 경로는 프로젝트 루트(MCP 서버 실행 위치) 기준. url·filePath·html 중 정확히 하나만 준다" - changed
Input schema / properties / html / descriptionPrevious value: -"HTML 문자열 — 상대 경로 자산이 깨지므로 최후 수단"New value: +"HTML 문자열 — 상대 경로 자산이 깨지므로 최후 수단(임시 파일로 써서 검사한다). url·filePath·html 중 정확히 하나만 준다" - changed
Input schema / properties / outDir / descriptionPrevious value: -"리포트·스크린샷 저장 디렉터리 (기본 reports/) — 화면별 하위 폴더에 검사 이력이 쌓인다"New value: +"리포트·스크린샷 저장 디렉터리(기본 reports/, 프로젝트 루트 기준) — 화면별 하위 폴더에 검사 이력이 쌓인다. gate·Stop 훅은 reports/를 읽으니 바꾸지 않는 것을 권장" - changed
Input schema / properties / sourceDir / descriptionPrevious value: -"url(dev 서버·배포본)을 검사할 때 그 화면을 만드는 소스 폴더 — 예: \"src\", [\"src\", \"public\"], JSP는 \"src/main/webapp\". 넘기면 gate가 검사 뒤 소스가 바뀌었는지(낡음)를 판정해 재검사를 요구한다. 없으면 url 검사의 낡음은 판정 불가"New value: +"url(dev 서버·배포본)을 검사할 때 그 화면을 만드는 소스 폴더(프로젝트 루트 기준) — 예: \"src\", [\"src\", \"public\"], JSP는 \"src/main/webapp\". 넘기면 gate가 검사 뒤 소스가 바뀌었는지(낡음)를 판정해 재검사를 요구한다. 없으면 url 검사의 낡음은 판정 불가" - changed
Input schema / properties / url / descriptionPrevious value: -"검사할 페이지 URL (http/https)"New value: +"검사할 페이지 URL(http/https) — dev 서버·배포본. url·filePath·html 중 정확히 하나만 준다" - added
Input schema / properties / url / patternAdded value: +"^https?:\\/\\/"
9 tool updates
v0.1.0- First observed
get_component - First observed
get_framework_guide - First observed
get_icon_fix_css - First observed
get_page_scaffold - First observed
get_requirements - First observed
get_tokens - First observed
inspect_page - First observed
list_components - First observed
validate_page
TDQS
Scored across 9 tools
Descriptions actively cross-reference each other to draw boundaries (get_requirements vs get_component for markup, inspect_page vs validate_page for element-level vs page-level checks, list_components vs get_component for index vs detail). The only mild overlap is get_requirements being a subset of get_component's output, but the 'requirements-only for review' framing makes intent clear.
All nine tools use snake_case verb_object naming (list_components, get_tokens, inspect_page, validate_page, get_page_scaffold, get_framework_guide). The verbs are varied but consistently front-loaded, giving a predictable pattern throughout.
Nine tools is well-scoped for a design-system assist server: discovery, detail, requirements, tokens, scaffolding, inspection, validation, and two targeted fix/guide tools. Each tool covers a distinct stage of the build-inspect-validate workflow.
The surface covers the full lifecycle from scaffolding through component assembly, token lookup, runtime inspection, and accessibility validation, plus framework and icon-bug escape hatches. Minor gaps exist (no explicit pattern enumeration or component search beyond list_components), but agents can work around these.
Maintenance
Related MCP Connectors
AI development agent using Kendo UI to rapidly create and style quality web UIs or Pages.
Give your agent a real design system: tokens, measured WCAG contrast, and rules to follow.
Accessibility compliance for AI coding tools. WCAG 2.2 reviews with shared evidence.
Live React design-system APIs, patterns, and code validation so AI agents build real UI, not slop.
Related MCP Servers
- AlicenseBqualityDmaintenanceIntegrates Korea's government digital design system (KRDS) with AI assistants, enabling users to search components, validate code compliance, and access design tokens for Korean government digital services.91ISC
- AlicenseAqualityDmaintenanceEnables AI agents to perform comprehensive web accessibility checks (WCAG 2.1/2.2) including color contrast analysis, ARIA validation, and full accessibility report generation without requiring any API key.830 PyPIMIT
- AlicenseNot gradedqualityDmaintenanceProvides AI agents with web accessibility analysis tools via MCP, enabling checks for alt text, heading hierarchy, color contrast, ARIA validation, and form accessibility.25 npmMIT
- AlicenseNot gradedqualityDmaintenanceProvides Korean government design system (KRDS) guidelines to AI models via MCP, enabling AI assistants to comply with KRDS standards when developing government websites and digital services.9 npm15MIT

