Unofficial MCP Server for USWDS

Name: Unofficial MCP Server for USWDS
Author: bibekpdl

โดย bibekpdlรุ่น 0.2.1i★ –iรันบนเครื่อง

ชื่อใน registryio.github.bibekpdl/uswds-mcp

ติดตั้ง

ภาพรวม

คำอธิบายจากผู้ทำ (ภาษาอังกฤษตามต้นฉบับ)

Unofficial USWDS MCP: official markup, class-aware validator, and page composer for AI tools.

สามเสาของ PopNx MCP

สามเรื่องนี้ไม่รวมเป็นคะแนนเดียว เพราะความเห็น การวัด และความนิยม เป็นคนละเรื่องกัน

เสียงผู้ใช้iยังไม่มีรีวิวรีวิวเปิดพร้อมระบบบัญชีในขั้นถัดไป
ผลตรวจเบื้องต้นของเราiผ่าน 1 จาก 1 ข้อตรวจจากข้อมูลที่เปิดอยู่ ยังไม่ได้สแกนโค้ด
การใช้งานiยังใหม่มาก↓ 70/สัปดาห์ · ★ –

ใช้ทำอะไรได้

ตัวนี้ยังไม่ได้เรียบเรียงเป็นภาษาไทย ด้านล่างคือข้อเท็จจริงที่เราอ่านจาก registry

การเชื่อมต่อ: รันบนเครื่อง
ช่องทาง (transport): stdio
หมวด: อื่น ๆ

ติดตั้ง

เลือกโปรแกรม AI ที่คุณใช้ แล้วคัดลอกค่าตั้งไปวาง

ก่อนติดตั้ง

ผลตรวจเบื้องต้น: ผ่าน 1 จาก 1 ข้อ
รันในเครื่องคุณด้วยสิทธิ์ของผู้ใช้คุณ (ไฟล์ อินเทอร์เน็ต แอปต่าง ๆ)
ทะเบียนไม่ได้ระบุ key ที่ต้องใส่

ต้องเตรียมก่อน

npmติดตั้ง Node.js (มีคำสั่ง npx) ในเครื่อง

คุณใช้แอปไหน

ClaudeClaude CodeCursorVS CodeChatGPT

เลือกแอปด้านบน เราจำไว้ให้ ครั้งหน้าปุ่มจะขึ้นว่า “ติดตั้งลง …”

เปิด Claude Desktop → Settings → Developer → Edit Config แล้ววางค่านี้ในไฟล์ claude_desktop_config.json

{
  "mcpServers": {
    "uswds": {
      "command": "npx",
      "args": [
        "-y",
        "uswds-mcp"
      ]
    }
  }
}

พิมพ์คำสั่งนี้ใน Terminal

claude mcp add uswds -- npx -y uswds-mcp

เปิดใน Cursor

หรือคัดลอกค่าตั้งเอง

วางในไฟล์ .cursor/mcp.json ของโปรเจกต์ หรือ ~/.cursor/mcp.json

{
  "mcpServers": {
    "uswds": {
      "command": "npx",
      "args": [
        "-y",
        "uswds-mcp"
      ]
    }
  }
}

เบราว์เซอร์จะถามก่อนเปิดแอป จากนั้นแอปแสดงค่าตั้งให้ตรวจแล้วกดยืนยัน ช่อง key เว้นว่างไว้ให้คุณใส่เอง

เปิดใน VS Code

หรือคัดลอกค่าตั้งเอง

วางในไฟล์ .vscode/mcp.json ของโปรเจกต์

{
  "servers": {
    "uswds": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "uswds-mcp"
      ]
    }
  }
}

ตัวนี้รันในเครื่องคุณ แต่ ChatGPT ต่อได้เฉพาะ server บนอินเทอร์เน็ต ลองเลือกแอปอื่น

ตัวเลือกเก็บในคุกกี้บนเครื่องนี้ ไม่ต้องมีบัญชี

ค่าตั้งนี้สร้างจากข้อมูลใน registry ของผู้ทำ ถ้าไม่ตรงกับ README ให้เชื่อ README

ทำอะไรได้บ้าง

