skills.rest
Wox-launcher
Wox-launcherOFFICIAL
Explore all skills by this author →
WebsiteGitHub

wox-visual-style

Design, implement, and review visual style for Wox Go UI components and views.

27.3k|2.4k|Updated Dec 19, 2013
Search Tags:# accessibility#Design system#visual style#ui consistency#Code review#wox launcher#go ui
One-click install
npx skills add https://github.com/Wox-launcher/Wox --skill wox-visual-style
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: wox-visual-style
Source: https://github.com/Wox-launcher/Wox/tree/main/.agents/skills/wox-visual-style
Command: npx skills add https://github.com/Wox-launcher/Wox --skill wox-visual-style

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Wox's portable Go UI under wox.core/ui can drift into inconsistent control sizes, colors, typography, and interaction states across Settings pages, dialogs, and the Launcher. This Skill enforces a single visual contract so UI changes stay coherent without accidentally altering business behavior.

Core Features & Use Cases

  • Visual contract enforcement: Loads a canonical style guide covering control size tiers, semantic colors, typography, spacing rhythm, integer logical units, and a full interaction state matrix.
  • Surface classification: Distinguishes ordinary management pages from special surfaces like the Launcher query and Action Panel, each with its own geometry contract.
  • Layered implementation guidance: Directs reusable visuals into launcher/component and page-specific layout into launcher/view, with proportional validation via gofmt and focused Go tests.
  • Use Case: When adding a new Settings dropdown, use this Skill to apply the standard 32-unit control tier, semantic theme colors, and all required states, then audit for drift against existing shared Wox components.

Quick Start

Use the wox-visual-style skill to review my new Settings page in wox.core/ui for visual consistency with the shared style guide.

Frequently Asked Questions about wox-visual-style

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

FAQPage Schema
How do I keep Wox Go UI controls visually consistent across pages?▼

Use the shared Wox components in launcher/component and the semantic theme roles instead of page-local colors or sizes. The visual style guide defines standard control geometry, typography, and spacing so equivalent controls look alike across Settings, dialogs, and tables.

What control sizes should Wox Settings pages use?▼

Ordinary buttons, text fields, dropdowns, and icon buttons use the Standard 32-unit tier, dense table actions may use Compact 28, and page-level search composites use 40. The Launcher query and Action Panel keep their own special geometry contracts.

Does the Wox visual style apply to the Launcher query and Action Panel?▼

No, the Launcher query, results, toolbar, and the complete Action Panel are special surfaces with their own density and theme geometry. They must never be normalized to the ordinary 32-unit control height.

Why should fractional pixel values be avoided in Wox UI layout?▼

Fractional logical units like 0.5 or 12.5 clip under coverage antialiasing and CJK font metrics, causing visual artifacts. Authored sizes, padding, radii, borders, and font sizes must be whole logical units, with conversion to physical pixels only at the renderer boundary.

When should a visual change go in launcher/component versus launcher/view?▼

Reusable geometry, appearance, pointer states, focus treatment, and accessibility belong in launcher/component. Page hierarchy, responsive composition, and genuinely page-specific spacing belong in launcher/view, without recreating shared controls locally.

Related Skills

Explore More Software Engineering Skills→
Wox-launcherWox-launcher
27.2k

wox-plugin-creator

Scaffold Node.js, Python, and script Wox plugins from official templates.

Official
Intermediate
liatrio-labsliatrio-labs
2

git-commit-conventional

Generate Conventional Commit messages and execute safe Git commits.

Official
Advanced
spencerpaulyspencerpauly
672

accessibility-auditing

Audit web pages for accessibility issues using browser snapshots and keyboard navigation checks.

Community
Intermediate
modrinthmodrinth
2.3k

cross-platform-pages

Convert web pages into shared layouts for Modrinth website and desktop app.

Official
Intermediate