{ "schema": "aiblocks-page/1", "id": "agency-engineering-uswds-developer", "type": "agent", "name": "USWDS developer agent", "summary": "Plan a government website on the U.S. Web Design System (USWDS): theme settings, official components, required .gov elements and access checks.", "headline": "USWDS developer agent", "subhead": "Describe the page or site, your agency brand and your CMS. The agent plans USWDS design tokens, official components, the required .gov banner and Identifier, and accessibility checks. You get a build plan and a checklist.", "job": { "id": "build-websites", "name": "Build websites and web apps" }, "level": "intermediate", "thinking": "high", "tested": true, "updated": "2026-11-03", "first_published": "2026-10-26", "inputs": [ { "type": "question", "required": true, "label": "Question", "what": "the problem, decision or piece of work you want help with, and what a good outcome looks like" }, { "type": "codebase", "required": false, "label": "Codebase", "what": "a project's code, in a folder or repo the AI can open" } ], "outputs": [ { "type": "plan", "required": true, "label": "Plan", "what": "a dated plan: what to do, in what order, with a decision rule for each step" }, { "type": "audit_report", "required": true, "label": "Audit report", "what": "findings with evidence, severity, missing inputs and next actions" }, { "type": "design_tokens", "required": true, "label": "Design tokens", "what": "a design system's tokens: colours, type sizes, spacing and breakpoints, as CSS or JSON that code can use" } ], "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)", "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)" ], "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 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" ], "use_when": [ "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." ], "skip_when": [ "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." ], "output_sample": { "input": [ "What the page or site is for and who uses it", "Your agency name, domain, brand colors and fonts", "Your USWDS version and CMS (optional)", "Your current page or code (optional)" ], "prerequisites": [ "A test copy of your site to try the plan on", "An AI that takes a pasted profile, such as Claude, ChatGPT or Gemini" ], "output": [ { "name": "Brief and assumptions", "contains": "The site, brand, USWDS version and CMS as understood, with assumptions and MISSING items." }, { "name": "Theme settings", "contains": "Each brand item mapped to a USWDS token or setting, with a contrast note." }, { "name": "Components", "contains": "The official component for each need, or why a custom one is needed." }, { "name": "Required federal elements", "contains": "A checklist for the .gov banner, the Identifier and its links, and HTTPS." }, { "name": "Layout and forms", "contains": "Grid, breakpoints, form patterns and error states, planned for phones first." }, { "name": "CMS integration", "contains": "How USWDS assets and templates fit Drupal or WordPress without editing vendor files." }, { "name": "Accessibility and compliance checks", "contains": "Numbered checks for keyboard, screen reader, contrast and reflow, with what a pass looks like." }, { "name": "Open questions", "contains": "What is unknown and what each answer changes." } ] }, "output_shape": "BRIEF AND ASSUMPTIONS\n Site | Agency | USWDS | CMS \n Assumed: | MISSING: \n\nTHEME SETTINGS\n | | \n\nCOMPONENTS\n | | | \n\nREQUIRED FEDERAL ELEMENTS\n [ ] .gov banner | [ ] Identifier and its links | [ ] HTTPS | [ ] \n\nLAYOUT AND FORMS\n | |
\n\nCMS INTEGRATION\n | | \n\nACCESSIBILITY AND COMPLIANCE CHECKS\n | | \n\nOPEN QUESTIONS\n | ", "how_to_use": [ "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." ], "checks": [ "The result addresses your actual task and cites the evidence used.", "Examples, role-play experience and targets are kept separate from verified results.", "Claims of tests, memory, tool access or completed actions match what actually happened." ], "next": [ { "name": "Accessible UI builder", "url": "https://useaiblocks.com/skills/accessible-ui-builder", "why": "Accessible UI builder" }, { "name": "Colour contrast checker", "url": "https://useaiblocks.com/skills/colour-contrast-checker", "why": "Design it" }, { "name": "Design handoff specification writer", "url": "https://useaiblocks.com/skills/developer-handoff-spec-writer", "why": "Design it" }, { "name": "Interface builder", "url": "https://useaiblocks.com/skills/interface-builder", "why": "Interface builder" }, { "name": "Product-specific interface designer", "url": "https://useaiblocks.com/skills/product-true-ui-designer", "why": "Design it" } ], "source": { "by": "Michael Sitarzewski and Agency Agents contributors", "repo": "msitarzewski/agency-agents", "url": "https://github.com/msitarzewski/agency-agents/blob/b37b5bb33b78f2c1d6567d98e25ca818e3259219/engineering/engineering-uswds-developer.md", "licence": "MIT", "original_name": "USWDS Developer", "commit": "b37b5bb33b78f2c1d6567d98e25ca818e3259219" }, "credits": [ { "title": "USWDS Developer", "by": "Michael Sitarzewski and Agency Agents contributors", "url": "https://github.com/msitarzewski/agency-agents/blob/b37b5bb33b78f2c1d6567d98e25ca818e3259219/engineering/engineering-uswds-developer.md", "used": "Original agent profile, preserved in references/source-agent.md; AI Blocks adds setup and review instructions." } ], "files": [ "LICENSE", "references/source-agent.md", "SETUP.md", "source.json" ], "links": { "page": "https://useaiblocks.com/agents/agency-engineering-uswds-developer", "markdown": "https://useaiblocks.com/agents/agency-engineering-uswds-developer.md", "json": "https://useaiblocks.com/agents/agency-engineering-uswds-developer.json", "instructions": "https://useaiblocks.com/skills/agency-engineering-uswds-developer/SKILL.md", "download": "https://useaiblocks.com/skills/agency-engineering-uswds-developer.zip", "api_item": "https://useaiblocks.com/api/v1/items/agency-engineering-uswds-developer", "api_document": "https://useaiblocks.com/api/v1/documents/agent/agency-engineering-uswds-developer", "mcp": "https://useaiblocks.com/mcp" } }