uswds-mcp
by bibekpdl
Server Configuration
Describes the environment variables required to run the server.
| Name | Required | Description | Default |
|---|---|---|---|
No arguments | |||
Instructions
Guidance the server publishes about itself, which clients place ahead of the tool catalog so the model reads it before choosing anything.
This server publishes no instructions, or was last inspected before Glama recorded them.
Capabilities
Features and capabilities supported by this server
Protocol revision2025-11-25
| Capability | Details |
|---|---|
| tools | {
"listChanged": true
} |
| prompts | {
"listChanged": true
} |
| resources | {
"listChanged": true
} |
Tools
Functions exposed to the LLM to take actions
| Name | Description |
|---|---|
| search_uswdsC | Search structured USWDS docs and implementation records. |
| get_componentC | Return structured component guidance, package metadata, accessibility guidance, examples, and source links. |
| get_patternC | Return structured pattern guidance and related implementation notes. |
| get_templateC | Return structured template guidance and markup references. |
| recommend_uswds_structureC | Recommend a USWDS-first page or site structure for an agency service. |
| generate_uswds_pageC | Generate framework-neutral USWDS HTML and framework adaptation notes. |
| validate_uswds_markupC | Static validation for common USWDS markup, accessibility, and token-usage issues. |
| get_uswds_integration_recipeC | Return framework-specific USWDS setup guidance for npm, assets, JavaScript, CSS, and migration. |
| validate_uswds_project_setupC | Check provided project files for common USWDS framework integration issues such as import paths, assets, scripts, CDN usage, and global CSS risk. |
Prompts
Interactive templates invoked by user choice
| Name | Description |
|---|---|
| build_agency_website | Plan and build a USWDS-first agency website. |
| build_service_page | Create a task-focused USWDS service page. |
| audit_uswds_page | Audit markup for USWDS usage and accessibility risks. |
| convert_page_to_uswds | Convert non-USWDS markup into USWDS-first markup. |
| integrate_uswds_in_project | Plan framework-specific USWDS package, asset, CSS, and JavaScript integration. |
Resources
Contextual data attached and managed by the client
| Name | Description |
|---|---|
| Accordion | **Code header areas in the accordion as buttons.** Using a assures accordions are usable with both screen readers and keyboards. **Use meaningful expansion button labels.** Aim for informative labels like “Explore federal compliance checklists” rather than vague ones like “Click... |
| Alert | **Don’t visually hide alert messages and then make them visible when they are needed.** Users of older assistive technologies may still be able to perceive the alert messages even if they are not currently applicable. **Use the proper ARIA role.** The ARIA role attribute can... |
| Banner | {:.site-note} **Note:** Banners and identifiers are core components. We recommend using both core components on most sites. Together, they are the most recognizable and standardized design elements of a government site. You should use the banner to identify your site as an... |
| Breadcrumb | A breadcrumb bar shows the location of the current page in the site structure. It's like a path from the current page back to the home page, showing each level of organization in-between. Breadcrumbs allow a user to navigate “up” to a parent section instead of “Back” to the... |
| Button | **Buttons should display a visible focus state when users tab to them.** **Use standard markup.** Avoid using or tags to create buttons. Screen readers don't automatically know either is a usable button. **Screen readers handle buttons and links differently.** When styling links... |
| Button group | {:.usa-content-list} **Convey relationship.** If not using a list element, give the parent element role="group" in order to convey to screen readers that actions are part of a group. If using as part of a toolbar, use role="toolbar". |
| Card | A **card** is often a subset or summary of a larger idea. It acts as an entry point to more detailed information. This summary can contain a variety of content types, such as text, images and multimedia, or buttons and links. An individual card is typically **a member of a... |
| Character count | **Associate the character count message to the input.** Use aria-describedby on the input to allow the message to be announced to those using screen readers. |
| Checkbox | Checkboxes are an easily understandable way to indicate that users can select one or more answers to a question or items from a list. They’re always followed by a label or instructions that clearly indicate what checking the box represents. Each checkbox has two different... |
| Collection | The collection component offers users a way to view short descriptions of related content, providing a simple way to access the original source to learn more. It’s useful when you want to highlight information like articles, events, or documents that appear elsewhere on your... |
| Combo box | **Known assistive technology issues.** Testing with people using assistive technology revealed usability concerns that require additional investigation. At this time, consider using a Select component instead of a Combo box. More research and testing is planned to better... |
| Data visualizations | Note: The data visualizations components are guidance-only and do not include any Component Code . The examples of specific visualizations included with our guidance are intended to be a demonstration of one way to implement our guidance with a focus on accessibility and... |
| Date picker | **Customize form controls accessibly.** If you customize this component, ensure that it continues to meet the accessibility requirements that apply to all form controls. **Avoid auto-submission.** Don’t use JavaScript to automatically submit the form (or do anything else) when... |
| Date range picker | **Customize form controls accessibly.** If you customize this component, ensure that it continues to meet the accessibility requirements that apply to all form controls. **Avoid auto-submission.** Don’t use JavaScript to automatically submit the form (or do anything else) when... |
| Figure | |
| File input | **Use proper labels and attributes.** Each file input should have a label element. Associate the label to your input by defining the value of the label’s for attribute with the input’s id. **Use as a progressive enhancement.** The file input component should be a progressive... |
| Footer | **Use tab focus.** Code the navigation so that pressing the tab key moves focus from link to link in the navigation, even when the navigation has collapsed into an accordion. **Use accessible accordions.** On small screens: when collapsed into an accordion, the navigation should... |
| Form | Note: If you are a building a form with multiple controls, also consider the accessibility guidelines on the “Form Templates” page . Form settings |
| Header | When to use a header component Most websites require header navigation. Most websites require some form of navigation to help users find the information they need. While a horizontal navigation bar is just one option for navigation design, it is one of the most visible... |
| Icon | Icons are simple symbols that attract attention, aid navigation, signal an action, add emphasis, or provide feedback. Icons serve as recognizable cues that users can understand easily — typically without thinking too hard. Icons must be used consistently across a site or... |
| Icon list | **Don't rely on the icons alone to convey meaning.** Use text and context to establish the meaning of your list, and use the icon to reinforce that meaning as a progressive enhancement. **Use colors with accessible contrast.** While the icons in an icon list might be considered... |
| Identifier | {:.site-note} **Note:** Identifier is a core component along with the banner component. We recommend using both core components on most sites. Together, they are the most recognizable and standardized design elements of a government site. |
| In-page navigation | In-page navigation helps users understand the contents of a page and navigate to the section they need to read. This component is most suited for lengthy pages. The component is displayed alongside the main content in a sticky container that remains fixed when the user scrolls.... |
| Input mask | **Include a label.** Make sure each form control includes a label with a for attribute related to the id of the input element it labels. **Use helpful hint text.** Make sure any hint text helps users understand what they need to input. **Customization.** As you customize, make... |
| Input prefix/suffix | **Hide from screen readers.** Prefixes and suffixes are hidden from screen readers using aria-hidden. **Use descriptive labels.** Labels should clearly indicate what type of data to enter since prefixes and suffixes are hidden from screen readers. For example, if you’re... |
| Language selector | Language selector pattern guidance For more specific guidance about language selection design patterns, see the Select a language pattern family. This pattern family includes several language selection patterns that use this component: Select between two languages Select from... |
| Link | Links are navigational elements that direct visitors to other locations, either on the same page or to a different page or site. They can be inline or separate from the text flow. Since every link is a potential user interaction, too many links can be overwhelming. Be judicious... |
| List | **Remove list styles with the unstyled variant.** For unstyled lists, either add the .usa-list--unstyled class or use the Sass mixin: @include unstyled-list. |
| Memorable date | **Follow input guidance.** These text fields should follow the accessibility guidelines for all text inputs. **Don’t auto-advance focus.** Do not use JavaScript to auto advance the focus from one field to the next. This makes it difficult for keyboard-only users to navigate and... |
| Modal | A modal prevents interaction with page content until the user completes an action or dismisses the modal. This intentionally interrupts the user’s workflow. **Use modals sparingly to minimize unnecessary disruptions.** Modals should have a simple headline that explains its... |
| Pagination | Paginated content is any content split into multiple pages determined only by a specific amount of content per page, not split by any meaningful attribute, like feature or subject or step. Search results and article collections are often paginated. Readers use the pagination... |
| Process list | **Use semantic heading levels.** Though our default code uses an , use the correct heading level with the class name usa-process-list__heading in your own implementation. |
| Prose | usa-prose is meant for blocks of text where it’s more difficult to add custom classes to individual elements, like a blog post where the content is coming out of markdown or a CMS. Adding usa-prose to any container adds USWDS default heading and body text styling to the... |
| Radio buttons | Radio buttons are a common way to allow users to make a single selection from a list of options. Since only one radio button can be selected at a time (within the same group), each available choice must be its own item and label. In contrast, checkboxes may show a single label,... |
| Range slider | **Customize form controls accessibly.** If you customize this component, ensure that it continues to meet the accessibility requirements that apply to all form controls. |
| Search | **Customize form controls accessibly.** If you customize this component, ensure that it continues to meet the accessibility requirements that apply to all form controls. **Include the word “Search” in the button.** Always include the word “search” inside the element for screen... |
| Select | **Customize form controls accessibly.** If you customize this component, ensure that it continues to meet the accessibility requirements that apply to all form controls. **Always use a label.** Make sure your select element has a label. Don’t replace it with the default menu... |
| Side navigation | The width of the current menu item’s highlight border is set with the $theme-sidenav-current-border-width variable. |
| Site alert | When your agency has urgent information to share with the public, it’s essential that it stands out from other content on the site. A site alert prominently displays critical, time-sensitive warnings or directions across every page so that users see it whenever they visit the... |
| Step indicator | **Use semantic heading levels.** Though our default code uses an , use the correct heading level in your own implementation. **Use visually hidden text on labels.** Use visually hidden text make the completion status of each step explicit. **Indicate the current step.** When... |
| Summary box | **Write for your audience.** The summary box is meant to make it easier to understand page content. Don't leave readers without access to critical information. Check your writing level to ensure it’s easy to read. Search for "readability level tool" to find tools that assess... |
| Table | {: .margin-top-4 } Tables help logically organize information and group like things together, and they make it easier to understand complex content, as explained on plainlanguage.gov. They’re especially useful for showing long lists of sequential or structured content. Users... |
| Tag | **Use ARIA live regions to highlight dynamically loaded content.** When tags are used to call out new content that is dynamically loaded onto a page, be sure to use ARIA live regions to alert screen readers of the change. |
| Text input | **Customize form controls accessibly.** If you customize this component, ensure that it continues to meet the accessibility requirements that apply to all form controls. **Avoid placeholder text.** Most browsers’ default rendering of placeholder text does not provide a high... |
| Time picker | **Customize form controls accessibly.** If you customize this component, ensure that it continues to meet the accessibility requirements that apply to all form controls. **Always use a label.** Make sure your select element has a label. Don’t replace it with the default menu... |
| Tooltip | **Use as title attribute.** Tooltips are progressive enhancements for the title attribute, and will display as the title attribute if the component doesn’t initialize. **Keyboard accessibility.** Tooltips make title attributes keyboard accessible. |
| Typography | Typesetting with USWDS Typesetting controls the readability of a text with the size, style, and spacing of its type. It’s a function of microtypography (how text is styled within a text block) and macrotypography (how content elements are arranged on the page). The more... |
| Validation | {:.site-note} **Note:** USWDS testing and research recently uncovered major usability and accessibility issues with this component. Due to these issues, we're slating it for removal from future versions, and won't be supporting it after USWDS v3.12.0. To learn more about how we... |
| Select their perferred language | What problem does this solve? We envision empowered agency digital teams who share solutions and use effective human-centered design practices. {:.margin-top-4} Websites with two languages USWDS is a design system for the federal government. We make it easier to build... |
| 404 page | A 404 page informs users that a requested page doesn’t exist. This kind of error can be frustrating or confusing. Straightforward plain language can help. Use a 404 page to explain the error and instruct the user what to do next. This 404 page template has six sections. This... |
| Authentication pages | It can be difficult or confusing for users to create accounts or sign in to a website. The best way to help is to provide context about why they’re creating an account and to remove unnecessary distractions from the page. You should use a shared service or the authentication... |
| Documentation page | People often arrive at a documentation page after visiting the landing page or after searching for a specific piece of information, so documentation pages don’t need to provide as much contextualizing information as more introductory pages would. The copy should be clear,... |
| Form templates | As you customize this form template, make sure it continues to follow the accessibility guidelines for form templates and the accessibility guidelines for form controls. |
| Landing page | Often, site users arrive at a landing page without much context, so a landing page needs to be clear, engaging, and contextualizing. |
| Templates | Built for flexibility These templates are just a starting point on which you can base your design. Every site built with USWDS is different, so you can add or remove components within these templates to suit your users' needs. Putting it all together In each of these... |
| Documentation template | |
| Landing page | |
| Flex | Flex tokens Token Example Value , ' ' Using flex tokens Your context and coding style determine how you access USWDS flex tokens in code. Context Usage... |
| Font | The USWDS typescale is designed to display type at a consistent size regardless of the typeface. Theme font tokens use a nine-step scale drawn from a 21-step system scale. Theme and system font tokens are the only tokens we accept for setting set font family and size in official... |
| Font family | {:.bg-gold-20v.padding-2.radius-md} Please see the Typesetting{:.text-ink.text-bold} section for more about font size normalization and how USWDS uses size and family tokens for typesetting. Available fonts The following fonts have normalization metadata in USWDS, and are... |
| Font size | {:.bg-gold-20v.padding-2.radius-md} Please see the Typesetting{:.text-ink.text-bold} section for more about font size normalization and how USWDS uses tokens for typesetting. The documentation below displays a value in pixels, rather than the actual final output, which will be... |
| Font weight | Theme tokens Font weight theme tokens use common names. Most projects will use only 2-4 of these tokens, with the majority set to false. Customize theme{:.token} font weight tokens in your project's theme settings with available system{:.token} font weight tokens. All... |
| Typesetting | |
| Letterspacing | {:.bg-gold-20v.padding-2.radius-md} **Note:** Some letterspacing tokens come in two flavors: a **numeric token** (like 0.5 or -2) and a **string token** (like '05' or 'neg-2'). _Utility classes use string tokens exclusively when they exist_ (like .margin-x-neg-2). Mixins and... |
| Line height | {:.bg-gold-20v.padding-2.radius-md} Please see the Typesetting{:.text-ink.text-bold} section for more about font size normalization and how USWDS uses tokens for typesetting. Setting line height requires both a line height{:.token} token and a family{:.token} token. The... |
| Measure (line length) | Measure tokens Measure is output in ex units, where 1ex is equivalent to the height of an 'x' character in the desired font. The first section of each example below is 4 alphabets long. Token Example Value ' ' a b c d e f g... |
| Opacity | Opacity tokens Token Example Value , ' ' Using opacity tokens Your context and coding style determine how you access USWDS opacity tokens in code. Context Usage Example... |
| Order | Order tokens Note: Ordered items are only ordered among other ordered items. Any unordered siblings will be ordered by their appearance in the DOM. Siblings sharing the same order will all appear at the specified position in the order in which they appear in the DOM.... |
| Using type | Normalization Typefaces vary in optical size. This means that at any specific pixel value, an optically small typeface like Source Sans Pro will appear smaller than an optically large typeface like Merriweather. Optical size is a function of internal font metrics and typeface... |
| Shadow | Shadow tokens Output values are shown in px below but are output in rem in the final CSS, based on the base font size in your project settings. Token Example Value , ' ' Using shadow tokens Your... |
| Spacing units | Any spacing value in utilities or component CSS should use the following spacing unit tokens, based on multiples of 8px. The documentation below displays a target value in pixels, but the final output for tokens above 2px and below -2px is the eqivalent value in rem, which will... |
| State color tokens | USWDS state color tokens are designed to be useful and effective for any project that has states or alerts. Each state token is drawn from a system color{:.token} token and we only use token-based colors in official components. {:#uswds-state-color-tokens} State color... |
| System palette adjustments | vivid Original Adjusted Shortcode Original hex Adjusted hex |
| System color tokens | vivid Color Token Family Grade Variant Hex Using color tokens Your context and coding style determine how you access USWDS color tokens in code. Context Usage Example function color: color( color... |
| Theme color tokens | USWDS theme color tokens are designed to be useful and effective for small and large projects. Each theme token is drawn from a system color{:.token} token and we only use token-based colors in official components. {:#uswds-theme-color-tokens} About theme color tokens USWDS... |
| Z-index | Z-index tokens Token Value 'auto' auto 'top' 99999 500 500 400 400 300 300 200 200 100 100 0 0 'bottom' -100 Using z-index tokens Your context and coding style determine how you access... |
| _usa-password | USWDS package _usa-password. |
| templates | USWDS package templates. |
| usa-accordion | USWDS package usa-accordion. |
| usa-add-aspect | USWDS package usa-add-aspect. |
| usa-alert | USWDS package usa-alert. |
| usa-banner | USWDS package usa-banner. |
| usa-breadcrumb | USWDS package usa-breadcrumb. |
| usa-button | USWDS package usa-button. |
| usa-button-group | USWDS package usa-button-group. |
| usa-card | USWDS package usa-card. |
| usa-character-count | USWDS package usa-character-count. |
| usa-checkbox | USWDS package usa-checkbox. |
| usa-checklist | USWDS package usa-checklist. |
| usa-collection | USWDS package usa-collection. |
| usa-combo-box | USWDS package usa-combo-box. |
| usa-content | USWDS package usa-content. |
| usa-dark-background | USWDS package usa-dark-background. |
| usa-date-picker | USWDS package usa-date-picker. |
| usa-date-range-picker | USWDS package usa-date-range-picker. |
| usa-display | USWDS package usa-display. |
| usa-embed-container | USWDS package usa-embed-container. |
| usa-error-message | USWDS package usa-error-message. |
| usa-fieldset | USWDS package usa-fieldset. |
| usa-file-input | USWDS package usa-file-input. |
Latest Blog Posts
- Who's Calling? MCP Hosts Are an Identity Blind Spot (And the Spec Knows It)By Om-Shree-0709 on .mcpAgent IdentityOAuth 2.1
- Your AI Chatbot Just Exposed Your CEO's Salary to an InternBy Om-Shree-0709 on .Agent IdentityMCP SecurityOAuth Delegation
- Why MCP Servers Need Execution Sandboxing (And Why Your Current Stack Isn't Enough)By Om-Shree-0709 on .Agentic AiPrompt InjectionWebAssembly
MCP directory API
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/bibekpdl/uswds-mcp'
If you have feedback or need assistance with the MCP directory API, please join our Discord server