skills.rest
reckerswartz
reckerswartzCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

vikinger-ui

Transforms Rails with Vikinger-style UI using ViewComponents, Stimulus, and Tailwind templates.

Updated Mar 19, 2026
Search Tags:#tailwind#design-system#ui-patterns#hotwire#vikinger#rails-viewcomponent
One-click install
npx skills add https://github.com/reckerswartz/resume_builder --skill vikinger-ui
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vikinger-ui
Source: https://github.com/reckerswartz/resume_builder/tree/main/.windsurf/skills/vikinger-ui
Command: npx skills add https://github.com/reckerswartz/resume_builder --skill vikinger-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Transforms Vikinger-inspired UI patterns into Rails-first, reusable UI primitives, enabling teams to implement dense dashboards, profile headers, and account hubs without copying vendor markup.

Core Features & Use Cases

  • Translate Vikinger page families into Rails ViewComponents, Stimulus controllers, and Turbo-driven flows.
  • Extract reusable primitives (AppShell, SidebarNav, ProfileHero, MetricCard, ActivityCard) for editor chrome, dashboards, and template galleries.
  • Apply to editor chrome, dashboards, template catalogs, and settings hubs within a Resume Builder context.

Quick Start

Map Vikinger page families to Rails components and scaffold a minimal AppShell with a SidebarNav and ProfileHero, then implement a small set of reusable primitives.

Frequently Asked Questions about vikinger-ui

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build Rails ViewComponents for dense dashboard layouts?▼

Build Rails ViewComponents for dense dashboards by translating UI patterns into reusable primitives like AppShell, SidebarNav, and MetricCard using Tailwind CSS and Hotwire. This approach avoids copying vendor markup while accelerating production-ready interface development.

Can I use Tailwind CSS and Hotwire to create a profile header component in Rails?▼

Yes, you can use Tailwind CSS and Hotwire to create profile header components in Rails by extracting reusable ViewComponents like ProfileHero. These primitives integrate with Stimulus controllers and Turbo-driven flows for dynamic interface updates.

What is the best way to structure a Rails UI component library for a Resume Builder application?▼

Structure a Rails UI component library for a Resume Builder by mapping page families into ViewComponents, Stimulus controllers, and Turbo flows. Scaffold a minimal AppShell with SidebarNav and ProfileHero, then implement reusable primitives for editor chrome and template galleries.

Do I need Rails ViewComponents to implement Vikinger-inspired UI patterns?▼

Yes, implementing Vikinger-inspired UI patterns requires a componentized architecture using Rails ViewComponents, Tailwind CSS, Hotwire, and Stimulus. This stack enables teams to build profile hubs and account settings without relying on vendor markup.

How does a references-based pattern catalog work for Rails UI development?▼

A references-based pattern catalog provides guidance for Rails UI development by mapping Vikinger page families to specific ViewComponents. It enables teams to extract and apply reusable primitives like ActivityCard and MetricCard to editor chrome and dashboards.

Why should I extract reusable UI primitives instead of copying template gallery markup directly?▼

Extract reusable UI primitives instead of copying template gallery markup to avoid vendor lock-in and ensure maintainable Rails components. This method translates patterns into ViewComponents and Stimulus controllers for sustainable production-ready interfaces.

Related Skills

Explore More Design & Creative Skills→
reckerswartzreckerswartz

tailwind-agent

Style Rails ERB views and ViewComponents with Tailwind CSS 4 utilities.

Community
Advanced
reckerswartzreckerswartz

hotwire

Implement Turbo Drive, Frames, Streams, and Stimulus in Rails 8 views.

Community
Advanced
arthun01arthun01

rails-animations

Automate CSS animations and Stimulus controllers in Rails views with Turbo compatibility.

Community
Intermediate
rubakasrubakas
4

rails-view-components-advanced

Organize complex Rails ViewComponent UI patterns with composition, slots, and lifecycle guidance.

Official
Advanced