skills.rest
rloisell
rloisellCOMMUNITY
Explore all skills by this author →
GitHub

bc-gov-design-system

Standardize BC Gov React/Vite frontends with reusable components, tokens, and font loading.

7|Updated Mar 5, 2026
Search Tags:#frontend#react#vite#design-system#ui-components#design-tokens#bc-sans
One-click install
npx skills add https://github.com/rloisell/rl-agents-n-skills --skill bc-gov-design-system
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: bc-gov-design-system
Source: https://github.com/rloisell/rl-agents-n-skills/tree/main/bc-gov-design-system
Command: npx skills add https://github.com/rloisell/rl-agents-n-skills --skill bc-gov-design-system

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

BC Gov frontends often suffer from inconsistent UI and repeated implementation of header, typography, and tokens. This design system provides a reusable BC Government Design System for React/Vite applications, including components, fonts, tokens, and usage guidelines to ensure consistency and accessibility.

Core Features & Use Cases

  • Three core packages: @bcgov/design-system-react-components, @bcgov/bc-sans, @bcgov/design-tokens
  • Header, Footer, and UI components for BC Gov branding
  • BC Sans font loading from npm package (no external font URLs)
  • CSS design tokens exposed as variables for consistent theming
  • Clear import order guidance and navigation patterns for React apps
  • Use Case: Build BC Gov React frontends with unified visuals and accessible typography

Quick Start

Install the required packages and import the CSS in your app, then replace manual header/footer markup with the provided components.

Frequently Asked Questions about bc-gov-design-system

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add a consistent BC Gov header and footer to my React app?▼

To add a consistent BC Gov header and footer, import the UI components from the @bcgov/design-system-react-components package and replace your manual markup with the provided React components.

What is the recommended way to load the BC Sans font in a Vite project?▼

The recommended way to load the BC Sans font in a Vite project is by installing the @bcgov/bc-sans npm package and importing the font directly from the package rather than using external font URLs.

How do I use BC Gov design tokens for theming in my frontend application?▼

To use BC Gov design tokens for theming, install the @bcgov/design-tokens package and apply the exposed CSS variables in your stylesheets to ensure consistent visual theming across your application.

Can I use the BC Gov design system components without a Vite setup?▼

The BC Gov design system is specifically configured for React/Vite projects, enforcing recommended import orders and CSS variable usage that are optimized for the Vite build environment.

Why does my BC Gov React UI have inconsistent typography and styling?▼

Inconsistent typography and styling often occurs when manually implementing headers and fonts, which the BC Gov design system solves by standardizing imports via @bcgov/bc-sans and applying CSS design tokens.

Do I need to install all three BC Gov npm packages to use the design system?▼

Yes, you need to install @bcgov/design-system-react-components, @bcgov/bc-sans, and @bcgov/design-tokens to fully load fonts, apply UI components, and enforce CSS variable theming correctly.

Related Skills

Explore More Software Engineering Skills→
findinfinitelabsfindinfinitelabs

react-typescript-frontend

Build a type-safe Chuukese React frontend with Mantine UI v8 and Vite.

Community
Intermediate
JCE-Joshhh77JCE-Joshhh77
16

design-systems

Design scalable design systems with W3C tokens, CSS theming, and CVA/Radix APIs.

Community
Advanced
citypaulcitypaul
710

react-testing

Validate React components, hooks, and context with React Testing Library.

Community
Intermediate
richfremrichfrem

bc-gov-blazor

Create BC Government Design System-compliant Blazor components with design tokens.

Community
Intermediate