Claude-skill-registry k-fenui

install

source · Clone the upstream repo

git clone https://github.com/majiayu000/claude-skill-registry

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/majiayu000/claude-skill-registry "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/data/k-fenui" ~/.claude/skills/majiayu000-claude-skill-registry-k-fenui && rm -rf "$T"

manifest: skills/data/k-fenui/SKILL.md

FenUI Library

FenUI is a UI widget library for WoW addons - pre-built components with consistent styling and behavior.

Design Philosophy

Composable: Build complex UIs from simple widgets
Themeable: Consistent look across all widgets
Declarative: Describe what you want, not how to build it
Accessible: Proper focus handling and keyboard navigation

Widget Categories

Category	Widgets	Purpose
Containers	`Panel` , `Frame` , `Window`	Hold other widgets
Layout	`Layout` , `Grid` , `Stack`	Arrange children
Input	`Button` , `EditBox` , `Slider` , `Checkbox`	User interaction
Display	`Label` , `Icon` , `ProgressBar` , `Texture`	Show information
Navigation	`Tabs` , `ScrollFrame` , `Dropdown`	Navigate content

Usage Pattern

local FenUI = LibStub("FenUI")

-- Create a panel with children
local panel = FenUI.Panel:Create(parent, {
    width = 300,
    height = 200,
    title = "My Panel",
})

-- Add a button
local button = FenUI.Button:Create(panel, {
    text = "Click Me",
    onClick = function() print("Clicked!") end,
})

Layout System

FenUI uses a declarative layout system:

local layout = FenUI.Layout:Create(parent, {
    direction = "vertical",  -- or "horizontal"
    spacing = 8,
    padding = { top = 10, bottom = 10, left = 10, right = 10 },
})

-- Children are automatically arranged
layout:AddChild(widget1)
layout:AddChild(widget2)
layout:AddChild(widget3)

Common Widgets

Panel

FenUI.Panel:Create(parent, {
    width = 300,
    height = 200,
    title = "Title",        -- Optional header
    closable = true,        -- Show close button
    movable = true,         -- Allow dragging
})

Button

FenUI.Button:Create(parent, {
    text = "Click Me",
    width = 100,
    height = 24,
    onClick = function() end,
    onEnter = function() end,  -- Hover
    onLeave = function() end,
})

Tabs

FenUI.Tabs:Create(parent, {
    tabs = {
        { id = "tab1", label = "First", content = frame1 },
        { id = "tab2", label = "Second", content = frame2 },
    },
    defaultTab = "tab1",
    onTabChanged = function(tabId) end,
})

Grid

FenUI.Grid:Create(parent, {
    columns = 3,
    rowHeight = 30,
    columnWidth = 100,
    spacing = 4,
})

Theming

FenUI supports theming via a theme table:

FenUI:SetTheme({
    colors = {
        background = { 0.1, 0.1, 0.1, 0.9 },
        text = { 1, 1, 1, 1 },
        accent = { 0.2, 0.6, 1, 1 },
    },
    fonts = {
        normal = "GameFontNormal",
        header = "GameFontNormalLarge",
    },
})

Best Practices

Use Layout - Don't manually position widgets; use Layout containers
Prefer FenUI widgets - Don't create raw frames when a FenUI widget exists
Keep View layer thin - UI code should just display data from Bridge layer
Test at different scales - Check UI at various UI scale settings