skills.rest
richfrem
richfremCOMMUNITY
Explore all skills by this author →
GitHub

bc-gov-react

Provide React components and guidelines aligned with the BC Government Design System.

Updated Apr 20, 2026
Search Tags:#accessibility#react#ui design#ui development#bc government
One-click install
npx skills add https://github.com/richfrem/claude-design-bc-gov-design-system --skill bc-gov-react
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: bc-gov-react
Source: https://github.com/richfrem/claude-design-bc-gov-design-system/tree/main/plugins/bc-gov-design-system/skills/bc-gov-react
Command: npx skills add https://github.com/richfrem/claude-design-bc-gov-design-system --skill bc-gov-react

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @bcgov/design-system-react-components, @bcgov/bc-sans, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill unit provides a comprehensive collection of BC Government's Design System components and guidelines for React UI development, streamlining the process of creating compliant and accessible React applications.

Core Features & Use Cases

  • Component Library Access: Utilizes @bcgov/design-system-react-components to integrate a variety of BC Government approved React UI components.
  • Documentation: Offers a full reference of the components and their usage examples, ensuring a smooth integration process.
  • Guidelines: Provides a comprehensive set of rules and best practices for design and development alignment with the BC Government standard.

Quick Start

To install and set up this Skill unit, run the following command:

npm install @bcgov/design-system-react-components @bcgov/bc-sans

Frequently Asked Questions about bc-gov-react

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

FAQPage Schema
How do I build React UIs that comply with the BC Government design system?▼

This Skill provides React components and guidelines aligned with the BC Government Design System, allowing you to build accessible and consistent administrative and public-facing UIs quickly.

What dependencies do I need to install for BC Government React components?▼

You must install the @bcgov/design-system-react-components and @bcgov/bc-sans npm packages to use the BC Government React components and ensure proper font rendering.

Can I use the BC Government design system components for public-facing applications?▼

Yes, this Skill supports both administrative and public-facing React applications, providing the necessary components and guidelines to maintain accessibility and design consistency across all BC Government projects.

Does the BC Government React skill provide accessibility guidelines for UI development?▼

Yes, this Skill includes a comprehensive set of design and development guidelines that enforce accessibility best practices, ensuring your React application aligns with BC Government standards.

What is the best way to integrate BC Sans into a React application?▼

Install the @bcgov/bc-sans npm package as a dependency alongside @bcgov/design-system-react-components to properly integrate the official BC Government typography into your React application.

Why does my BC Government React component library require specific npm packages?▼

The Skill requires these specific npm packages because it directly utilizes @bcgov/design-system-react-components for UI elements and @bcgov/bc-sans for typography to ensure strict adherence to the BC Government Design System.

Related Skills

Explore More Design & Creative Skills→
rloisellrloisell
7

bc-gov-design-system

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

Community
Advanced
djnsty23djnsty23
2

deploy

Deploy and configure CI/CD workflows for Vercel, Supabase, and GitHub Actions.

Community
Advanced
richfremrichfrem

bc-gov-design-system

Integrate BC Government Design System components with BC Sans font and color palette.

Community
Advanced
richfremrichfrem

bc-gov-blazor

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

Community
Intermediate