skills.rest
metabench
metabenchCOMMUNITY
Explore all skills by this author →
GitHub

jsgui3-wlilo-ui

Applies WLILO design tokens and styling conventions to jsgui3 UI components.

1|Updated Sep 12, 2025
Search Tags:#design system#ui design#jsgui3#css tokens#table styling#dashboard styling#wlilo
One-click install
npx skills add https://github.com/metabench/copilot-dl-news --skill jsgui3-wlilo-ui-metabench
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: jsgui3-wlilo-ui
Source: https://github.com/metabench/copilot-dl-news/tree/main/docs/agi/skills/jsgui3-wlilo-ui
Command: npx skills add https://github.com/metabench/copilot-dl-news --skill jsgui3-wlilo-ui-metabench

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Styling jsgui3 interfaces consistently is difficult when developers use ad-hoc inline styles and arbitrary colors, leading to visual inconsistency and performance problems from excessive control counts. ## Core Features & Use Cases - Token-Driven Styling: Enforces a small set of CSS variables (--wlilo-bg, --wlilo-panel, --wlilo-gold, etc.) applied via container classes instead of inline per-node styling. - Layout & Icon Conventions: Standardizes obsidian panels on leather backgrounds, thin gold borders, and the repo's emoji-icon action convention (🔍 search, ⚙️ settings, ➕ add). - Performance Hygiene: Guides developers to keep control counts lean, render plain HTML for repeated table rows, and paginate lists over ~200 items. - Use Case: When polishing a dashboard or table view in a jsgui3 server route, use this Skill to apply the correct panel classes, tokens, and icon buttons, then validate with the nearest checks/*.check.js file. ## Quick Start Restyle my jsgui3 dashboard route using the WLILO design system with obsidian panels and the standard icon action buttons.

Frequently Asked Questions about jsgui3-wlilo-ui

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

FAQPage Schema
How do I style a jsgui3 dashboard with the WLILO design system?▼

Apply the .wlilo-app container class to set base CSS tokens, then wrap content in .wlilo-panel or .wlilo-panel--subtle for obsidian panels on the leather background. Use semantic variables like --wlilo-bg, --wlilo-panel, and --wlilo-gold instead of hardcoded colors.

What CSS tokens does the WLILO design system use?▼

WLILO uses a small semantic token set: --wlilo-bg, --wlilo-panel, --wlilo-panel-2, --wlilo-border, --wlilo-text, --wlilo-text-muted, --wlilo-gold, and optionally --wlilo-blue. These are applied through container classes rather than inline per-node styling.

How do I avoid performance issues with large jsgui3 tables?▼

Keep control counts lean by rendering plain HTML for repeated rows and cells instead of creating jsgui3 controls for every node. When lists exceed roughly 200 items, use lazy loading, pagination, or virtualization to avoid creating thousands of DOM controls.

When should I not use the jsgui3 WLILO styling skill?▼

Do not use it for fixing jsgui3 activation bugs, which belong to the jsgui3-activation-debug skill, or for large UX redesigns that warrant a dedicated session. It is scoped to applying WLILO tokens, panels, icons, and styling hygiene.

How do I validate jsgui3 UI styling changes?▼

Run the nearest checks/*.check.js file if you changed a control's markup, run npm run ui:client-build if you changed client-side assets, and run the smallest relevant Jest suite via npm run test:by-path if you changed behavior.

Related Skills

Explore More Design & Creative Skills→
fcalellfcalell

design-system

Establish scalable design systems with intent-driven tokens and documentation.

Community
Advanced
NVIDIANVIDIA
2.8k

cuopt-server-api-python

Deploy cuOpt REST server and access routing endpoints with Python clients.

Official
Intermediate
metabenchmetabench

jsgui3-activation-debug

Diagnose jsgui3 client-side activation failures with non-functional user interactions.

Community
Intermediate
Nutopia13Nutopia13

human-optimized-frontend

Generate a declarative frontend specification harmonizing typography, color, layout, motion, and UX.

Community
Advanced