Run any Skill in Manus with one click

dcc-ui

Stars1

Forks0

UpdatedJuly 6, 2026 at 15:31

Nuxt module of the Kanton Basel-Stadt design system for DCC Basel-Stadt apps: NavigationBar, DataBsFooter, SplitContainer/SplitView, Disclaimer/DisclaimerButton/DisclaimerPage, Changelogs, OnlineStatus, UndoRedoButtons components, the useUserFeedback composable, and the BS color palette. Use when building a DCC/Basel-Stadt Vue/Nuxt frontend or wiring up the common-ui.bs.js module.

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

DCC-BS

DCC-BS/bentoml-faster-whisper

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Web and Digital Interface DesignersComputer and Mathematical Occupations·SOC 15-1255

File Explorer

16 files

SKILL.md

readonly

name	dcc-ui
description	Nuxt module of the Kanton Basel-Stadt design system for DCC Basel-Stadt apps: NavigationBar, DataBsFooter, SplitContainer/SplitView, Disclaimer/DisclaimerButton/DisclaimerPage, Changelogs, OnlineStatus, UndoRedoButtons components, the useUserFeedback composable, and the BS color palette. Use when building a DCC/Basel-Stadt Vue/Nuxt frontend or wiring up the common-ui.bs.js module.

dcc-ui

Reference Sub-Guidelines

The following reference sub-guides are available in this skill directory. Read them using your file reading tools as needed:

Overview: Module overview, setup, and shared conventions.
changelogs: Propless Changelogs component that fetches changelog entries from the /changelogs endpoint, renders Markdown, and shows a modal of unread versions tracked via the changelogs-last-read localStorage key. Use when surfacing release notes or what's new to users on app load.
changelogs-howto: End-to-end guide for adding user-facing changelogs to a Nuxt app with @dcc-bs/common-ui.bs.js: the Changelogs component, changelog markdown file format/frontmatter, and version tracking. Use when implementing changelogs or writing release notes (the full how-to companion to the changelogs component reference).
databs-footer: DataBsFooter is a branded application footer with default DCC logo/branding and left, center, and right slots for custom links, version, or contact content. Use when adding a page footer.
disclaimer: Modal Disclaimer Vue component that gatekeeps app access until the user accepts terms; tracks accepted version in localStorage with HTML content. Use when adding a one-time terms/usage-guidelines acceptance gate (not the re-open DisclaimerButton or full-page DisclaimerPage).
disclaimer-button: DisclaimerButton is a button (variant outline or ghost) that re-opens the already-accepted disclaimer modal on demand. Use when users need to re-view terms after acceptance, e.g. in the NavigationBar. NOT the initial modal gate (disclaimer) or full page (disclaimer-page).
disclaimer-page: DisclaimerPage is a full-page disclaimer view with contentHtml and postfixHtml props and an acceptance mechanism, shown before app access. Use for a dedicated standalone disclaimer/terms page. NOT the popup modal gate (disclaimer) or re-open button (disclaimer-button).
navigation-bar: NavigationBar is a responsive top nav bar with left/center/right slots plus rightPreItems/rightPostItems, including a built-in DisclaimerButton and LanguageSelect and i18n app-name branding. Use when building the app header/top navigation.
online-status: OnlineStatus is a color-coded health indicator (green/red) with tooltip that polls a server health endpoint at a configurable pollInterval, with optional showText and custom isOnlineCheckFunction props. Use when showing live server connectivity status.
split-container: SplitContainer is a propless card with header, left, and right slots showing two side-by-side panes (fixed border divider) that stack vertically on mobile. Use for static paired/comparison layouts. NOT user-resizable (use split-view for a draggable resizer).
split-view: SplitView is a resizable two-pane layout with a draggable resizer, a/b slots, isHorizontal orientation toggle, and per-pane/resizer style props. Use when users need to drag-adjust pane proportions. NOT a fixed card (use split-container for a non-resizable header layout).
ui-components-catalog: Catalog of all common-ui.bs.js Vue components (SplitView, SplitContainer, DisclaimerLlm/Button/Page, DataBsFooter, DataBsBanner, UndoRedoButtons, Changelogs, NavigationBar, OnlineStatus) with one-line summaries. Use to discover which DCC UI component fits a need before opening its detailed reference.
ui-composables-catalog: Catalog of common-ui.bs.js Vue composables (useUserFeedback) with one-line summaries. Use to discover which DCC UI composable fits a need before opening its detailed reference.
undo-redo-buttons: UndoRedoButtons is a pair of tooltip buttons taking canUndo/canRedo props and emitting @undo/@redo events, auto-disabled when unavailable. Use when adding undo/redo controls to an editor or form.
useUserFeedback: Vue/Nuxt composable returning showToast and showError to display Nuxt UI toast notifications (success/info/warning/error) and i18n-translated API error messages. Use when surfacing user feedback, toasts, or handling ApiError responses in a DCC frontend.

