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

ux

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a structured approach to designing and implementing User Experience (UX) and User Interface (UI) patterns specifically for the Papyro web publishing application, ensuring a consistent, calm, and content-first design aesthetic.

Core Features & Use Cases

  • View Generation: Create new views and components adhering to Papyro's design principles.
  • Layout Design: Implement editorial, calm, and content-first layouts.
  • Component Usage: Utilize pre-defined UI components from app/components/ui/.
  • Accessibility: Ensure adherence to accessibility best practices.
  • Use Case: When tasked with creating a new article landing page, use this Skill to generate the necessary Phlex views, apply the correct typography and layout, and ensure it aligns with the brand's mission and content-first approach.

Quick Start

Generate a new article view using the ux skill, following the provided brand adjectives and mission.

Frequently Asked Questions about ux

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

FAQPage Schema
How do I design content-first UI views for a web application using Phlex and Tailwind CSS?▼

Designing content-first UI views with Phlex and Tailwind CSS involves generating editorial layouts that prioritize readability and calm aesthetics. This approach structures typography and components to ensure the content remains the primary focus.

What is the best way to implement editorial layouts in Ruby on Rails?▼

The best way to implement editorial layouts in Ruby on Rails is by using Phlex-Rails for view generation combined with Tailwind CSS. This pairing allows for building structured, content-first interfaces without relying on traditional ERB templates.

Do I need Phlex-Rails to generate accessible web components?▼

You need Phlex-Rails alongside Tailwind CSS to generate accessible web components within this specific workflow. These dependencies provide the foundational environment required to implement the UI patterns and ensure adherence to accessibility best practices.

Can I use pre-defined UI components for article landing pages?▼

You can use pre-defined UI components from the application's component directory to build article landing pages. This ensures new views align with established content-first design principles and maintains visual consistency across the publishing platform.

How do I apply typography and layout patterns for a calm reading experience?▼

Applying typography and layout patterns for a calm reading experience requires utilizing a structured design approach with Phlex and Tailwind CSS. This method focuses on editorial spacing, readable font structures, and accessibility to support content consumption.

Related Skills

Explore More Design & Creative Skills→
KaakatiKaakati
2

phlex-dev

Generate Ruby Phlex view components for Rails with Atomic Design.

Community
Intermediate
jscraikjscraik
8

baseline-ui

Enforce Tailwind CSS, animation, accessibility, and layout conventions in React UI components.

Community
Intermediate
mgd34msumgd34msu
4

tailwindcss

Style web applications with Tailwind CSS utility classes and responsive design.

Community
Intermediate
7a336e6e7a336e6e
1

creating-page-layouts

Design editorial page layouts with CSS Grid, asymmetry, and bento grids.

Community
Intermediate