rails_claude_skills 0.1.0

data/lib/generators/claude/skills_library/tailwindcss/SKILL.md

@@ -0,0 +1,371 @@
+---
+name: tailwindcss
+description: TailwindCSS utility-first styling for Rails
+version: 1.0.0
+rails_version: ">= 7.0"
+tags:
+  - css
+  - tailwind
+  - styling
+  - frontend
+---
+
+# TailwindCSS in Rails
+
+## Quick Reference
+
+| Category | Classes |
+|----------|---------|
+| **Layout** | `flex`, `grid`, `container`, `mx-auto` |
+| **Spacing** | `p-4`, `m-2`, `px-6`, `py-3`, `space-x-4` |
+| **Typography** | `text-lg`, `font-bold`, `text-center`, `text-gray-700` |
+| **Colors** | `bg-blue-500`, `text-white`, `border-gray-300` |
+| **Sizing** | `w-full`, `h-64`, `max-w-md`, `min-h-screen` |
+| **Flexbox** | `flex`, `items-center`, `justify-between` |
+| **Grid** | `grid`, `grid-cols-3`, `gap-4` |
+| **Responsive** | `md:flex`, `lg:grid-cols-4`, `sm:text-sm` |
+
+## Installation
+
+```bash
+# Rails 7+ with Tailwind
+./bin/bundle add tailwindcss-rails
+./bin/rails tailwindcss:install
+```
+
+## Common Patterns
+
+### Container & Layout
+
+```erb
+<%# Max-width container %>
+<div class="container mx-auto px-4">
+  Content
+</div>
+
+<%# Full-width section with max-width content %>
+<section class="w-full bg-gray-100">
+  <div class="max-w-7xl mx-auto px-4 py-8">
+    Content
+  </div>
+</section>
+```
+
+### Flexbox Layouts
+
+```erb
+<%# Horizontal flex %>
+<div class="flex items-center space-x-4">
+  <div>Item 1</div>
+  <div>Item 2</div>
+</div>
+
+<%# Space between %>
+<div class="flex justify-between items-center">
+  <div>Left</div>
+  <div>Right</div>
+</div>
+
+<%# Centered content %>
+<div class="flex items-center justify-center min-h-screen">
+  <div>Centered</div>
+</div>
+
+<%# Vertical flex %>
+<div class="flex flex-col space-y-4">
+  <div>Item 1</div>
+  <div>Item 2</div>
+</div>
+```
+
+### Grid Layouts
+
+```erb
+<%# Basic grid %>
+<div class="grid grid-cols-3 gap-4">
+  <div>Column 1</div>
+  <div>Column 2</div>
+  <div>Column 3</div>
+</div>
+
+<%# Responsive grid %>
+<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+  <% @posts.each do |post| %>
+    <%= render post %>
+  <% end %>
+</div>
+
+<%# Grid with different column spans %>
+<div class="grid grid-cols-12 gap-4">
+  <div class="col-span-8">Main content</div>
+  <div class="col-span-4">Sidebar</div>
+</div>
+```
+
+### Cards
+
+```erb
+<div class="bg-white rounded-lg shadow-md p-6">
+  <h3 class="text-xl font-bold mb-2"><%= @post.title %></h3>
+  <p class="text-gray-600"><%= @post.excerpt %></p>
+  <div class="mt-4">
+    <%= link_to "Read More", @post, class: "text-blue-500 hover:text-blue-700" %>
+  </div>
+</div>
+
+<%# Card with hover effect %>
+<div class="bg-white rounded-lg shadow hover:shadow-xl transition-shadow duration-300 p-6">
+  Content
+</div>
+```
+
+### Buttons
+
+```erb
+<%# Primary button %>
+<%= link_to "Submit", path, class: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" %>
+
+<%# Secondary button %>
+<%= link_to "Cancel", path, class: "bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded" %>
+
+<%# Outline button %>
+<%= link_to "Edit", path, class: "border border-blue-500 text-blue-500 hover:bg-blue-500 hover:text-white font-bold py-2 px-4 rounded" %>
+
+<%# Icon button %>
+<button class="bg-blue-500 hover:bg-blue-700 text-white p-2 rounded-full">
+  <svg class="w-6 h-6">...</svg>
+</button>
+```
+
+### Forms
+
+```erb
+<%= form_with model: @post, class: "space-y-6" do |f| %>
+  <div>
+    <%= f.label :title, class: "block text-sm font-medium text-gray-700 mb-1" %>
+    <%= f.text_field :title, class: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" %>
+  </div>
+
+  <div>
+    <%= f.label :body, class: "block text-sm font-medium text-gray-700 mb-1" %>
+    <%= f.text_area :body, rows: 6, class: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" %>
+  </div>
+
+  <div class="flex items-center">
+    <%= f.check_box :published, class: "h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" %>
+    <%= f.label :published, class: "ml-2 block text-sm text-gray-900" %>
+  </div>
+
+  <div class="flex space-x-4">
+    <%= f.submit "Save", class: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-6 rounded" %>
+    <%= link_to "Cancel", posts_path, class: "bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-6 rounded" %>
+  </div>
+<% end %>
+```
+
+### Navigation
+
+```erb
+<nav class="bg-white shadow-lg">
+  <div class="max-w-7xl mx-auto px-4">
+    <div class="flex justify-between items-center h-16">
+      <%= link_to "Logo", root_path, class: "text-xl font-bold text-gray-800" %>
+      
+      <div class="hidden md:flex space-x-8">
+        <%= link_to "Home", root_path, class: "text-gray-700 hover:text-blue-500" %>
+        <%= link_to "Posts", posts_path, class: "text-gray-700 hover:text-blue-500" %>
+        <%= link_to "About", about_path, class: "text-gray-700 hover:text-blue-500" %>
+      </div>
+      
+      <button class="md:hidden">
+        <svg class="w-6 h-6">...</svg>
+      </button>
+    </div>
+  </div>
+</nav>
+```
+
+### Tables
+
+```erb
+<div class="overflow-x-auto">
+  <table class="min-w-full bg-white border">
+    <thead class="bg-gray-100">
+      <tr>
+        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+          Title
+        </th>
+        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+          Author
+        </th>
+        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+          Actions
+        </th>
+      </tr>
+    </thead>
+    <tbody class="divide-y divide-gray-200">
+      <% @posts.each do |post| %>
+        <tr class="hover:bg-gray-50">
+          <td class="px-6 py-4 whitespace-nowrap">
+            <%= post.title %>
+          </td>
+          <td class="px-6 py-4 whitespace-nowrap">
+            <%= post.author.name %>
+          </td>
+          <td class="px-6 py-4 whitespace-nowrap text-sm">
+            <%= link_to "Edit", edit_post_path(post), class: "text-blue-500 hover:text-blue-700 mr-4" %>
+            <%= link_to "Delete", post, method: :delete, class: "text-red-500 hover:text-red-700" %>
+          </td>
+        </tr>
+      <% end %>
+    </tbody>
+  </table>
+</div>
+```
+
+### Alerts/Flash Messages
+
+```erb
+<% flash.each do |type, message| %>
+  <div class="<%= alert_class(type) %> p-4 rounded-md mb-4">
+    <div class="flex">
+      <div class="flex-shrink-0">
+        <%# Icon %>
+      </div>
+      <div class="ml-3">
+        <p class="text-sm font-medium">
+          <%= message %>
+        </p>
+      </div>
+    </div>
+  </div>
+<% end %>
+
+<%# Helper method %>
+def alert_class(type)
+  case type.to_sym
+  when :notice, :success
+    "bg-green-100 border border-green-400 text-green-700"
+  when :alert, :error
+    "bg-red-100 border border-red-400 text-red-700"
+  when :warning
+    "bg-yellow-100 border border-yellow-400 text-yellow-700"
+  else
+    "bg-blue-100 border border-blue-400 text-blue-700"
+  end
+end
+```
+
+### Modal
+
+```erb
+<div class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full" id="my-modal">
+  <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
+    <div class="mt-3">
+      <h3 class="text-lg font-medium text-gray-900 mb-4">Modal Title</h3>
+      <div class="mt-2">
+        <p class="text-sm text-gray-500">Modal content goes here.</p>
+      </div>
+      <div class="mt-4 flex justify-end space-x-3">
+        <button class="px-4 py-2 bg-gray-300 text-gray-800 rounded hover:bg-gray-400">
+          Cancel
+        </button>
+        <button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
+          Confirm
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+### Badges
+
+```erb
+<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
+  New
+</span>
+
+<span class="inline-flex items-center px-3 py-1 rounded-md text-sm font-medium bg-green-100 text-green-800">
+  Published
+</span>
+```
+
+### Responsive Design
+
+```erb
+<%# Hide on mobile, show on desktop %>
+<div class="hidden md:block">
+  Desktop only
+</div>
+
+<%# Show on mobile, hide on desktop %>
+<div class="block md:hidden">
+  Mobile only
+</div>
+
+<%# Responsive text sizes %>
+<h1 class="text-2xl md:text-4xl lg:text-6xl font-bold">
+  Title
+</h1>
+
+<%# Responsive padding %>
+<div class="p-4 md:p-8 lg:p-12">
+  Content
+</div>
+```
+
+## Customization
+
+```javascript
+// config/tailwind.config.js
+module.exports = {
+  content: [
+    './app/views/**/*.html.erb',
+    './app/helpers/**/*.rb',
+    './app/assets/stylesheets/**/*.css',
+    './app/javascript/**/*.js'
+  ],
+  theme: {
+    extend: {
+      colors: {
+        'brand': {
+          light: '#3fbaeb',
+          DEFAULT: '#0fa9e6',
+          dark: '#0c87b8',
+        }
+      },
+      fontFamily: {
+        sans: ['Inter', 'sans-serif'],
+      },
+    },
+  },
+  plugins: [
+    require('@tailwindcss/forms'),
+    require('@tailwindcss/typography'),
+  ],
+}
+```
+
+## Best Practices
+
+1. **Use @apply sparingly** - Prefer utility classes in templates
+2. **Create components** for repeated patterns
+3. **Use responsive prefixes** - mobile-first approach
+4. **Leverage Tailwind plugins** - forms, typography, etc.
+5. **Keep custom CSS minimal** - use Tailwind's configuration
+6. **Use consistent spacing scale** - stick to theme spacing
+7. **Optimize for production** - PurgeCSS removes unused styles automatically
+
+## Common Pitfalls
+
+- **Too many utilities** - Extract to components or use @apply
+- **Not purging** - Make sure content paths are configured correctly
+- **Fighting the framework** - Use Tailwind's patterns, don't fight them
+- **Forgetting responsive** - Always test mobile-first
+
+## References
+
+- [Tailwind CSS Documentation](https://tailwindcss.com/docs)
+- [Tailwind CSS Rails](https://github.com/rails/tailwindcss-rails)
+- [Tailwind UI Components](https://tailwindui.com/)

data/lib/generators/claude/views/views_generator.rb

@@ -0,0 +1,113 @@
+# frozen_string_literal: true
+
+require "rails/generators"
+require "fileutils"
+
+module Claude
+  module Generators
+    class ViewsGenerator < Rails::Generators::NamedBase
+      source_root File.expand_path("..", __dir__)
+
+      class_option :type, type: :string, default: "skill",
+                          desc: "Type of resource to copy (skill, command, rule)"
+
+      def copy_resource_to_project
+        case options[:type]
+        when "command"
+          copy_command
+        when "rule"
+          copy_rule
+        else
+          copy_skill
+        end
+      end
+
+      private
+
+      def copy_skill
+        skill_source = "#{self.class.source_root}/skills_library/#{file_name}"
+        skill_dest = ".claude/skills/#{file_name}"
+
+        if File.directory?(skill_source)
+          directory skill_source, skill_dest
+          say "Copied skill '#{file_name}' to your project for customization", :green
+          say "\nYou can now edit:", :blue
+          say "  #{skill_dest}/SKILL.md"
+          say "  #{skill_dest}/references/*" if File.directory?("#{skill_source}/references")
+          say "\nChanges will override the gem's default version.\n", :yellow
+        else
+          say "Skill '#{file_name}' not found in skills library", :red
+          say "\nAvailable skills:", :blue
+          list_available_skills
+        end
+      end
+
+      def copy_command
+        command_source = "#{self.class.source_root}/commands_library/#{file_name}.md"
+        command_dest = ".claude/commands/#{file_name}.md"
+
+        if File.exist?(command_source)
+          copy_file command_source, command_dest
+          say "Copied command '#{file_name}' to your project for customization", :green
+          say "\nYou can now edit:", :blue
+          say "  #{command_dest}"
+          say "\nChanges will override the gem's default version.\n", :yellow
+        else
+          say "Command '#{file_name}' not found in commands library", :red
+          say "\nAvailable commands:", :blue
+          list_available_commands
+        end
+      end
+
+      def copy_rule
+        rule_source = "#{self.class.source_root}/rules_library/#{file_name}.md"
+        rule_dest = ".claude/rules/#{file_name}.md"
+
+        if File.exist?(rule_source)
+          copy_file rule_source, rule_dest
+          say "Copied rule '#{file_name}' to your project for customization", :green
+          say "\nYou can now edit:", :blue
+          say "  #{rule_dest}"
+          say "\nChanges will override the gem's default version.\n", :yellow
+        else
+          say "Rule '#{file_name}' not found in rules library", :red
+          say "\nAvailable rules:", :blue
+          list_available_rules
+        end
+      end
+
+      def list_available_skills
+        skills_dir = "#{self.class.source_root}/skills_library"
+        if File.directory?(skills_dir)
+          Dir.entries(skills_dir).reject { |d| d.start_with?(".") }.each do |skill|
+            say "  - #{skill}"
+          end
+        else
+          say "  No pre-built skills found"
+        end
+      end
+
+      def list_available_commands
+        commands_dir = "#{self.class.source_root}/commands_library"
+        if File.directory?(commands_dir)
+          Dir.entries(commands_dir).reject { |f| f.start_with?(".") }.each do |command|
+            say "  - #{File.basename(command, ".md")}"
+          end
+        else
+          say "  No pre-built commands found"
+        end
+      end
+
+      def list_available_rules
+        rules_dir = "#{self.class.source_root}/rules_library"
+        if File.directory?(rules_dir)
+          Dir.entries(rules_dir).reject { |f| f.start_with?(".") }.each do |rule|
+            say "  - #{File.basename(rule, ".md")}"
+          end
+        else
+          say "  No pre-built rules found"
+        end
+      end
+    end
+  end
+end

data/lib/rails_claude_skills/railtie.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module RailsClaudeSkills
+  class Railtie < Rails::Railtie
+    railtie_name :rails_claude_skills
+
+    generators do
+      require "generators/claude/install/install_generator"
+      require "generators/claude/skill/skill_generator"
+      require "generators/claude/agent/agent_generator"
+      require "generators/claude/command/command_generator"
+      require "generators/claude/rule/rule_generator"
+      require "generators/claude/views/views_generator"
+    end
+  end
+end

data/lib/rails_claude_skills/version.rb

@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+module RailsClaudeSkills
+  VERSION = "0.1.0"
+end

data/lib/rails_claude_skills.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+require_relative "rails_claude_skills/version"
+require_relative "rails_claude_skills/railtie" if defined?(Rails::Railtie)
+
+module RailsClaudeSkills
+  class Error < StandardError; end
+
+  class << self
+    attr_accessor :configuration
+  end
+
+  def self.configure
+    self.configuration ||= Configuration.new
+    yield(configuration)
+  end
+
+  class Configuration
+    attr_accessor :skills_path, :agents_path, :default_model
+
+    def initialize
+      @skills_path = ".claude/skills"
+      @agents_path = ".claude/agents"
+      @default_model = "sonnet"
+    end
+  end
+end

data/sig/rails_claude_skills.rbs

@@ -0,0 +1,4 @@
+module RailsClaudeSkills
+  VERSION: String
+  # See the writing guide of rbs: https://github.com/ruby/rbs#guides
+end