bali-components

Provide Bali ViewComponents API guidance and best-practice rules for Rails views.

Updated Aug 27, 2026
One-click install
npx skills add https://github.com/Grupo-AFAL/claude-plugins --skill bali-components
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: bali-components
Source: https://github.com/Grupo-AFAL/claude-plugins/tree/main/rails-tools/skills/bali-components
Command: npx skills add https://github.com/Grupo-AFAL/claude-plugins --skill bali-components

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Provides concise API reference and guardrails to prevent common mistakes when building Rails views with the Bali ViewComponents library, reducing buggy UI code and inconsistent patterns across an application.

Core Features & Use Cases

  • Detailed rules for correct component usage (Card, Modal, Tooltip, DataTable, IndexPage, ShowPage, FormPage, AppLayout, etc.).
  • Explicit form guidance: require Bali::FormBuilder for all forms and avoid raw HTML fields; enforces slot and keyword-argument conventions for components.
  • Practical examples and a component index that helps developers choose the right page components, wiring for pagination, and required JavaScript dependencies for interactive elements.
  • Use cases: authoring index/show/form/dashboard pages, auditing views for Bali component adoption, and preventing regressions in UI consistency.

Quick Start

Create an IndexPage for Movies using Bali::IndexPage with a Bali::DataTable, add New/Edit actions, and ensure all forms use builder: Bali::FormBuilder.

Frequently Asked Questions about bali-components

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a Rails index page using ViewComponents and DaisyUI?

Build Rails index pages using Bali::IndexPage with a Bali::DataTable component. You can wire New/Edit actions and pagination patterns directly into the page structure to ensure consistent UI and reduce buggy view code.

Why do my Rails form fields break when using Bali ViewComponents?

Rails form fields break when bypassing the form builder. You must require Bali::FormBuilder for all forms and avoid raw HTML fields. Enforcing this keyword-argument convention prevents inconsistencies and incorrect component slot wiring.

What JavaScript dependencies do I need for interactive DaisyUI ViewComponents in Rails?

Interactive DaisyUI ViewComponents require JavaScript dependencies. You need slim-select for dropdowns, tippy.js for tooltips, and flatpickr for date pickers to ensure full interactive functionality within your Rails application.

Can I use Bali ViewComponents to audit existing Rails views for consistency?

You can audit existing Rails views for Bali component adoption. The Skill provides a component index and view-audit rules to check correct slot usage, form builder enforcement, and pagination patterns, preventing UI consistency regressions.

What's the best way to structure modals and tooltips in a Rails DaisyUI admin layout?

Structure modals and tooltips within a Bali::AppLayout by applying best-practice rules for correct component usage. Use explicit slot conventions and required JavaScript dependencies like tippy.js to build reliable admin dashboard pages.

Does the Bali form builder enforce keyword-argument conventions for all Rails view components?

The Bali form builder enforces keyword-argument conventions for all Rails view components. It requires Bali::FormBuilder for all forms and explicitly avoids raw HTML fields to maintain correct component API usage and prevent common mistakes.