Skills
.Work. You
Rest

bc-gov-design-system

Community

BC Gov React UI design system for consistency

Software Engineering#frontend#react#vite#design-system#ui-components#design-tokens#bc-sans
Authorrloisell
Version1.0.0
Installs0

System Documentation

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.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: bc-gov-design-system
Download link: https://github.com/rloisell/rl-agents-n-skills/archive/main.zip#bc-gov-design-system

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.