More from this repository

same repository

dcc-coding

DCC-BS/bentoml-faster-whisper

DCC coding standards across languages and stacks. Routes to language-specific conventions for Nuxt/Vue/TypeScript frontends and Python/FastAPI backends. Use when writing or reviewing code in a DCC project and you need naming, structure, tooling, or style conventions for .vue, .ts, or .py files.

2026-07-101

dcc-git

DCC-BS/bentoml-faster-whisper

DCC developer workflow and Git/CI/CD conventions: picking an issue from the project board, feature/fix branching (GitHub Flow), local checks, PR review with CodeRabbit, manual SemVer version bumps, releasing via DCC-BS/ci-workflows reusable workflows, Helm deployment, secrets in Proton Pass + varlock, and the /documentation PR command. Use when setting up CI, writing or reviewing GitHub Actions workflows, or doing branching/PR/release work in a DCC project.

2026-07-101

dcc-backend

DCC-BS/bentoml-faster-whisper

Shared Python library dcc-backend-common for FastAPI services. Use when building or maintaining a DCC backend and needing its reusable modules: config (Pydantic AppConfig/LlmConfig), structlog logging, fastapi_health_probes (Kubernetes probes), fastapi_error_handling, usage_tracking, and the Pydantic AI llm_agent framework. Routes to the matching module reference.

2026-07-061

dcc-nuxt-layers

DCC-BS/bentoml-faster-whisper

DCC-BS reusable Nuxt layers — partial Nuxt apps shared across projects via extends: ['github:DCC-BS/nuxt-layers/...']. Use when adding, configuring, or choosing among the five layers: auth (Azure AD/no-auth switching), backend_communication (backendHandlerBuilder), logger (pino), feedback-control (GitHub-issue widget), and health_check (Kubernetes probes).

2026-07-061

docker

DCC-BS/bentoml-faster-whisper

Docker containerization standards for DCC-BS projects: multi-stage Dockerfiles, .dockerignore, docker-compose extends pattern (services.compose.yml + dev/prod overrides), alpine/slim images, non-root users, GHCR (ghcr.io/dcc-bs) tagging/CI, hadolint/dive linting, nginx proxy, and Nuxt-layer build-args (AUTH_LAYER_URI, ARG vs ENV). Use when writing/reviewing a Dockerfile or compose file or containerizing a Node/Bun/Nuxt or Python (uv) app.

2026-07-061

varlock

DCC-BS/bentoml-faster-whisper

Manages environment variables with the varlock tool: .env.schema validation, secret injection (Proton Pass, exec()), leak scanning, auto-generated TypeScript env.d.ts types, and APP_MODE buildtime/runtime splits. Use for varlock scan/run, env:check, or wiring varlock into Nuxt/Vite, Python/FastAPI Makefiles, or Docker.

2026-07-061

