How do I install the Cfpb Design System skill?

Run npx skillmds@latest add blencorp/cfpb-design-system in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Cfpb Design System safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Cfpb Design System?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Cfpb Design System free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Cfpb Design System?

blencorp (@blencorp) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Cfpb Design System by blencorp — Agent Skill

Name: Cfpb Design System
Author: blencorp

Cfpb Design System

Builds Consumer Financial Protection Bureau interfaces with the official CFPB HTML/CSS/JavaScript system or its official React implementation. Use for CFPB-governed products and preserve the documented styling dependency.

blencorp 1d69f01 4 files · 6.5 KB Updated Sep 17, 2026

File contents

CFPB Design System

Build within the system's documented scope and delivery model.

Before editing

Confirm the product owner and that this system is authorized for the target surface.
Read references/implementation.md before installing or changing dependencies.
Read references/sources.md when checking versions, provenance, license, or release state.
Inspect the existing framework, package manager, asset pipeline, and accessibility tests. Preserve them unless the official integration requires a change.

Workflow

Choose one documented delivery path; do not mix compiled, source, CDN, and framework-wrapper paths accidentally.
Pin the dependency or downloaded asset version and keep upstream notices.
Reuse official components, tokens, content guidance, and templates before adding custom UI.
Extend through documented tokens, properties, slots, Sass settings, or composition. Do not edit vendored package files.
Test semantic structure, keyboard operation, focus order and visibility, accessible names, error recovery, zoom/reflow, contrast, and target browsers.
Report custom patterns, unsupported requirements, and upstream gaps explicitly.

Boundaries

Scope: CFPB product interfaces. The React library and core style package must remain version-compatible.
Release: Active official core and React repositories; upstream describes both as work in progress and notes that interfaces will change. Pin exact versions.
Delivery: Core HTML/CSS/JavaScript and a separate React/Storybook package.
Do not invent component APIs, tokens, package names, or compliance claims.
Do not import another jurisdiction's branding to fill a gap.
A passing component example does not prove the completed service conforms to WCAG, Section 508, the ADA, or local policy.
If this system does not fit the product's requirements, route to the governing system or stop and explain the gap.

References

Implementation — packages, setup, and integration decisions
Sources — authoritative URLs, snapshot versions, ownership, and license notes

---name: cfpb-design-systemdescription: Builds Consumer Financial Protection Bureau interfaces with the official CFPB HTML/CSS/JavaScript system or its official React implementation. Use for CFPB-governed products and preserve the documented styling dependency.---# CFPB Design SystemBuild within the system's documented scope and delivery model.## Before editing1. Confirm the product owner and that this system is authorized for the target surface.2. Read [references/implementation.md](references/implementation.md) before installing or changing dependencies.3. Read [references/sources.md](references/sources.md) when checking versions, provenance, license, or release state.4. Inspect the existing framework, package manager, asset pipeline, and accessibility tests. Preserve them unless the official integration requires a change.## Workflow1. Choose one documented delivery path; do not mix compiled, source, CDN, and framework-wrapper paths accidentally.2. Pin the dependency or downloaded asset version and keep upstream notices.3. Reuse official components, tokens, content guidance, and templates before adding custom UI.4. Extend through documented tokens, properties, slots, Sass settings, or composition. Do not edit vendored package files.5. Test semantic structure, keyboard operation, focus order and visibility, accessible names, error recovery, zoom/reflow, contrast, and target browsers.6. Report custom patterns, unsupported requirements, and upstream gaps explicitly.## Boundaries- **Scope:** CFPB product interfaces. The React library and core style package must remain version-compatible.- **Release:** Active official core and React repositories; upstream describes both as work in progress and notes that interfaces will change. Pin exact versions.- **Delivery:** Core HTML/CSS/JavaScript and a separate React/Storybook package.- Do not invent component APIs, tokens, package names, or compliance claims.- Do not import another jurisdiction's branding to fill a gap.- A passing component example does not prove the completed service conforms to WCAG, Section 508, the ADA, or local policy.- If this system does not fit the product's requirements, route to the governing system or stop and explain the gap.## References- [Implementation](references/implementation.md) — packages, setup, and integration decisions- [Sources](references/sources.md) — authoritative URLs, snapshot versions, ownership, and license notes

Frequently asked questions