关于
This skill helps developers build reusable Shiny modules with proper namespace isolation using NS(). It covers creating UI/server pairs, managing reactive return values, and enabling inter-module communication and nested composition. Use it when extracting reusable components from a growing app, encapsulating complex logic, or composing larger applications from smaller, testable units.
快速安装
Claude Code
推荐npx skills add pjt222/agent-almanac -a claude-code/plugin add https://github.com/pjt222/agent-almanacgit clone https://github.com/pjt222/agent-almanac.git ~/.claude/skills/build-shiny-module在 Claude Code 中复制并粘贴此命令以安装该技能
技能文档
建 Shiny 模
造可重用之 Shiny UI/server 模對附名間隔、反應通、可組。
用
- 自增長 Shiny 應取可重用件
- 建於多處用之 UI 件
- 以清介包繁反應邏
- 自小可試單組大應
入
- 必:模旨與能述
- 必:入/出契(模受與返何)
- 可:模嵌他模否(默:否)
- 可:框脈(golem、rhino、或原生)
行
一:定模介
書碼前→定模受何返何:
Module: data_filter
Inputs: reactive dataset, column names to filter on
Outputs: reactive filtered dataset
UI: filter controls (selectInput, sliderInput, dateRangeInput)
得: 清契附反應入、反應出、UI 件。
敗: 介不清→模或過廣。分為單責之小模。
二:造模 UI 函
#' Data Filter Module UI
#'
#' @param id Module namespace ID
#' @return A tagList of filter controls
#' @export
dataFilterUI <- function(id) {
ns <- NS(id)
tagList(
selectInput(
ns("column"),
"Filter column",
choices = NULL
),
uiOutput(ns("filter_control")),
actionButton(ns("apply"), "Apply Filter", class = "btn-primary")
)
}
要律:
- 函名循
<name>UI規 - 首參必為
id - 首行造
ns <- NS(id) - 每
inputId與outputId以ns()包 - 返
tagList()以允活置
得: UI 函造含名間隔之入/出件。
敗: 模二用 ID 撞→察每 ID 以 ns() 包。常遺:renderUI() 或 uiOutput() 中之 ID—此亦需 ns()。
三:造模 Server 函
#' Data Filter Module Server
#'
#' @param id Module namespace ID
#' @param data Reactive expression returning a data frame
#' @param columns Character vector of filterable column names
#' @return Reactive expression returning the filtered data frame
#' @export
dataFilterServer <- function(id, data, columns) {
moduleServer(id, function(input, output, session) {
ns <- session$ns
# Update column choices when data changes
observeEvent(data(), {
available <- intersect(columns, names(data()))
updateSelectInput(session, "column", choices = available)
})
# Dynamic filter control based on selected column
output$filter_control <- renderUI({
req(input$column)
col_data <- data()[[input$column]]
if (is.numeric(col_data)) {
sliderInput(
ns("value_range"),
"Range",
min = min(col_data, na.rm = TRUE),
max = max(col_data, na.rm = TRUE),
value = range(col_data, na.rm = TRUE)
)
} else {
selectInput(
ns("value_select"),
"Values",
choices = unique(col_data),
multiple = TRUE,
selected = unique(col_data)
)
}
})
# Return filtered data as a reactive
filtered <- eventReactive(input$apply, {
req(input$column)
col <- input$column
df <- data()
if (is.numeric(df[[col]])) {
req(input$value_range)
df[df[[col]] >= input$value_range[1] &
df[[col]] <= input$value_range[2], ]
} else {
req(input$value_select)
df[df[[col]] %in% input$value_select, ]
}
}, ignoreNULL = FALSE)
return(filtered)
})
}
要律:
- 函名循
<name>Server規 - 首參必為
id - 餘參為反應表或靜值
- 用
moduleServer(id, function(input, output, session) { ... }) - Server 內動 UI 用
session$ns - 顯返反應值
得: server 函處入返反應出。
敗: 反應值不更→察動 UI 之入用 session$ns(非外 ns)。模返 NULL→確 return() 為 moduleServer() 內末表。
四:連模於父應
# In app_ui.R or ui
ui <- page_sidebar(
title = "Analysis App",
sidebar = sidebar(
dataFilterUI("filter1")
),
card(
DT::dataTableOutput("table")
)
)
# In app_server.R or server
server <- function(input, output, session) {
# Raw data source
raw_data <- reactive({ mtcars })
# Call module — capture its return value
filtered_data <- dataFilterServer(
"filter1",
data = raw_data,
columns = c("cyl", "mpg", "hp", "wt")
)
# Use the module's returned reactive
output$table <- DT::renderDataTable({
filtered_data()
})
}
得: 模現 UI 且返反應流至下游出。
敗: 模 UI 不渲→驗 id 串於 UI 與 server 呼合。返反應 NULL→察 server 函實返值。
五:組嵌模(可選)
含他模之模:
analysisUI <- function(id) {
ns <- NS(id)
tagList(
dataFilterUI(ns("filter")),
plotOutput(ns("plot"))
)
}
analysisServer <- function(id, data) {
moduleServer(id, function(input, output, session) {
# Call inner module with namespaced ID
filtered <- dataFilterServer("filter", data = data, columns = names(data()))
output$plot <- renderPlot({
req(filtered())
plot(filtered())
})
return(filtered)
})
}
要律:UI 中以 ns("inner_id") 嵌。Server 中唯 "inner_id"—moduleServer 處名鏈。
得: 內模於外模名間正渲。
敗: 內模 UI 不現→或外 UI 函忘 ns() 包內模 ID。server 通破→察內模 ID 合(server 呼無 ns())。
六:隔試模
# Quick test app for the module
if (interactive()) {
shiny::shinyApp(
ui = fluidPage(
dataFilterUI("test"),
DT::dataTableOutput("result")
),
server = function(input, output, session) {
data <- reactive(iris)
filtered <- dataFilterServer("test", data, names(iris))
output$result <- DT::renderDataTable(filtered())
}
)
}
得: 模於最簡試應正行。
敗: 模隔敗而全應行(或反)→察隱全變依或父會態。
驗
- 模 UI 函受
id首參且用NS(id) - UI 中每入/出 ID 以
ns()包 - 模 server 用
moduleServer(id, function(input, output, session) { ... }) - server 中動 UI 用
session$ns於 ID - 模可多實無 ID 撞
- 反應返值父應可達
- 模於最簡獨試應行
忌
renderUI()中忘ns():server 內造動 UI 必用session$ns—外ns於moduleServer()內不可得。- 傳非反應資:經時變之模參必為反應表。傳
reactive(data)非data。 - ID 不合:UI 呼與 server 呼之
id串必全合。 - 不返反應:模算父所需→必
return()反應。忘此為默誤。 - 嵌模名間:UI:
ns("inner_id")。server:唯"inner_id"。混此致名重包或缺前。
參
scaffold-shiny-app— 加模前設應構test-shiny-app— 以 testServer() 單試模design-shiny-ui— 模 UI 之 bslib 布與題optimize-shiny-performance— 模中快與異模
GitHub 仓库
Frequently asked questions
What is the build-shiny-module skill?
build-shiny-module is a Claude Skill by pjt222. Skills package instructions and resources that Claude loads on demand, so Claude can perform build-shiny-module-related tasks without extra prompting.
How do I install build-shiny-module?
Use the install commands on this page: add build-shiny-module to Claude Code as a plugin, or clone its repository into your skills directory, then restart Claude so it picks up the skill.
What category does build-shiny-module belong to?
build-shiny-module is in the Meta category, tagged react, ai, testing and design.
Is build-shiny-module free to use?
Yes. build-shiny-module is listed on AIMCP and free to install. It runs inside Claude, so no separate service account is required to use the skill itself.
相关推荐技能
Content Collections 是一个 TypeScript 优先的构建工具,可将本地 Markdown/MDX 文件转换为类型安全的数据集合。它专为构建博客、文档站和内容密集型 Vite+React 应用而设计,提供基于 Zod 的自动模式验证。该工具涵盖从 Vite 插件配置、MDX 编译到生产环境部署的完整工作流。
这个Claude Skill为开发者提供完整的Polymarket预测市场开发支持,涵盖API调用、交易执行和市场数据分析。关键特性包括实时WebSocket数据流,可监控实时交易、订单和市场动态。开发者可用它构建预测市场应用、实施交易策略并集成实时市场预测功能。
该Skill帮助开发者创建OpenCode插件,用于接入命令、文件、LSP等25+种事件。它提供了插件结构、事件API规范和JavaScript/TypeScript实现模式,适合需要拦截操作、扩展功能或自定义事件处理的场景。开发者可通过它快速构建响应式模块来增强OpenCode AI助手的能力。
SGLang是一个专为LLM设计的高性能推理框架,特别适用于需要结构化输出的场景。它通过RadixAttention前缀缓存技术,在处理JSON、正则表达式、工具调用等具有重复前缀的复杂工作流时,能实现极速生成。如果你正在构建智能体或多轮对话系统,并追求远超vLLM的推理性能,SGLang是理想选择。
