Hire an AI USWDS developer
Plan a government website on the U.S. Web Design System (USWDS): theme settings, official components, required .gov elements and access checks.
What you give
- What the page or site is for and who uses it
- Your agency name, domain, brand colors and fonts
- The USWDS version, if you already use it (optional)
What you get
- A theme plan that turns your brand into USWDS color, spacing and type settings
- An official component for each need, with a reason if you must build your own
- A mobile-first layout and form plan
- A CMS plan for Drupal or WordPress, if you use one
An example
You are building or redesigning a federal or other public-sector site on USWDS.
You ask: “Plan a government website on the U.S. Use the material I attach and ask for anything essential that is missing.”
You get back:
- Brief and assumptions. The site, brand, USWDS version and CMS as understood, with assumptions and MISSING items.
- Theme settings. Each brand item mapped to a USWDS token or setting, with a contrast note.
- Components. The official component for each need, or why a custom one is needed.
An example, not your task.
Words used here
- CMS: the tool you use to edit your website
Hire this specialist
It is free and needs no account. Download the pack, give it to your AI and tell it the job. Your AI asks for anything it is missing, then does the work and checks it.
Related specialists
- React frontend specialist
- Shopify theme specialist
- WordPress and Drupal developer
- Website quality improvement reviewer
Skills and workflows for this job: Build websites and web apps
Details
Everything it can hand back
Your task sets the actual outputs. The specialist picks the methods that cover them.
- A theme plan that turns your brand into USWDS color, spacing and type settings
- An official component for each need, with a reason if you must build your own
- A checklist of required federal elements: the .gov banner and the Identifier
- A mobile-first layout and form plan
- A CMS plan for Drupal or WordPress, if you use one
- Accessibility and compliance checks to run
- Open questions
How it does the job well
- This is a plan, not a sign-off. Never say a site is compliant, accessible or conformant. Say what to test and who should confirm.
- Mark any rule or required link you cite 'check the current USWDS and agency guidance'. Do not invent required links, deadlines or agency rules.
- Give drafts and proposals. Get the user's go-ahead before anything that sends, publishes, spends money or changes a live system.
- Keep sample numbers and templates labelled as examples. Never state an invented figure as a result.
- Use the maintained USWDS component before building a custom one. The accordion, banner, date picker, combo box, modal, and form components ship accessibility-tested and cross-browser-verified. Hand-rolling a replacement throws away that testing and becomes your burden to maintain and keep accessible forever.
- Build mobile-first with the USWDS grid and breakpoints — government users are on phones. Use the USWDS responsive grid and tokenized breakpoints; design for small screens first and enhance up. A large share of public-service traffic is mobile, often on constrained devices and networks.
- Read the existing code, its conventions and its tests before changing anything. Match the project's patterns.
Mistakes it avoids
- Claiming code works without running it or its tests.
- Inventing APIs, package versions or settings instead of checking the installed ones.
- Changing behaviour outside the request, such as reformatting whole files or renaming public interfaces.
What a good result looks like
An example, not your task: You are building or redesigning a federal or other public-sector site on USWDS.
- Brief and assumptions. The site, brand, USWDS version and CMS as understood, with assumptions and MISSING items.
- Theme settings. Each brand item mapped to a USWDS token or setting, with a contrast note.
- Components. The official component for each need, or why a custom one is needed.
- Required federal elements. A checklist for the .gov banner, the Identifier and its links, and HTTPS.
- Layout and forms. Grid, breakpoints, form patterns and error states, planned for phones first.
- CMS integration. How USWDS assets and templates fit Drupal or WordPress without editing vendor files.
How the work is checked
- The changed files build, and the relevant tests and linters pass. The commands and results are shown.
- Each change is explained in one line with its reason, and risky areas are named.
- Any check that could not run is reported as NOT_RUN with what it needs.
- States which checks passed, failed or could not run, and names missing inputs.
These checks have not been run against a model yet. Your AI uses them to check its own work.
Capabilities
- Collect the brief. It confirms the site purpose, brand, USWDS version, build method and CMS. It asks once for anything missing, then marks it MISSING.
- Set the foundation. It plans the install, the theme settings file, the build step and the required federal elements.
- Theme through tokens. It maps your brand onto USWDS color, spacing and type tokens and checks contrast, with no magic numbers.
- Choose components. It picks the official component for each need and uses its documented markup.
- Plan the CMS link. For Drupal or WordPress it plans assets, templates and form theming that keep the USWDS markup.
- Plan the checks. It lists keyboard, screen reader, contrast, reflow and compliance checks, and what is unknown.
How the role works
- Checks your task, context and available tools.
- Picks the methods needed and prepares a work plan.
- Carries out supported tasks, with each method's limits and review gates.
- Checks the real deliverables and corrects supported faults.
- Hands back files, evidence and unresolved gaps.
Your specialist's working setup
Download the base specialist without a task form or account. README.md and SETUP.md explain how to use the folder. SOUL.md defines its scope. INTAKE.md asks missing questions inside your AI. PLAYBOOK.md, SKILLS.md, BEST_PRACTICES.md, CHECKS.md and HANDOFF.md guide the work and its checked deliverables.
Complete associated skills, supporting files and licences are included. Choose only the methods needed for the actual task. Keep context, working files and accepted feedback in your AI project.
Use this specialist through MCP or the API
Call prepare_specialist with role_id engineering-uswds-developer only. No task is required to load it. Your AI asks what job you need done, what you want back and which relevant context it can use.
For task-led hiring, call find_specialist, explain the suggested specialists and let the user accept or change the team.
Complete ZIP: Download base specialist. API: GET /api/v1/specialists/engineering-uswds-developer/pack. The host AI supplies its own model, tools and execution; a pack does not connect accounts or run a task.
Inputs and helpful context
The specialist starts from the task brief. Only active methods require their inputs.
For the primary method, when used
- What the page or site is for and who uses it
- Your agency name, domain, brand colors and fonts
- The USWDS version, if you already use it (optional)
- Your CMS, such as Drupal or WordPress (optional)
- Your current page or code (optional)
- Forms or flows you need, such as a multi-step application (optional)
Helpful context (optional)
- Your theme settings file, usually named _uswds-theme.scss.
- Your agency's brand guide and its required footer links.
Tools and access
- Claude, ChatGPT or Gemini: The profile is long, and these tools take it pasted or attached.
- Claude Code: It can read your theme settings file and templates, so the plan fits your code.
Functions and deliverables
- USWDS developer agent: Plan a government website on the U.S. Web Design System (USWDS): theme settings, official components, required .gov elements and access checks.
- A theme plan that turns your brand into USWDS color, spacing and type settings
- An official component for each need, with a reason if you must build your own
- A checklist of required federal elements: the .gov banner and the Identifier
- A mobile-first layout and form plan
- A CMS plan for Drupal or WordPress, if you use one
- Accessibility and compliance checks to run
- Open questions
- Markdown page brand settings builder: Answer ten brand questions to create saved colors, fonts, and layout settings for markdown-html converters.
- A saved brand style config
- A matching colour palette
- A contrast check against WCAG AA
- Style applied to later conversions
- Project-level overrides
- Website design analyst: Paste a public website link and get its colours, fonts, spacing and layout rules in a design guide. Use it to analyze a website's design.
- A Markdown guide with measured design values and evidence for the design rules.
- A JSON file with the same values and rules.
- Screenshots and notes about missing or approximate measurements.
- A coding-tool rules draft when requested.
- Website design planner: Describe your site. Get a design score and a plan for layout, type, motion and speed.
- A design score out of 10
- Layout and typography direction
- Motion and scroll effects plan
- Performance guidance for animation
- A list of changes to reach top level
- AI project context organiser: Share your project and next task. Get a short rules file, a focused file list and a clear handoff for later sessions.
- A ready rules file for your project
- A list of which files to load for each task
- Rules for when to reset or trim the session
- A checklist for spotting drifting answers
Tasks you can use it for
- You are building or redesigning a federal or other public-sector site on USWDS.
- You need to turn your agency brand into USWDS theme settings.
- You are deciding whether to use an official component or build your own.
- You are adding USWDS to a Drupal or WordPress theme.
Limits to check before starting
- Your site is not on USWDS and is not government: use the Frontend developer.
- You need an accessibility audit or sign-off: use the Section 508 accessibility reviewer or the Accessibility auditor.
- You want a quick check of one page you already built: use the Federal accessibility checker.
- You want a general WordPress or Drupal build: use the WordPress and Drupal developer.
Best way to use this role
Give it one clear outcome, the actual files and a definition of done. Keep the work in one AI project so it can reuse checked context and earlier files.
- Download the pack and add it as a skill in your AI. Or paste SKILL.md into a new chat, then paste references/source-agent.md after it.
- Write your brief: what the site is for, your agency brand, your USWDS version and your CMS. Paste your theme settings file if you have one.
- Say 'Plan this on USWDS. Mark anything that depends on the version.' Your AI asks once for what is missing.
- Read the theme plan and the component list first. Check them against your brand rules.
- Build on a test copy of your site. Test with a keyboard and a screen reader, and check color contrast yourself.
- Confirm the final result with your agency's accessibility and compliance team. This plan is not a sign-off.
Read it as data
Read the complete role setup as JSON. Connect your AI to the AI Blocks MCP library and read aiblocks://roles/engineering-uswds-developer for its role instructions and pinned sources.
This is a prepared AI role. No task has run. Your AI carries out authorized work using its available tools and reports the actual deliverables and checks.