smithery.ai

create-view

Guide to building Custom Views, Dashboards, and Action Buttons.

First seen Mar 31, 2026

Installation

$ npx skills add https://smithery.ai

Similar popular skills

Related neighbors and high-traction skills in the same topics — useful to compare before installing.

Also in this package

Other skills from smithery.ai · top by installs.

npx skills add https://smithery.ai

Browse all from smithery.ai

More details

Agent compatibility

Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.

Claude Code Not declared
Cursor Not declared
Codex Not declared
GitHub Copilot Not declared
Windsurf Not declared
Gemini CLI Not declared
Cline Not declared
OpenCode Not declared

Package contents

Files included with this skill beyond the listing page.

  • skill md SKILL.md 2,398 B
  • docs SUMMARY.md 82 B

History

  1. First seen on skills.sh
  2. First recorded snapshot · 1 installs

SKILL.md

Create View Skill

1. Concepts

  • Custom View: A specialized UI configuration for a specific task (e.g., "Manager Dashboard", "Triage Queue").
  • View Action: A button placed on a view that triggers a backend Logic/Workflow.

2. Defining a Custom View

Records go in records/100_metadata.scl (typically).

set dev_simple_system.custom_view, my_dashboard {
  display_name "Manager Dashboard"
  
  # TYPE:
  # - "record": Single record detail view.
  # - "list": Table list view.
  # - "dashboard": Widget canvas.
  type dashboard 

  # LINK:
  # Use variable lookup to find target table ID
  target_table_id `$var('meta') |> $jq('.tables[] | select(.name == "order") | .id')`
}

3. Defining a View Action (Button)

Buttons connect the UI to your Actions (via Triggers).

set dev_simple_system.view_action, btn_approve {
  name "approve-order"
  label "Approve Order"
  icon "check-circle"  # Feather Icon
  
  # STYLE:
  # - "primary": Solid color (Call to Action)
  # - "outline": Border only (Secondary)
  # - "danger": Red (Destructive)
  type primary
  
  # PLACEMENT:
  # Link to the Custom View ID
  custom_view_id `$var('ids') |> $jq('.views[0].id')`
  
## 4. View Properties
| Property | Description |
| :--- | :--- |
| `icon` | Feather icon name (e.g., `file-text`, `download`). |
| `name` | Internal identifier (kebab-case). |
| `label` | Button text shown to user. |
| `type` | `primary`, `outline`, `danger`. |

## 5. Complete Recipe: "Generate PDF" Button
1.  **Logic:** Create `actions/generate-pdf`.
2.  **Trigger:** Create `trigger, generate_pdf_trigger` (Manual type).
3.  **Bind:** Link Logic+Trigger in `logic_trigger`.
4.  **View:** Create `custom_view, order_view`.
5.  **Button:** Create `view_action` linking View+Trigger.

set devsimplesystem.viewaction, btngen_pdf { name "gen-pdf" label "Generate PDF" icon "file-text" type outline

customviewid $var('ids') |> $jq('.viewid') triggerid $var('ids') |> $jq('.trigger_id') }


## 6. Best Practices
*   **Context:** Actions receive the ID(s) of the expected record(s).
*   **Feedback:** The UI handles loading states automatically while the WASM Action runs.
*   **Permissions:** Action visibility respects the underlying Logic permissions.