รันในเครื่องคุณ รายการเครื่องมือจะขึ้นในแอป AI หลังติดตั้ง

ผลตรวจเบื้องต้นi

เราตรวจจากข้อมูลที่ใครก็เปิดดูได้ ยังไม่ได้อ่านโค้ด ข้อที่ไม่เกี่ยวกับตัวนี้ไม่นับในตัวหาร · ตรวจเมื่อ 8 พ.ย. 2569

✓ ผ่าน
ตัวตนผู้ทำตรงกับ repo
ชื่อใน registry ยืนยันด้วยบัญชี GitHub bibekpdl ซึ่งเป็นเจ้าของ repo
… ยังไม่ตรวจ
ยังมีคนดูแล
ยังไม่ได้อ่านข้อมูล repo จาก GitHub
… ยังไม่ตรวจ
มีสัญญาอนุญาต (license)
ยังไม่ได้อ่านข้อมูล repo จาก GitHub
– ไม่เกี่ยว
endpoint ตอบ
ตัวนี้รันบนเครื่องคุณ ไม่มี endpoint บนอินเทอร์เน็ต
– ไม่เกี่ยว
ล็อกอินแบบ OAuth
ตัวนี้รันบนเครื่อง ใช้ค่าที่ตั้งในเครื่องแทน
… ยังไม่ตรวจ
คำอธิบายเครื่องมือไม่มีคำสั่งแอบแฝง
รันในเครื่องคุณ เราอ่านรายการเครื่องมือได้เฉพาะตัวที่มี endpoint บนอินเทอร์เน็ต

เทียบกับตัวอื่นในหมวด อื่น ๆi

ดาวมากกว่า 0% ของอีก 18474 ตัวในหมวดนี้
ส่งรุ่นใหม่เข้า registry ล่าสุดกว่า 75% ของอีก 18474 ตัวในหมวดนี้
ผลตรวจเบื้องต้นดีกว่าหรือเท่ากับ 100% ของอีก 18474 ตัวในหมวดนี้

เทียบกับทุก server ที่ยังใช้งานในหมวดนี้ทั้งทะเบียน ดาวนับเฉพาะเมื่อผู้ลงทะเบียนเป็นเจ้าของ repo

คำถามที่พบบ่อย

Unofficial MCP Server for USWDS ปลอดภัยไหม?

จากการตรวจเบื้องต้นของเรา ผ่าน 1 จาก 1 ข้อที่ตรวจได้ เรายังไม่ได้อ่านโค้ด ก่อนใส่กุญแจหรือ token ให้ดูว่า server ขอสิทธิ์อะไร และเลือกกุญแจที่ทำได้เท่าที่จำเป็น

ต้องใช้กุญแจหรือรหัสอะไรบ้าง?

registry ไม่ได้ระบุว่าต้องใช้กุญแจ แต่บางตัวจะขอให้ล็อกอินตอนใช้ครั้งแรก

ตัวนี้รันบนเครื่องหรือบนคลาวด์?

รันบนเครื่องของคุณ โปรแกรม AI จะเปิด server ขึ้นมาเองเมื่อใช้ ข้อมูลไม่ต้องผ่านเซิร์ฟเวอร์ของผู้ทำ (ยกเว้นตัวที่ไปเรียกบริการออนไลน์ต่อ)

ยังมีคนดูแลอยู่ไหม?

repo บน GitHub มีการแก้โค้ดล่าสุด – และส่งรุ่นล่าสุด (0.2.1) เข้า registry 14 วันที่ผ่านมา

ใช้กับโปรแกรมไหนได้บ้าง?

โปรแกรมที่รองรับ MCP เช่น Claude Desktop, Claude Code, Cursor และ VS Code ตัวนี้ต้องมี Node.js ในเครื่องด้วย

มีตัวไหนใช้แทนได้บ้าง?

ในหมวดเดียวกันมี Spec Driven Development, Remote Desktop Commander, SwarmMemo

ตัวที่ใช้แทนได้

server หมวดเดียวกันจากผู้ทำคนอื่น เรียงตามดาว

