@brighterly/lib-ui-kit-cs-vue

Brighterly design system — design tokens (and, over time, Vue 3 components).

Usage

// main.ts — load exactly ONE mode file per app (apps never mix modes)
import '@brighterly/lib-ui-kit-cs-vue/client.css' // or '@brighterly/lib-ui-kit-cs-vue/admin.css'
import '@brighterly/lib-ui-kit-cs-vue/style.css'  // component styles

<script setup lang="ts">
import { ItemAnswerHorizontal } from '@brighterly/lib-ui-kit-cs-vue'
</script>

Style custom UI with the semantic --btly-* CSS variables and .btly-text-<style> typography classes. For rare JS needs (charts, inline styles): import { token, brand, textClass } from '@brighterly/lib-ui-kit-cs-vue' — mode-agnostic var(--btly-…) reference strings.

Fonts: provide @fontsource/mona-sans + @fontsource/inter (client) or @fontsource/roboto (admin) — they are peerDependencies.

Requirements

For the full Figma ↔ code workflow, Claude needs the Figma plugin (figma@claude-plugins-official) — it provides the figma:* skills and the Figma MCP. This repo enables it via .claude/settings.json, but plugins are per-developer config and do not arrive with git clone, so each developer sets it up once:

1. Install — in Claude Code run /plugin and install figma (from claude-plugins-official).
2. Authenticate — /mcp → figma → Authenticate (opens a browser). Installed ≠ authenticated.
3. Verify — /mcp shows figma … ✓ Connected; /skills lists figma:*.

This brings every developer to the same Figma-enabled state. The repo ships only its own skill, brighterly-design-system (.claude/skills/); never vendor copies of the Figma plugin's skills.

Font Awesome agent tools

Icons in this DS are FontAwesome 7 Pro, so Claude also needs the official Font Awesome agent-tools plugin (icons@fontawesome-agent-tools) — it provides the icons:* skills (/suggest-icon, /add-icon, /fa-help, /setup-fa) for finding and verifying FA icons against the live FA library/docs instead of stale training data. Like the Figma plugin it is enabled via committed .claude/settings.json (its marketplace declared in extraKnownMarketplaces), but plugins are per-developer config and do not arrive with git clone, so each developer installs it once:

1. Add the marketplace — in Claude Code run /plugin marketplace add FortAwesome/fontawesome-agent-tools (or npx skills add FortAwesome/fontawesome-agent-tools for the skills without the plugin wrapper).
2. Install — /plugin install icons@fontawesome-agent-tools.
3. Verify — /skills lists icons:* (e.g. icons:suggest-icon).

Scope note: use these tools to find / verify the right FA icon name and to answer FA questions — how an icon lands in code is governed by the DS's own <Icon> component and registry, not the raw output of /add-icon (which emits FontAwesome's generic per-icon integration). Treat /add-icon output as reference, not the DS pattern. FA-Pro registry creds (NPM_FORTAWESOME_ACCESS, see below) are still required to install the icon packages themselves.

Publishing New Versions

This project uses GitHub Actions for automatic deployment to NPM. To release a new version, follow these steps:

1. Bump the version Use one of the following commands to update package.json and create a git tag:

   pnpm version patch   # 1.0.0 -> 1.0.1 (bug fixes)
   pnpm version minor   # 1.0.0 -> 1.1.0 (new features)
   pnpm version major   # 1.0.0 -> 2.0.0 (breaking changes)

2. Push repo to github:

   git push

3. NPM release will be created automatically

Git Hooks

Pre-commit hook

Runs pnpm lint and pnpm typecheck on staged .ts / .vue files.

Prepare:

chmod +x _tools/git/pre-commit
ln -s ../../_tools/git/pre-commit .git/hooks/pre-commit

Pre-push hook

Validates that a release tag (v*) matches the version in package.json before pushing.

Prepare:

chmod +x _tools/git/pre-push
ln -s ../../_tools/git/pre-push .git/hooks/pre-push

Dependencies

Create .env:

cp .env.example .env

Edit .env and add NPM_FORTAWESOME_ACCESS (registry) and FIGMA_ACCESS_TOKEN (Code Connect publish)

Install deps:

make install