Menu
Tailwind CSS and DaisyUI expert for Rails 8 - utility-first patterns, component styling, responsive design, and theming
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Cloudflare Worker syncing Investec bank transactions to a Google Sheets budget spreadsheet. Monthly tabs, JWT auth, transaction merging/rules, tab coloring by age, cron scheduled sync.
Dotfile and config management using yadm - track, sync, and deploy configuration across machines
Best practices for Remotion - Video creation in React. Includes a 27-file rule library covering 3D, animations, audio, captions, charts, compositions, fonts, and transitions.
Tmux terminal multiplexer - Catppuccin theme, TPM plugins, custom scripts, session/worktree management, and key bindings
Guide for creating, updating, and improving opencode skills - conventions, structure, discovery, and best practices for SKILL.md authoring
Code reviewer for pattern conformance, security, testing, and Rails/Hotwire best practices
| name | ui-styling |
| description | Tailwind CSS and DaisyUI expert for Rails 8 - utility-first patterns, component styling, responsive design, and theming |
| metadata | {"tags":"tailwind, daisyui, css, styling, components, responsive, dark-mode"} |
Use this skill for:
This skill is organized into reference files by topic:
Read only the reference file relevant to your current task.
| Scenario | Approach |
|---|---|
| One-off styling | Utility classes |
| Repeated 2-3 times | Keep utilities |
| Repeated 4+ times | Extract component |
| Complex interactive state | Stimulus + utilities |
| Design system element | @apply component |
sm: 640px (min-width)
md: 768px
lg: 1024px
xl: 1280px
2xl: 1536px
<%= link_to "Save", path, class: "btn btn-primary" %>
<%= link_to "Cancel", path, class: "btn btn-ghost" %>
<div class="card bg-base-100 shadow-xl">
<div class="card-body">
<h2 class="card-title">Title</h2>
</div>
</div>
<div class="alert alert-success">
<span>Message saved!</span>
</div>