อ่านการ์ด:↓ ดาวน์โหลดต่อสัปดาห์i★ ดาว GitHubiสามเสา: รีวิว · ผลตรวจ · การใช้งานiอัปเดต = วันที่ส่งรุ่นล่าสุดเข้า registryi

Spec Driven Development

MCP Server that facilitates spec-driven development workflows, not just Vibe Coding.

โดย formulahendryเริ่มต้น↓ 66/สัปดาห์★ 440อัปเดต 14 เดือนที่ผ่านมา

รันบนเครื่อง

ติดตั้ง

Remote Desktop Commander

Remote Desktop Commander: use files, terminal and processes on your own computers from any AI app.

โดย desktop-commanderกำลังโต★ 211อัปเดต 3 วันที่ผ่านมา

รันบนคลาวด์✓ desktopcommander.app

ติดตั้ง

SwarmMemo

Talk with agent swarms: rooms, private messages and paid tasks for AI agents

โดย Hugo0ยังใหม่มากอัปเดต วันนี้

รันบนคลาวด์✓ swarmmemo.com

ติดตั้ง

README จากผู้ทำ

เปิดอ่าน README

ส่วนนี้คัดจาก repo ของผู้ทำตามต้นฉบับ PopNx MCP ไม่ได้ตรวจหรือรับรองเนื้อหา ตัด HTML รูปภาพ และสคริปต์ออกแล้ว ลิงก์จะพาออกนอกเว็บ

uswds-mcp

Make AI-generated government UI actually USWDS-compliant.

An MCP server that gives Claude, Cursor, Copilot, Windsurf and any other MCP client the official [U.S. Web Design System](https://designsystem.digital.gov/) markup, a validator that knows every real USWDS class, and a page composer that outputs accessible, validated pages.

Unofficial and independent. Not affiliated with, endorsed by, or maintained by GSA, TTS, or the official USWDS team. See NOTICE.md.

The problem

LLMs write USWDS from memory. They invent usa-btn, forget the usa-overlay that makes the mobile menu work, put usa-card markup without its container, and wire up accordions to nothing. The result *looks* plausible and is subtly broken.

uswds-mcp closes that loop:

recommend_uswds_structure  →  get_component_markup  →  compose_uswds_page  →  validate_uswds_markup

(what to use) (official HTML) (accessible page) (fix until 0 errors)

Without	With uswds-mcp
Class names recalled from memory	Official HTML rendered from the `@uswds/uswds` templates (178 snippets, ~70 components and page templates, every variant)
"Looks right"	Validator rejects any `usa-*` class that is not in the USWDS stylesheet, with a did-you-mean
Missing structure goes unnoticed	BEM, required children, ARIA wiring, form control structure, header overlay, scripts, heading order, duplicate ids, link/image/button names
Stock template output	`compose_uswds_page` builds pages from your real sections; zero axe-core violations in CI

What a validator finding looks like

"severity": "error", "rule": "unknown-class", "message": "\"usa-alrt\" is not a class defined by USWDS.", "selector": "div.usa-alrt", "snippet": " ", "suggestion": "Did you mean \"usa-alert\"?" }

Findings carry the offending element, a fix suggestion, the component to look up, and a docs link, so the model can repair its own output.

Quick start

npx -y uswds-mcp

Add it to your MCP client:

"mcpServers": { "uswds": { "command": "npx", "args": ["-y", "uswds-mcp"] } } }

Claude Code: claude mcp add uswds -- npx -y uswds-mcp

Setup for Claude Desktop, Cursor, VS Code, Windsurf and others: docs/CLIENTS.md. Ready-made configs are in examples/.

No network, API key, or ingest step needed: the data ships in the package.

Tools

