skills.rest
doncan-orozco
doncan-orozcoCOMMUNITY
Explore all skills by this author →
GitHub

frontend

Develop frontend components with Hotwire, Phlex, and Tailwind CSS.

Updated Jan 20, 2023
Search Tags:#frontend#tailwind#ui development#hotwire#stimulus#phlex
One-click install
npx skills add https://github.com/doncan-orozco/papyro --skill frontend-doncan-orozco
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend
Source: https://github.com/doncan-orozco/papyro/tree/main/.ai/skills/frontend
Command: npx skills add https://github.com/doncan-orozco/papyro --skill frontend-doncan-orozco

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill streamlines the process of building modern, interactive web interfaces by providing guidance and best practices for using Hotwire, Phlex, and Tailwind CSS within the Papyro framework.

Core Features & Use Cases

  • Component-Based UI: Develop reusable UI elements using Phlex.
  • Interactive Features: Implement dynamic behavior with Stimulus controllers and Turbo.
  • Styling: Apply consistent and efficient styling with Tailwind CSS.
  • Use Case: When creating a new user profile card component, you would use this Skill to understand the Phlex structure, how to integrate Stimulus for any interactive elements (like an edit button), and how to apply Tailwind classes for styling.

Quick Start

Use the frontend skill to create a new Phlex component for a user avatar.

Frequently Asked Questions about frontend

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

FAQPage Schema
How do I build interactive UI components with Hotwire and Phlex?▼

To build interactive UI components with Hotwire and Phlex, you structure reusable view elements using Phlex patterns and integrate Stimulus controllers to manage dynamic behavior and Turbo interactions.

What is the best way to style Phlex components with Tailwind CSS?▼

The best way to style Phlex components with Tailwind CSS is to apply consistent and efficient styling best practices directly within the component structure, ensuring maintainable and reusable UI element design.

How do I add a Stimulus controller to a Phlex view component?▼

To add a Stimulus controller to a Phlex view component, you integrate the controller within the Phlex structure to handle interactive elements, such as edit buttons or dynamic user interface updates.

How do you handle overlay positioning in Hotwire and Stimulus interfaces?▼

Handling overlay positioning in Hotwire and Stimulus interfaces involves using specific interactive component patterns to ensure correct visual alignment and dynamic rendering within the web application UI.

Can I use this frontend approach for building a user profile card component?▼

Yes, you can use this approach for a user profile card by creating a Phlex component for the structure, integrating Stimulus for interactive elements, and applying Tailwind classes for the styling.

What debugging hygiene practices should I follow for Hotwire and Phlex UI development?▼

Debugging hygiene for Hotwire and Phlex UI development involves following specific interactive component patterns and structural best practices to prevent overlay issues and ensure efficient frontend troubleshooting.

Related Skills

Explore More Software Engineering Skills→
doncan-orozcodoncan-orozco

ux

Design and implement UX/UI patterns for Papyro with Phlex and Tailwind CSS.

Community
Intermediate
newstlernewstler
20

hotwire-patterns

Apply Turbo and Stimulus patterns to Rails CRUD views for interactive interfaces.

Community
Intermediate
KaakatiKaakati
2

phlex-dev

Generate Ruby Phlex view components for Rails with Atomic Design.

Community
Intermediate
arthun01arthun01

rails-components

Create reusable Rails UI components with ERB templates and class-based helpers.

Community
Intermediate