# Gc Design System

> Build professional Government of Canada websites using the latest GC Design System (GCDS) for both non-React and React projects, including component styles, CSS shortcuts, and design tokens. Use Tailwind CSS for advanced components not available in GCDS (tables, modals, toasts, tabs). Triggers when user mentions Canada.ca, Government of Canada website, GC Design System, GCDS, federal government w…

- **Type:** Skill
- **Install:** `agentstack add skill-cds-yiwei-agent-skills-gc-design-system`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [cds-yiwei](https://agentstack.voostack.com/s/cds-yiwei)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [cds-yiwei](https://github.com/cds-yiwei)
- **Source:** https://github.com/cds-yiwei/agent-skills/tree/main/gc-design-system

## Install

```sh
agentstack add skill-cds-yiwei-agent-skills-gc-design-system
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# GC Design System Website Builder

Build accessible, bilingual Government of Canada websites using GCDS web components + Tailwind CSS for gaps.

## Quick Start

1. Pick implementation mode:
   - **Non-React:** HTML/Web Components (starter in `assets/basic-page-template.html`)
   - **React:** `@gcds-core/components-react` wrappers
2. Add required GCDS component styles and CSS shortcuts
3. Build standard UI with GCDS components (see [references/components.md](references/components.md))
4. Use Tailwind CSS (tw- prefix) for advanced components (see [references/tailwind-gap-components.md](references/tailwind-gap-components.md))

## Non-React Setup (HTML / Web Components)

### CDN setup (``)

```html

```

For Tailwind gap components, also add:
```html

```
Configure Tailwind with `tw-` prefix to avoid GCDS class conflicts. See [references/tailwind-gap-components.md](references/tailwind-gap-components.md) for the full config block.

### npm setup

```bash
npm install @gcds-core/components @gcds-core/css-shortcuts
```

Then load styles/scripts:
```html

```

## React Setup

Install:
```bash
npm install @gcds-core/components @gcds-core/components-react @gcds-core/css-shortcuts
```

Import styles and use React wrappers:
```tsx
import '@gcds-core/components-react/gcds.css';
import '@gcds-core/css-shortcuts/dist/gcds-css-shortcuts.min.css';
import { GcdsButton, GcdsContainer } from '@gcds-core/components-react';

export function Example() {
  return (
    
      Continue
    
  );
}
```

## Page Structure (mandatory)

Every GC page MUST have:

```
     ← GC branded header (required)
     ← Search slot
   ← Breadcrumb slot

   ← Content wrapper
    Content here
  
   ← Last update date

     ← GC branded footer (required)
```

## Component Decision Guide

### Use GCDS components for:
Header, Footer, Breadcrumbs, Buttons, Forms (Input, Textarea, Select, Checkboxes, Radios, File Upload, Date Input), Cards (basic link cards), Grid layout, Container, Navigation (Top Nav, Side Nav), Pagination, Notice/Alerts, Details (accordion), Stepper, Heading, Text, Link, Icon, Search, Error handling, Signature, Language Toggle

### Use Tailwind (tw- prefix) for:
- **Enhanced Cards** — multi-action, complex content cards
- **Data Tables** — sortable/striped tables
- **Modal Dialogs** — using native `` element
- **Toast Notifications** — dismissible snackbar messages
- **Tabs** — tabbed content panels
- **Badges/Tags** — status indicators
- **Stats/Metric Cards** — dashboard number displays
- **Hero Sections** — full-width banner areas
- Any custom layout not covered by GCDS

## Key Rules

1. **Accessibility first** — All GCDS components are WCAG 2.1 AA. Keep custom Tailwind components accessible (aria roles, keyboard nav, focus management).
2. **Bilingual** — Set `lang="en"` or `lang="fr"` on ``. Use `lang-href` on header for language toggle.
3. **GC branding** — Never modify the GC signature or wordmark. Always use `` and `` (or `GcdsHeader`/`GcdsFooter` in React).
4. **Tailwind prefix** — Always use `tw-` prefix on Tailwind classes to avoid conflicts with GCDS CSS shortcuts.
5. **Responsive** — Use `` with `columns`, `columns-tablet`, `columns-desktop` for responsive layouts. GCDS CSS shortcuts support `xs:`, `sm:`, `md:`, `lg:`, `xl:` breakpoint prefixes.

## References

| File | When to Read |
|------|-------------|
| [references/components.md](references/components.md) | Building any page — full component inventory with tags, attributes, and examples |
| [references/css-shortcuts.md](references/css-shortcuts.md) | Styling custom HTML — utility classes for spacing, typography, layout, colours |
| [references/tailwind-gap-components.md](references/tailwind-gap-components.md) | Need Table, Modal, Toast, Tabs, enhanced Card, Hero, Stats, or Badge |
| [references/design-tokens.md](references/design-tokens.md) | Writing custom CSS — all colour, spacing, typography token values |

## Assets

| File | Purpose |
|------|---------|
| [assets/basic-page-template.html](assets/basic-page-template.html) | Copy as starting point for any new GC page |

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [cds-yiwei](https://github.com/cds-yiwei)
- **Source:** [cds-yiwei/agent-skills](https://github.com/cds-yiwei/agent-skills)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-cds-yiwei-agent-skills-gc-design-system
- Seller: https://agentstack.voostack.com/s/cds-yiwei
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.