ReddRadar
Agent skill
k-fenui
Context for FenUI - the UI widget library for WoW addons. Covers frames, layouts, buttons, panels, and theming. Load this when building addon UI or working with FenUI widgets. Triggers: fenui, ui, widget, frame, layout, panel, button, tabs.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/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
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?