Zurück zu Fähigkeiten

build-shiny-module

pjt222
Aktualisiert 5 days ago
13 Ansichten
17
2
17
Auf GitHub ansehen
Metareactaitestingdesign

Über

Diese Fähigkeit unterstützt Entwickler beim Erstellen wiederverwendbarer Shiny-Module mit ordnungsgemäßer Namespace-Isolierung mittels NS(). Sie behandelt das Erstellen von UI/Server-Paaren, das Verwalten reaktiver Werte sowie die Ermöglichung von Modulkommunikation und Verschachtelung. Nutzen Sie sie, wenn Sie wiederverwendbare Komponenten aus wachsenden Apps extrahieren, komplexe Logik kapseln oder größere Anwendungen aus testbaren Einheiten zusammensetzen möchten.

Schnellinstallation

Claude Code

Empfohlen
Primär
npx skills add pjt222/agent-almanac -a claude-code
Plugin-BefehlAlternativ
/plugin add https://github.com/pjt222/agent-almanac
Git CloneAlternativ
git clone https://github.com/pjt222/agent-almanac.git ~/.claude/skills/build-shiny-module

Kopieren Sie diesen Befehl und fügen Sie ihn in Claude Code ein, um diese Fähigkeit zu installieren

Dokumentation

建 Shiny 之模

建可復之 Shiny UI/server 模對,以 NS() 正隔名空,通以 reactive,組可複。

用時

  • 自成長之 Shiny 應取可復之件
  • 建多處所用之 UI 物
  • 以清介封繁 reactive 邏
  • 自小可測之元組大應

  • 必要:模之旨與功述
  • 必要:入出契(模所受與所返)
  • 可選:模是否嵌他模(默:否)
  • 可選:框脈(golem、rhino、或 vanilla)

第一步:定模之介

書碼前,定模所受與所返:

Module: data_filter
Inputs: reactive dataset, column names to filter on
Outputs: reactive filtered dataset
UI: filter controls (selectInput, sliderInput, dateRangeInput)

得: 清契,明 reactive 入、reactive 出、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)
  • inputIdoutputId 皆裹以 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
  • 餘參為 reactive 式或靜值
  • moduleServer(id, function(input, output, session) { ... })
  • server 內動 UI 用 session$ns
  • 明返 reactive 值

得: server 函處入而返 reactive 出。

敗則: 若 reactive 不更,察動 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,所返 reactive 流於下游。

敗則: 若模 UI 不渲,驗 UI 與 server 呼間之 id 合。若所返 reactive 為 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())
    }
  )
}

得: 模於至簡測應中正行。

敗則: 若模獨敗而全應中行(或反),察隱依於全變或父 session 態。

  • 模 UI 函首受 id 而用 NS(id)
  • UI 中諸入出 ID 皆以 ns()
  • 模 server 用 moduleServer(id, function(input, output, session) { ... })
  • server 內動 UI 用 session$ns 為 ID
  • 模可多例而 ID 不衝
  • reactive 返值可於父應取
  • 模於至簡獨測應中行

  • renderUI() 中之 ns():server 內建之動 UI 必用 session$ns——外 nsmoduleServer() 內不可用
  • 傳非 reactive 資料:模參隨時變者必為 reactive 式。傳 reactive(data),勿 data
  • ID 不合:UI 呼之 id 串必全合 server 呼之 id
  • 未返 reactive:若模算父所須之值,必 return() 一 reactive。忘之為默蟲
  • 嵌模之名空:UI 用 ns("inner_id")。server 用 "inner_id"。混之致名空雙裹或前綴缺

  • scaffold-shiny-app — 加模前立應構
  • test-shiny-app — 以 testServer() 單測模
  • design-shiny-ui — 模 UI 之 bslib 佈與主題
  • optimize-shiny-performance — 模中緩與異模式

GitHub Repository

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

Verwandte Skills

content-collections

Meta

Diese Skill bietet eine produktionsgetestete Einrichtung für Content Collections – ein TypeScript-first-Tool, das Markdown/MDX-Dateien in typsichere Datensammlungen mit Zod-Validierung umwandelt. Verwenden Sie ihn beim Erstellen von Blogs, Dokumentationsseiten oder inhaltsstarken Vite + React-Anwendungen, um Typsicherheit und automatische Inhaltsvalidierung zu gewährleisten. Er behandelt alles von der Vite-Plugin-Konfiguration und MDX-Kompilierung bis hin zur Deployment-Optimierung und Schema-Validierung.

Skill ansehen

polymarket

Meta

Diese Fähigkeit ermöglicht es Entwicklern, Anwendungen mit der Polymarket-Prognosemärkte-Plattform zu erstellen, einschließlich API-Integration für Handel und Marktdaten. Sie bietet außerdem Echtzeit-Datenstreaming über WebSocket, um Live-Trades und Marktaktivitäten zu überwachen. Nutzen Sie sie zur Implementierung von Handelsstrategien oder zur Erstellung von Tools, die Live-Marktaktualisierungen verarbeiten.

Skill ansehen

creating-opencode-plugins

Meta

Diese Fähigkeit unterstützt Entwickler dabei, OpenCode-Plugins zu erstellen, die in über 25 Ereignistypen wie Befehle, Dateien und LSP-Operationen eingreifen. Sie bietet die Plugin-Struktur, Event-API-Spezifikationen und Implementierungsmuster für JavaScript/TypeScript-Module. Nutzen Sie sie, wenn Sie den Lebenszyklus des OpenCode KI-Assistenten mit benutzerdefinierter ereignisgesteuerter Logik abfangen, überwachen oder erweitern müssen.

Skill ansehen

sglang

Meta

SGLang ist ein hochperformantes LLM-Serving-Framework, das sich auf schnelle, strukturierte Generierung für JSON, Regex und agentenbasierte Workflows unter Verwendung seines RadixAttention-Prefix-Cachings spezialisiert. Es bietet deutlich schnellere Inferenz, insbesondere für Aufgaben mit wiederholten Präfixen, was es ideal für komplexe, strukturierte Ausgaben und Mehrfachdialoge macht. Wählen Sie SGLang gegenüber Alternativen wie vLLM, wenn Sie constrained decoding benötigen oder Anwendungen mit umfangreicher Präfix-Weitergabe entwickeln.

Skill ansehen