Terminal.skills
Skills/appsmith
>

appsmith

Build internal tools, admin panels, and dashboards with Appsmith. Use when a user asks to create CRUD interfaces, connect to databases or APIs with drag-and-drop widgets, write JSObjects for business logic, or self-host Appsmith with Docker or Kubernetes.

#internal-tools#low-code#open-source#admin-panel#self-hosted
terminal-skillsv1.0.0
Works with:claude-codeopenai-codexgemini-clicursor
Source

Usage

$
✓ Installed appsmith v1.0.0

Getting Started

  1. Install the skill using the command above
  2. Open your AI coding agent (Claude Code, Codex, Gemini CLI, or Cursor)
  3. Reference the skill in your prompt
  4. The AI will use the skill's capabilities automatically

Example Prompts

  • "Review the open pull requests and summarize what needs attention"
  • "Generate a changelog from the last 20 commits on the main branch"

Documentation

Overview

You are an expert in Appsmith, the open-source low-code platform for building internal tools, admin panels, and dashboards. You help developers connect to databases and APIs, build CRUD interfaces with drag-and-drop widgets, write custom JavaScript, and self-host the platform for full data control.

Instructions

Data Queries

javascript
// PostgreSQL query with bindings
// Appsmith uses {{ }} for dynamic bindings to widget values
SELECT * FROM orders
WHERE status = {{ StatusDropdown.selectedOptionValue }}
  AND created_at BETWEEN {{ DateRange.startDate }} AND {{ DateRange.endDate }}
  AND ({{ SearchInput.text }} = '' OR customer_email ILIKE '%' || {{ SearchInput.text }} || '%')
ORDER BY created_at DESC
LIMIT 50 OFFSET {{ (Table1.pageNo - 1) * 50 }}

// REST API datasource
// URL: https://api.example.com/users/{{ Table1.selectedRow.id }}
// Method: PUT
// Body: {
//   "plan": {{ PlanSelect.selectedOptionValue }},
//   "note": {{ NoteInput.text }}
// }

JavaScript Objects (JSObjects)

javascript
// JSObject — reusable business logic
export default {
  // Transform query data for charts
  getRevenueByMonth() {
    return OrdersQuery.data.reduce((acc, order) => {
      const month = moment(order.created_at).format("YYYY-MM");
      acc[month] = (acc[month] || 0) + order.amount;
      return acc;
    }, {});
  },

  // Multi-step workflow
  async processRefund() {
    const order = Table1.selectedRow;
    if (!order) {
      showAlert("Select an order first", "warning");
      return;
    }

    const confirmed = await showModal("ConfirmRefundModal");
    if (!confirmed) return;

    // Step 1: Create refund in Stripe
    await StripeRefundAPI.run({ chargeId: order.stripe_charge_id });

    // Step 2: Update order status
    await UpdateOrderQuery.run({
      orderId: order.id,
      status: "refunded",
    });

    // Step 3: Send notification
    await SlackNotifyAPI.run({
      message: `Refund processed for order #${order.id} ($${order.amount})`,
    });

    showAlert("Refund processed successfully", "success");
    await OrdersQuery.run(); // Refresh table
  },

  // Form validation
  validateForm() {
    const errors = {};
    if (!EmailInput.text?.includes("@")) errors.email = "Invalid email";
    if (AmountInput.text <= 0) errors.amount = "Amount must be positive";
    if (!ReasonSelect.selectedOptionValue) errors.reason = "Select a reason";
    return errors;
  },
};

Deployment

bash
# Self-hosted with Docker (recommended)
curl -L https://bit.ly/docker-compose-appsmith -o docker-compose.yml
docker compose up -d
# Dashboard at http://localhost:80

# Kubernetes with Helm
helm repo add appsmith https://helm.appsmith.com
helm install appsmith appsmith/appsmith -n appsmith --create-namespace

Git Sync

bash
# Connect Appsmith to Git for version control
# Settings → Git Connection → Connect to Git Repository
# Supports: GitHub, GitLab, Bitbucket

# Workflow:
# 1. Develop on feature branch
# 2. Commit changes from Appsmith UI
# 3. Create PR for review
# 4. Merge → auto-deploy to production instance

Examples

Example 1: User asks to set up appsmith

User: "Help me set up appsmith for my project"

The agent should:

  1. Check system requirements and prerequisites
  2. Install or configure appsmith
  3. Set up initial project structure
  4. Verify the setup works correctly

Example 2: User asks to build a feature with appsmith

User: "Create a dashboard using appsmith"

The agent should:

  1. Scaffold the component or configuration
  2. Connect to the appropriate data source
  3. Implement the requested feature
  4. Test and validate the output

Guidelines

  1. Self-host for security — Appsmith is open-source; self-host on your infrastructure when data can't leave your network
  2. JSObjects for logic — Keep business logic in JSObjects, not in widget event handlers; easier to test and reuse
  3. Git sync for teams — Connect to Git for version control; review app changes in PRs like code
  4. Prepared statements — Appsmith uses prepared statements by default for SQL; prevents SQL injection
  5. Environments — Use Appsmith's environment variables for dev/staging/prod database URLs
  6. Granular permissions — Use role-based access control; limit who can view/edit/run destructive queries
  7. Reusable widgets — Extract common patterns (search + table + pagination) into reusable templates
  8. Audit trail — Enable audit logging for compliance; track who did what and when

Information

Version
1.0.0
Author
terminal-skills
Category
Development
License
Apache-2.0