Tool	Use
`get_component_markup`	Official HTML for a component/page template and its variants (`accordion`, `footer` + `slim`, `sign-in`, ...). Understands everyday names (`dropdown` → select).
`compose_uswds_page`	Build a full page from structured sections: hero, content, alert, summary box, cards, process list, step indicator, accordion, table, form, contact.
`validate_uswds_markup`	Validate fragments or full pages: real class names, component structure, forms, ARIA, accessibility basics.
`find_uswds_classes`	Look up real classes, including utilities and responsive variants (`margin top 2`, `tablet grid col 6`).
`generate_uswds_page`	Quick start from free-text requirements; returns an editable section spec, bracketed placeholders, and its own validation.
`recommend_uswds_structure`	USWDS-first structure for a service or page.
`search_uswds`	Search docs, accessibility and usage guidance (with synonym expansion).
`get_component` / `get_pattern` / `get_template`	Structured guidance, plus the canonical markup for components.
`get_uswds_integration_recipe`	Framework setup for Next.js, Vite/React, static HTML, Rails, Drupal.
`validate_uswds_project_setup`	Catch wrong CSS import paths, missing scripts, CDN use, copied `dist`, global CSS risk.

All tools are read-only. See docs/TOOLS.md for arguments and recommended sequences.

Resources: uswds://component/{slug}, uswds://pattern/{slug}, uswds://template/{slug}, uswds://token/{category}, uswds://package/{name} Prompts: build_agency_website, build_service_page, audit_uswds_page, convert_page_to_uswds, integrate_uswds_in_project

Example

*"Build a page where residents renew a fishing permit: eligibility, fees table, steps, FAQ, contact."*

The model calls compose_uswds_page and gets back a complete page with banner, skipnav, header (with usa-overlay), breadcrumbs, summary box, striped table with caption and scoped headers, process list, accordion, contact details, slim footer and identifier, plus a list of the placeholders that still need real content, and a validation result.

Prefer to see it first? Run the scorecard:

npm run eval

scenario                        unknown classes  errors  warnings  axe violations

'Apply for housing assistance' 0 0 0 0 'Renew a fishing permit' 0 0 0 0 ...

Does it help?

In a small test (5 tasks, same model, with and without the server) pages built with uswds-mcp had 0 validator errors on 5 of 5 pages, versus 1 of 5 without it. The model did not invent class names in either case; what it missed without the tools was structure, such as the header overlay that makes the mobile menu work, banner internals, and accordion button types. It is a small, single-run sample, so see the caveats and method in docs/COMPARISON.md.

How it works

Ingest (npm run ingest): renders every official @uswds/uswds twig template with its JSON fixtures into canonical HTML, extracts all class names from the official stylesheet, and indexes the official docs (uswds-site).
Validate against ground truth: the validator is tested against *every* official snippet (they must pass) and against a corpus of 30 typical LLM mistakes (they must be caught).
Stay current: docs and markup come from the same USWDS version (enforced by a test), and a monthly workflow re-ingests and opens a PR.

Current data: USWDS 3.14.0.

Limits

Static analysis. It cannot judge color contrast, reading order on rendered pages, or real screen-reader behavior. USWDS components do not by themselves make a site Section 508 compliant; keep testing with axe, keyboard and screen readers.
Custom (non-usa-) classes are allowed and not validated.
Upstream fixture text in angle brackets (e.g. ) is placeholder content.

Develop

npm install

npm test # unit, self-consistency over official markup, MCP end-to-end, axe-core npm run eval npm run ingest # refresh from upstream

See CONTRIBUTING.md and the CHANGELOG.

License

MIT. See NOTICE.md for USWDS attribution and the licensing notes for indexed USWDS material.

Unofficial MCP Server for USWDS

ภาพรวม

สามเสาของ PopNx MCP

ใช้ทำอะไรได้

ติดตั้ง

ก่อนติดตั้ง

ทำอะไรได้บ้าง

ผลตรวจเบื้องต้นi

ตัวตนผู้ทำตรงกับ repo

ยังมีคนดูแล

มีสัญญาอนุญาต (license)

endpoint ตอบ

ล็อกอินแบบ OAuth

คำอธิบายเครื่องมือไม่มีคำสั่งแอบแฝง

เทียบกับตัวอื่นในหมวด อื่น ๆi

คำถามที่พบบ่อย

ตัวที่ใช้แทนได้

Spec Driven Development

Remote Desktop Commander

SwarmMemo

README จากผู้ทำ

uswds-mcp

The problem

What a validator finding looks like

Quick start

Tools

Example

Does it help?

How it works

Limits

Develop

License