name	dcc-ui
description	Nuxt module of the Kanton Basel-Stadt design system for DCC Basel-Stadt apps: NavigationBar, DataBsFooter, SplitContainer/SplitView, Disclaimer/DisclaimerButton/DisclaimerPage, Changelogs, OnlineStatus, UndoRedoButtons components, the useUserFeedback composable, and the BS color palette. Use when building a DCC/Basel-Stadt Vue/Nuxt frontend or wiring up the common-ui.bs.js module.

dcc-ui

Reference Sub-Guidelines

The following reference sub-guides are available in this skill directory. Read them using your file reading tools as needed:

Overview: Module overview, setup, and shared conventions.
changelogs: Propless Changelogs component that fetches changelog entries from the /changelogs endpoint, renders Markdown, and shows a modal of unread versions tracked via the changelogs-last-read localStorage key. Use when surfacing release notes or what's new to users on app load.
changelogs-howto: End-to-end guide for adding user-facing changelogs to a Nuxt app with @dcc-bs/common-ui.bs.js: the Changelogs component, changelog markdown file format/frontmatter, and version tracking. Use when implementing changelogs or writing release notes (the full how-to companion to the changelogs component reference).
databs-footer: DataBsFooter is a branded application footer with default DCC logo/branding and left, center, and right slots for custom links, version, or contact content. Use when adding a page footer.
disclaimer: Modal Disclaimer Vue component that gatekeeps app access until the user accepts terms; tracks accepted version in localStorage with HTML content. Use when adding a one-time terms/usage-guidelines acceptance gate (not the re-open DisclaimerButton or full-page DisclaimerPage).
disclaimer-button: DisclaimerButton is a button (variant outline or ghost) that re-opens the already-accepted disclaimer modal on demand. Use when users need to re-view terms after acceptance, e.g. in the NavigationBar. NOT the initial modal gate (disclaimer) or full page (disclaimer-page).
disclaimer-page: DisclaimerPage is a full-page disclaimer view with contentHtml and postfixHtml props and an acceptance mechanism, shown before app access. Use for a dedicated standalone disclaimer/terms page. NOT the popup modal gate (disclaimer) or re-open button (disclaimer-button).
navigation-bar: NavigationBar is a responsive top nav bar with left/center/right slots plus rightPreItems/rightPostItems, including a built-in DisclaimerButton and LanguageSelect and i18n app-name branding. Use when building the app header/top navigation.
online-status: OnlineStatus is a color-coded health indicator (green/red) with tooltip that polls a server health endpoint at a configurable pollInterval, with optional showText and custom isOnlineCheckFunction props. Use when showing live server connectivity status.
split-container: SplitContainer is a propless card with header, left, and right slots showing two side-by-side panes (fixed border divider) that stack vertically on mobile. Use for static paired/comparison layouts. NOT user-resizable (use split-view for a draggable resizer).
split-view: SplitView is a resizable two-pane layout with a draggable resizer, a/b slots, isHorizontal orientation toggle, and per-pane/resizer style props. Use when users need to drag-adjust pane proportions. NOT a fixed card (use split-container for a non-resizable header layout).
ui-components-catalog: Catalog of all common-ui.bs.js Vue components (SplitView, SplitContainer, DisclaimerLlm/Button/Page, DataBsFooter, DataBsBanner, UndoRedoButtons, Changelogs, NavigationBar, OnlineStatus) with one-line summaries. Use to discover which DCC UI component fits a need before opening its detailed reference.
ui-composables-catalog: Catalog of common-ui.bs.js Vue composables (useUserFeedback) with one-line summaries. Use to discover which DCC UI composable fits a need before opening its detailed reference.
undo-redo-buttons: UndoRedoButtons is a pair of tooltip buttons taking canUndo/canRedo props and emitting @undo/@redo events, auto-disabled when unavailable. Use when adding undo/redo controls to an editor or form.
useUserFeedback: Vue/Nuxt composable returning showToast and showError to display Nuxt UI toast notifications (success/info/warning/error) and i18n-translated API error messages. Use when surfacing user feedback, toasts, or handling ApiError responses in a DCC frontend.