skills.rest
mferris77
mferris77COMMUNITY
Explore all skills by this author →
GitHub

electron-specified

Enforce PrimeVue components, token-driven styling, and light/dark theming in Electron interfaces.

Updated Aug 23, 2026
Search Tags:#theming#ui#accessibility#frontend#electron#design-system#primevue
One-click install
npx skills add https://github.com/mferris77/SpringBoard --skill electron-specified
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: electron-specified
Source: https://github.com/mferris77/SpringBoard/tree/main/.github/skills/electron-specified
Command: npx skills add https://github.com/mferris77/SpringBoard --skill electron-specified

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill eliminates inconsistent Electron UI implementations by enforcing PrimeVue components, centralized token-driven styling, system-aware theming, and accessible contrast standards so interfaces remain cohesive, brand-accurate, and responsive across light and dark modes.

Core Features & Use Cases

  • Component Consistency: Replace ad hoc controls with PrimeVue primitives and PrimeIcons to ensure predictable behavior and visual weight.
  • Token-Driven Styling & Typography: Centralize spacing, color, motion, and KantarBrown typography tokens to avoid fragmented visual rules.
  • Theming & Accessibility Validation: Implement system-preference light/dark theming, preserve brand colors, and verify contrast and keyboard interactions.
  • Use Case: Update the chat sidebar and composer to use shared tokens, ensure no layout overflow when toggling the sidebar, and validate accessibility and responsive behavior on compact widths.

Quick Start

Use the electron-specified skill to update the chat sidebar component to PrimeVue, apply centralized styling tokens and KantarBrown typography, validate both light and dark themes, and run accessibility contrast and keyboard interaction checks.

Frequently Asked Questions about electron-specified

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

FAQPage Schema
How do I build consistent Electron UIs with centralized styling and system-aware theming?▼

To build consistent Electron UIs, replace ad hoc controls with PrimeVue components and PrimeIcons, apply centralized token-driven styling, and implement light and dark theme support that responds to system preferences.

What is the best way to enforce accessibility contrast checks in an Electron frontend?▼

The best way to enforce accessibility contrast checks in an Electron frontend is to validate keyboard interactions and contrast standards using centralized styling tokens to ensure interfaces remain accessible in both light and dark themes.

How do I update Electron chat sidebar components to use shared design tokens?▼

To update Electron chat sidebar components, apply PrimeVue primitives, enforce KantarBrown typography tokens, and validate responsive layout behavior to ensure no overflow occurs when toggling the sidebar on compact widths.

Does this approach to Electron theming require PrimeVue and PrimeIcons?▼

Yes, this approach to Electron theming requires PrimeVue and PrimeIcons to ensure predictable component behavior, replace fragmented visual rules, and maintain visual weight consistency across the application interface.

Why does my Electron layout overflow when toggling the sidebar in dark mode?▼

Electron layout overflow during sidebar toggling often stems from fragmented visual rules; applying centralized spacing tokens and PrimeVue components resolves this by enforcing predictable responsive behavior across compact widths.

When do I need temporary diagnostic renderer logging during Electron feature validation?▼

You need temporary diagnostic renderer logging during Electron feature validation to bring up the renderer for testing, verifying that system-aware theming and accessibility updates function correctly before deployment.

Related Skills

Explore More Software Engineering Skills→
alxyrginalxyrgin
15

brand-guidelines

Apply Anthropic brand colors and typography to documents and presentations.

Community
Basic
zaid-khan-codezaid-khan-code
3

shadcn-ui-setup

Set up Shadcn UI components with dark mode in Next.js.

Community
Intermediate
BoristokaBoristoka

darkmode

Toggle website dark mode via HTML class and React component.

Community
Basic
corey-alixcorey-alix

CSS Theming Assistant

Manage CSS custom properties and enforce design tokens with Stylelint.

Official
Intermediate