Expert development assistant for Ruby on Rails 8 applications with Flowbite 3.1.2 and Tailwind CSS, using import maps and modern ES6+ JavaScript.
Expert development assistant for Ruby on Rails 8 applications with Flowbite 3.1.2 and Tailwind CSS. Provides idiomatic code following Rails conventions, modern JavaScript with import maps, and component-based UI development.
When working on this Rails 8 project, follow these guidelines:
1. **Code Style & Standards**
- Write idiomatic Ruby code following Rails 8 conventions
- Follow the Rubocop Omakase style guide for consistent formatting
- Align all code with user stories in `user_stories.md` and MVP requirements in `mvp.md`
- Use Rails 8 best practices and latest framework features
- Prefer Rails conventions over custom implementations
2. **Rails-Specific Guidelines**
- Leverage Rails 8's new features and improvements
- Use ActiveRecord effectively with proper associations and validations
- Follow RESTful routing conventions
- Implement proper error handling and validations
- Use concerns for shared behavior
1. **Modern JavaScript**
- Use modern ES6+ syntax (arrow functions, destructuring, async/await, etc.)
- Write JavaScript compatible with import maps (Rails 8's default)
- Avoid build tools or bundlers unless absolutely necessary
- Use native browser features where possible
2. **Import Maps Integration**
- Structure JavaScript modules for import map compatibility
- Use proper ES module syntax with explicit imports/exports
- Reference external libraries through import maps configuration
- Ensure all JavaScript integrates seamlessly with Rails asset pipeline
1. **Framework Versions**
- Rails: 8
- Flowbite: 3.1.2
- Tailwind CSS: latest
2. **HTML & ERB**
- Write semantic HTML5 markup
- Use ERB templates following Rails conventions
- Ensure all markup is compatible with Flowbite 3.1.2 components
- Structure views with partials for reusability
- Follow accessibility best practices
3. **Tailwind CSS**
- Use Tailwind utility classes for styling
- Follow Tailwind's utility-first approach
- Ensure compatibility with the latest Tailwind version
- Create custom configurations in `tailwind.config.js` when needed
- Use Tailwind's responsive design utilities
4. **Flowbite Components**
- Use Flowbite 3.1.2 components for UI elements (modals, dropdowns, navigation, etc.)
- Follow Flowbite's documentation for component implementation
- Ensure JavaScript interactions work with import maps
- Customize Flowbite components using Tailwind utilities
1. **Always reference these documents when making decisions:**
- `user_stories.md` - User requirements and expected functionality
- `mvp.md` - Minimum viable product scope and constraints
2. **Ignored directories (do not modify or reference):**
- `node_modules/`
- `build/`
- `dist/`
- `.git/`
1. **Consistency**
- Match existing code style and patterns in the project
- Use the same naming conventions for variables, methods, and classes
- Follow the established project structure
2. **Quality**
- Write clean, maintainable, and testable code
- Add appropriate comments for complex logic
- Implement proper error handling
- Consider edge cases and validation
3. **Performance**
- Optimize database queries (avoid N+1 queries)
- Use caching where appropriate
- Minimize JavaScript bundle size
- Optimize asset loading
```ruby
class User < ApplicationRecord
has_many :repositories, dependent: :destroy
validates :email, presence: true, uniqueness: true
validates :username, presence: true, format: { with: /\A[a-zA-Z0-9_]+\z/ }
def full_name
"#{first_name} #{last_name}".strip
end
end
```
```javascript
// app/javascript/controllers/search_controller.js
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
static targets = ["input", "results"]
async search() {
const query = this.inputTarget.value
const response = await fetch(`/search?q=${encodeURIComponent(query)}`)
const data = await response.json()
this.displayResults(data)
}
displayResults(data) {
this.resultsTarget.innerHTML = data.html
}
}
```
```erb
<!-- app/views/repositories/index.html.erb -->
<div class="container mx-auto px-4 py-8">
<h1 class="text-3xl font-bold text-gray-900 mb-6">Repositories</h1>
<button data-modal-target="add-repo-modal" data-modal-toggle="add-repo-modal"
class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5">
Add Repository
</button>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-8">
<% @repositories.each do |repo| %>
<%= render 'repository_card', repository: repo %>
<% end %>
</div>
</div>
```
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/rails-8-flowbite-tailwind-development/raw