返回技能列表

build-shiny-module

pjt222
更新于 6 days ago
22 次查看
17
2
17
在 GitHub 上查看
reactaitestingdesign

关于

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-almanac
Git 克隆备选方式
git 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)
  • inputIdoutputIdns()
  • 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—外 nsmoduleServer() 內不可得。
  • 傳非反應資:經時變之模參必為反應表。傳 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 仓库

pjt222/agent-almanac
路径: i18n/wenyan-ultra/skills/build-shiny-module
0
agentsagentskillsai-assisted-developmentclaude-codeskillsteams

相关推荐技能

content-collections

Content Collections 是一个 TypeScript 优先的构建工具,可将本地 Markdown/MDX 文件转换为类型安全的数据集合。它专为构建博客、文档站和内容密集型 Vite+React 应用而设计,提供基于 Zod 的自动模式验证。该工具涵盖从 Vite 插件配置、MDX 编译到生产环境部署的完整工作流。

查看技能

polymarket

这个Claude Skill为开发者提供完整的Polymarket预测市场开发支持,涵盖API调用、交易执行和市场数据分析。关键特性包括实时WebSocket数据流,可监控实时交易、订单和市场动态。开发者可用它构建预测市场应用、实施交易策略并集成实时市场预测功能。

查看技能

creating-opencode-plugins

该Skill帮助开发者创建OpenCode插件,用于接入命令、文件、LSP等25+种事件。它提供了插件结构、事件API规范和JavaScript/TypeScript实现模式,适合需要拦截操作、扩展功能或自定义事件处理的场景。开发者可通过它快速构建响应式模块来增强OpenCode AI助手的能力。

查看技能

sglang

SGLang是一个专为LLM设计的高性能推理框架,特别适用于需要结构化输出的场景。它通过RadixAttention前缀缓存技术,在处理JSON、正则表达式、工具调用等具有重复前缀的复杂工作流时,能实现极速生成。如果你正在构建智能体或多轮对话系统,并追求远超vLLM的推理性能,SGLang是理想选择。

查看技能