Rails Application Ui Blocks
This skill helps you drop premium Tailwind UI blocks from an `application-ui` template library into Rails ERB views without breaking existing Turbo, Stimulus, or accessibility plumbing. It walks through a two-mode workflow: composing new admin or dashboard pages from scratch using catalog examples, or surgically refactoring existing partials one region at a time while preserving routes, controllers, and test coverage. The selection playbook and JSON catalog keep you from hunting through template folders. Honest take: it's opinionated about not touching domain logic or ripping out working design systems, which is exactly the guardrail you want when retrofitting UI in a live Rails app.
- skills.sh installs
- 251
- GitHub stars
- 222
- last updated
- Aug 21, 2026
Install
$ npx -y skills add pproenca/dot-skills --skill rails-application-ui-blocks --agent claude-codeInstalls into .claude/skills of the current project.
Files
Rails Application UI Blocks
Use this skill to choose, adapt, and integrate premium UI blocks from templates/application-ui into Rails views.
Workflow
- Determine mode:
- new-page for brand new features/pages
- refactor-page for existing views/partials
- Identify constraints first:
- Required interactions (Turbo Frames/Streams, Stimulus targets/actions, form semantics)
- Accessibility constraints (labels, keyboard flow, ARIA)
- Existing component boundaries (partials, helpers, shared layouts)
- Pick candidate blocks from catalog:
- Read
references/selection-playbook.md - Query
references/template-catalog.json
- Integrate minimally:
- Keep existing routes/controllers/domain logic unchanged
- Replace markup in thin steps (shell first, then sections, then micro-components)
- Verify:
- Ensure no loss of behavior, accessibility, or test coverage
- Keep existing design tokens and class conventions where required by project standards
Selection Order
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/pproenca/dot-skills
- Categories
- Frontend Development, Backend & APIs, Code Review & Quality, Mobile Development, Design & UI/UX
- First seen
- Jun 3, 2026
More from pproenca/dot-skills
All 100- Rust Write Tests248
- Rust Implement246
- Domain Architect242
- Graph Schema233
- Exec Plan232
- Framer Motion Best Practices187
- Rust124
- Zod7.2K
- Vitest7.2K
- React Hook Form3.1K
- Emilkowal Animations2.8K
- Nuqs2.4K
- Clean Architecture2K
- Typescript1.8K
- Code Simplifier1.6K
- Expo React Native Performance1.5K
- Nextjs1.2K
- Playwright1.2K
- Framer Motion1.2K
- Wxt Browser Extensions1.1K
- Msw897
- Tanstack Query858
- Clean Code857
- Terminal Ui853
Recommended
More Frontend Development
css-expertrightnow-ai/openfangCSS expert for flexbox, grid, animations, responsive design, and modern layout techniques230skills.sh installs
ui-ux-pro-maxjmerta/codex-skillsUse when designing, building, or refining frontend UI/UX: layouts, components, visual systems, typography, color, and UX patterns for websites, landing pages, d229skills.sh installs
react-server-components-frameworkyonatangross/orchestkitUse when building Next.js 16+ apps with React Server Components. Covers App Router, Cache Components (replacing experimental_ppr), streaming SSR, Server Actions227skills.sh installs
json-render-shadcnvercel-labs/json-renderPre-built shadcn/ui components for json-render. Use when working with @json-render/shadcn, adding standard UI components to a catalog, or building web UIs with 213skills.sh installs
ui-design-systemborghei/claude-skillsUI design system toolkit covering design tokens, component documentation, responsive calculations, and developer handoff. Use for creating design systems, maint209skills.sh installs
ui-ux-designsamhvw8/dot-claudeUI/UX design reference database. 50+ styles, 21 palettes, 50 font pairings, 20 charts, 8 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Ta207skills.sh installs