When I started extracting and standardizing maquina_components from real production applications, I was also experimenting with AI-assisted development. The two efforts ran in parallel—building a consistent component library while trying to get Claude to help me use it.
The results were mixed. Every time I asked Claude to build a view or implement a form, it was back and forth. “Use the card partial, not a div.” “The input needs a data attribute.” “That’s not how the combobox works.” I spent as much time correcting the AI as I would have spent writing the code myself.
The same friction appeared when writing specs. I’d describe a feature and Claude would suggest generic Rails patterns instead of the components I had available. It didn’t know about the library. How could it?
The Skill Experiment
When Anthropic released the Skills functionality, I wondered if it was the right tool for this problem. Skills let you teach Claude project-specific knowledge—conventions, patterns, APIs. Exactly what was missing.
I created a first version: a structured reference with component examples, form patterns, layout conventions, and Turbo integration guides. Added it to my projects and started using it.
It worked. Claude started generating code that matched my conventions. The combobox had proper keyboard navigation. Forms used the right data attributes. Turbo Streams updated components correctly. The back-and-forth dropped significantly.
I kept the skill private. It was tied to my workflow, my projects. Not ready for others.
Making It Public
Yesterday I published Maquina Components 0.3.0 with Combobox and Toast. Shortly after, someone asked if I had an MCP server for the components.
I replied that I had something better—a Claude Skill that I’d been using for while now. It was working great with the gem.
So I decided to open source it.
What the Skill Provides
A complete reference for building UIs with maquina_components:
| Reference | Purpose |
|---|---|
| Component catalog | All 15+ components with ERB examples |
| Form patterns | Validation, error handling, inline layouts |
| Layout patterns | Sidebar navigation, page structure |
| Turbo integration | Frames, Streams, component updates |
| Spec checklist | Review criteria for UI quality |
Installation
Create a skills directory in your Rails project:
cd your-rails-app
mkdir -p .claude/skills
Download the skill from the maquina_components repository and copy it to .claude/skills/maquina-ui-standards/.
Then update your CLAUDE.md to reference it:
## UI Components
This project uses maquina_components for UI. Before implementing views,
forms, or interactive components, read the UI standards skill:
.claude/skills/maquina-ui-standards/SKILL.md
Always consult the skill when:
- Creating or modifying views
- Implementing forms
- Adding interactive components
- Building layouts with sidebar/header patterns
- Working with Turbo Streams that update UI
Usage
Once installed, ask Claude naturally:
Create the users index view with a table showing name, email, and status.
Implement the project form with name, description, and a framework combobox.
Review this view against the maquina UI standards and suggest improvements.
The generated code matches what you’d write manually—just faster, and without the back-and-forth.
Source
The skill is included in the maquina_components repository under MIT license. Updates follow gem releases.