メニュー
Guides setup and installation of @westpac/ui and @westpac/style-config in a new project. Use when setting up GEL, installing the design system, configuring Tailwind CSS, theming, or brand fonts.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Guides consumers of the @westpac/ui component library on correct usage, capabilities, and patterns. Use when asking how to use a GEL component, whether a component supports a feature, or how to implement a UI pattern with @westpac/ui.
Guides migration from pre-@westpac/ui 1.0 to v1.0. Use when upgrading GEL, migrating to v1, updating design tokens, running the token codemod, or fixing breaking changes from the v1 upgrade.
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
Scaffolds a new GEL design system UI component following project conventions. Use when creating a new component, adding a component, or scaffolding a component in packages/ui.
Reviews GEL design system components for convention compliance, accessibility, and best practices. Use when reviewing a component, checking component quality, or auditing GEL components.
Writes Vitest + React Testing Library tests for GEL design system components. Use when writing tests, adding tests, or improving test coverage for components in packages/ui.
| name | installing-westpac-ui |
| description | Guides setup and installation of @westpac/ui and @westpac/style-config in a new project. Use when setting up GEL, installing the design system, configuring Tailwind CSS, theming, or brand fonts. |
Step-by-step setup for new projects using the GEL design system.
Reference this guide when a user wants to set up the GEL design system in a new project. This includes installing the necessary packages, configuring Tailwind CSS, setting up theming with brand tokens, and adding brand fonts.
GEL is split into two packages:
@westpac/ui — All design system components@westpac/style-config — Tailwind CSS themes and design tokensnpm i @westpac/ui @westpac/style-config
GEL components are styled with Tailwind CSS v4. Follow the Tailwind CSS installation instructions.
npm i tailwindcss @tailwindcss/postcss postcss
Create postcss.config.mjs:
import { postcssConfig } from '@westpac/style-config/postcss';
export default postcssConfig;
In your main CSS file, add these imports:
@import 'tailwindcss';
@import '@westpac/style-config/tailwind'; /* GEL theme config (typography, spacing, etc.) */
@import '@westpac/style-config/themes/wbc'; /* Brand color tokens — import each brand you need */
@source "./node_modules/@westpac/ui/src"; /* Enable Tailwind to scan component class names */
Add the data-brand attribute to a parent element in your HTML:
<html lang="en" data-brand="wbc">
<!-- Your app content -->
</html>
Or on any container element:
<div data-brand="wbc">
<!-- Your app content -->
</div>
Available brands:
wbc — Westpac Banking Corporationstg — St.George Bankbom — Bank of Melbournebsa — BankSAImport each brand's theme CSS that you need:
@import '@westpac/style-config/themes/wbc';
@import '@westpac/style-config/themes/stg';
@import '@westpac/style-config/themes/bom';
@import '@westpac/style-config/themes/bsa';
For multi-brand applications, dynamically switch with the data-brand attribute:
<div data-brand={currentBrand}>{/* Your app content */}</div>
Note: Dark mode (
data-theme="dark") is disabled in the current release.
Add the relevant @font-face declarations and update src paths to your font file locations:
/* BOM fonts */
@font-face {
src:
url('/fonts/lineto-brown-pro-light.woff2') format('woff2'),
url('/fonts/lineto-brown-pro-light.woff') format('woff');
font-family: 'Brown Pro';
font-weight: 100 300;
font-style: normal;
}
@font-face {
src:
url('/fonts/lineto-brown-pro-regular.woff2') format('woff2'),
url('/fonts/lineto-brown-pro-regular.woff') format('woff');
font-family: 'Brown Pro';
font-weight: 400 600;
font-style: normal;
}
@font-face {
src:
url('/fonts/lineto-brown-pro-bold.woff2') format('woff2'),
url('/fonts/lineto-brown-pro-bold.woff') format('woff');
font-family: 'Brown Pro';
font-weight: 700 900;
font-style: normal;
}
/* BSA fonts */
@font-face {
src:
url('/fonts/Aller_Lt.woff2') format('woff2'),
url('/fonts/Aller_Lt.woff') format('woff');
font-family: 'Aller';
font-weight: 100 600;
font-style: normal;
}
@font-face {
src:
url('/fonts/Aller_Bd.woff2') format('woff2'),
url('/fonts/Aller_Bd.woff') format('woff');
font-family: 'Aller';
font-weight: 700 900;
font-style: normal;
}
/* STG fonts */
@font-face {
src:
url('/fonts/dragonbold-bold-webfont.woff2') format('woff2'),
url('/fonts/dragonbold-bold-webfont.woff') format('woff');
font-family: 'Dragon Bold';
font-weight: 100 900;
font-style: normal;
}
/* WBC fonts */
@font-face {
src:
url('/fonts/Westpac-Bold-v2.007.woff2') format('woff2'),
url('/fonts/Westpac-Bold-v2.007.woff') format('woff');
font-family: 'Westpac';
font-weight: 100 900;
font-style: normal;
}
For Next.js projects:
// eslint.config.mjs
import eslintConfig from '@westpac/eslint-config/nextjs';
import { defineConfig } from 'eslint/config';
export default defineConfig([
...eslintConfig,
{
settings: {
'better-tailwindcss': {
entryPoint: 'src/globals.css',
},
},
},
]);
For non-Next.js projects, you may need to disable certain Next.js-specific rules:
// .eslintrc.js
module.exports = {
root: true,
extends: ['@westpac/eslint-config/nextjs'],
rules: {
'@next/next/no-html-link-for-pages': 0,
},
};