styling

Name: styling
Availability: InStock
Author: Esposter

Enforce UnoCSS Attributify styling conventions in Vue components.

23|3|Updated Jun 28, 2022

Search Tags:#frontend #css #styling #vue #unocss #attributify

Ready to run

npx skills add https://github.com/Esposter/Esposter --skill styling-esposter

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: styling
Source: https://github.com/Esposter/Esposter/tree/main/.agents/skills/styling
Command: npx skills add https://github.com/Esposter/Esposter --skill styling-esposter

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Prop-based styling in Vue components can lead to inconsistent UI, verbose CSS, and brittle class management. This Skill defines a cohesive set of UnoCSS Attributify conventions to streamline styling and improve maintainability.

Core Features & Use Cases

Prop-based styling for ALL static styles using UnoCSS attributify attributes (e.g., <div text-red p-4>).
UnoCSS attributes go first before Vue/component props to ensure consistent ordering and easier refactoring.
Apply conventions when writing .vue or .scss files to maintain scalable, theme-driven UI and consistent class usage across components.

Quick Start

Apply UnoCSS Attributify utilities directly in your Vue components to start styling with concise, semantic attributes.

Frequently Asked Questions about styling

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

FAQPage Schema

How do I enforce consistent UnoCSS attributify styling in Vue components?▼

Apply UnoCSS attributify utilities directly in Vue templates to standardize static styling, ensuring utility attributes precede component props for consistent ordering, easier refactoring, and scalable theme-driven UI.

What is the best way to order UnoCSS attributes and Vue component props?▼

The best way to order UnoCSS attributes and Vue component props is to place all UnoCSS attributify utilities first, directly before standard component props, ensuring consistent class management, clearer UI semantics, and simplified refactoring.

Does UnoCSS attributify work with standard Vue templates and SCSS files?▼

Yes, UnoCSS attributify conventions apply directly to Vue templates and related style files like SCSS, standardizing prop-based static styling to maintain scalable, theme-driven UI and consistent class usage across components.

Why use UnoCSS attributify instead of traditional CSS classes for Vue styling?▼

Use UnoCSS attributify instead of traditional CSS classes to eliminate verbose CSS and brittle class management, replacing them with concise, semantic attributes that enforce consistent UI semantics and maintain scalable styling conventions.

When should I apply UnoCSS attributify conventions in my Vue project?▼

Apply UnoCSS attributify conventions when writing or modifying Vue templates and SCSS files to define all static styles, preventing inconsistent UI and ensuring cohesive, maintainable styling across your Vue components.