Attachments UI — Attachments UI install Attachments UI, RMBI_Capstone, community, Attachments UI install, ide skills, interactive file management, AI agent file upload, stock pattern visualization, Claude Code, Cursor, Windsurf

v1.0.0
GitHub

About this Skill

Perfect for Frontend Agents needing interactive file management and visualization capabilities for record attachments Attachments UI is a web application feature that handles record attachments with visual cues, interaction, and progress tracking for improved user experience.

Features

Displays thumbnail previews for image attachments
Features clear iconography banners for non-image files (e.g., PDF)
Allows users to remove attachments via 'X' or 'Trash' icons
Shows percentage progress bars for large file uploads
Supports interactive visualization of detected stock patterns

# Core Topics

Attachments UI install interactive file management AI agent file upload stock pattern visualization
AILouis AILouis
[0]
[0]
Updated: 3/6/2026

Agent Capability Analysis

The Attachments UI skill by AILouis is an open-source community AI agent skill for Claude Code and other IDE workflows, helping agents execute tasks with better context, repeatability, and domain-specific guidance. Optimized for Attachments UI install, interactive file management, AI agent file upload.

Ideal Agent Persona

Perfect for Frontend Agents needing interactive file management and visualization capabilities for record attachments

Core Value

Empowers agents to detect and visualize stock patterns with thumbnail previews, clear iconography, and progress bars for large file uploads using protocols like HTTP and file formats such as PDF and SVG

↓ Capabilities Granted for Attachments UI

Visualizing record attachments with interactive thumbnails and iconography
Implementing removal of attachments with a single click using 'X' or 'Trash' icons
Displaying percentage progress bars for large file uploads to prevent premature modal closure

! Prerequisites & Limits

  • Requires frontend UI implementation with constraints on visual cues and interaction
  • Needs integration with file management systems for attachment handling
  • May require additional libraries for thumbnail generation and progress bar display
Labs Demo

Browser Sandbox Environment

⚡️ Ready to unleash?

Experience this Agent in a zero-setup browser environment powered by WebContainers. No installation required.

Boot Container Sandbox

Attachments UI

Install Attachments UI, an AI agent skill for AI agent workflows and automation. Works with Claude Code, Cursor, and Windsurf with one-command setup.

SKILL.md
Readonly

Handling Record Attachments

1. Frontend UI Constraints

  • Visual Cues: All file attachments must feature a thumbnail preview (for images) or a clear iconography banner (e.g., a Red PDF icon) next to the filename.
  • Interaction: Users must be able to remove an attachment by clicking an "X" or "Trash" icon on the card before hitting Save on the parent record.
  • Progress: Large file uploads must show a percentage progress bar to prevent users from closing the modal prematurely.

2. The "Full Replace" Trap

When updating a database record that contains attachments, you must be extremely careful.

  • The Trap: Developer sends UPDATE Record SET name='NewName', attachments=[]. This deletes all previously existing photos!
  • The Solution: Implement a "Compare and Sync" logic.
    1. Read the existing attachments.
    2. Read the "New" attachments list sent from the UI.
    3. Determine exactly which files to Keep, which to Delete, and which to Add. Never blind-overwrite the array.

Directory Map & Reading Triggers

Read the sub-files in this folder only when needed:

  • storage_paths.md: Read this when implementing backend proxy download routes, Signed URLs, and Access Control Lists (ACL) for files.

FAQ & Installation Steps

These questions and steps mirror the structured data on this page for better search understanding.

? Frequently Asked Questions

What is Attachments UI?

Perfect for Frontend Agents needing interactive file management and visualization capabilities for record attachments Attachments UI is a web application feature that handles record attachments with visual cues, interaction, and progress tracking for improved user experience.

How do I install Attachments UI?

Run the command: npx killer-skills add AILouis/RMBI_Capstone/Attachments UI. It works with Cursor, Windsurf, VS Code, Claude Code, and 19+ other IDEs.

What are the use cases for Attachments UI?

Key use cases include: Visualizing record attachments with interactive thumbnails and iconography, Implementing removal of attachments with a single click using 'X' or 'Trash' icons, Displaying percentage progress bars for large file uploads to prevent premature modal closure.

Which IDEs are compatible with Attachments UI?

This skill is compatible with Cursor, Windsurf, VS Code, Trae, Claude Code, OpenClaw, Aider, Codex, OpenCode, Goose, Cline, Roo Code, Kiro, Augment Code, Continue, GitHub Copilot, Sourcegraph Cody, and Amazon Q Developer. Use the Killer-Skills CLI for universal one-command installation.

Are there any limitations for Attachments UI?

Requires frontend UI implementation with constraints on visual cues and interaction. Needs integration with file management systems for attachment handling. May require additional libraries for thumbnail generation and progress bar display.

↓ How To Install

  1. 1. Open your terminal

    Open the terminal or command line in your project directory.

  2. 2. Run the install command

    Run: npx killer-skills add AILouis/RMBI_Capstone/Attachments UI. The CLI will automatically detect your IDE or AI agent and configure the skill.

  3. 3. Start using the skill

    The skill is now active. Your AI agent can use Attachments UI immediately in the current project.

Related Skills

Looking for an alternative to Attachments UI or another community skill for your workflow? Explore these related open-source skills.

View All

widget-generator

Logo of f
f

f.k.a. Awesome ChatGPT Prompts. Share, discover, and collect prompts from the community. Free and open source — self-host for your organization with complete privacy.

★ 149.6k
⑂ 0
AI

flags

Logo of vercel
vercel

flags is a Next.js feature management skill that enables developers to efficiently add or modify framework feature flags, streamlining React application development.

★ 138.4k
⑂ 0
Browser

zustand

Logo of lobehub
lobehub

The ultimate space for work and life — to find, build, and collaborate with agent teammates that grow with you. We are taking agent harness to the next level — enabling multi-agent collaboration, effortless agent team design, and introducing agents as the unit of work interaction.

★ 72.8k
⑂ 0
AI

data-fetching

Logo of lobehub
lobehub

The ultimate space for work and life — to find, build, and collaborate with agent teammates that grow with you. We are taking agent harness to the next level — enabling multi-agent collaboration, effortless agent team design, and introducing agents as the unit of work interaction.

★ 72.8k
⑂ 0
AI