skills.rest
alongor666
alongor666COMMUNITY
Explore all skills by this author →
GitHub

component-styling

Generate BEM-compliant responsive CSS templates for Vue components.

1|Updated Nov 4, 2025
Search Tags:#frontend#responsive design#UI/UX#CSS#BEM naming#component styles#Vue styling
One-click install
npx skills add https://github.com/alongor666/daylyreport --skill component-styling
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: component-styling
Source: https://github.com/alongor666/daylyreport/tree/main/.claude/skills/component-styling
Command: npx skills add https://github.com/alongor666/daylyreport --skill component-styling

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides standardized templates and guidelines for styling Vue components, ensuring a consistent, maintainable, and responsive user interface across the vehicle insurance data platform. It eliminates style inconsistencies and simplifies UI development.

Core Features & Use Cases

  • Component Templates: Offers ready-to-use style templates for common UI elements like cards, buttons, form controls, and chart containers.
  • BEM Naming Convention: Enforces the Block-Element-Modifier (BEM) methodology for CSS class naming, improving readability and preventing style conflicts.
  • Responsive Design: Defines a 3-level breakpoint system (mobile, tablet, desktop) and provides examples for responsive layouts and fluid typography.
  • Best Practices: Emphasizes scoped CSS, CSS variables, and mobile-first design for efficient and maintainable styling.
  • Use Case: A developer needs to create a new dashboard widget. This skill provides the exact card template, BEM naming for its elements, and responsive rules to ensure it integrates seamlessly with the existing UI.

Quick Start

Create a new Vue component 'DataDisplayCard.vue' using the provided card style template and BEM naming conventions.

Frequently Asked Questions about component-styling

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

FAQPage Schema
How do I style Vue components consistently across a responsive website?▼

Use BEM naming conventions with scoped CSS and CSS variables to standardize component styling. This Skill provides ready-made templates for cards, buttons, forms, and chart containers that enforce consistent, responsive design across your Vue application.

What is BEM naming convention and why does it matter for CSS?▼

BEM (Block-Element-Modifier) is a CSS methodology that organizes classes into blocks, elements, and modifiers to prevent naming conflicts and improve readability. It eliminates style inconsistencies and makes maintenance easier across large component libraries.

How do I make Vue components responsive across mobile, tablet, and desktop?▼

Apply a 3-level breakpoint system with mobile-first design principles. This Skill includes responsive layout examples and fluid typography rules that scale Vue components seamlessly across device sizes without duplicating styles.

Can I use scoped CSS with component style templates in Vue?▼

Yes. This Skill emphasizes scoped CSS to isolate component styles and prevent global conflicts. Combined with CSS variables and BEM naming, scoped styling keeps your Vue component library maintainable and collision-free.

What's the fastest way to build a styled dashboard widget?▼

Start with this Skill's ready-to-use card template, apply the BEM naming convention for its elements, and use the responsive breakpoint rules. You'll integrate seamlessly with existing UI without designing from scratch.

Do I need to know CSS variables to use this styling approach?▼

CSS variables are recommended but not required. This Skill teaches how to leverage them for maintainable, theme-friendly styling. The templates and guidelines work with or without variables, depending on your project scope.

Related Skills

Explore More Design & Creative Skills→
johnlindquistjohnlindquist
24

design

Manage design tokens and export them to CSS, JSON, and Tailwind config.

Community
Advanced
hakushunhakushun

frontend-component

Create React components with TypeScript, Storybook stories, and tests.

Community
Basic
sinfinsinfin
10

folio-scss

Define Sass/SCSS conventions for Folio component styling with BEM and responsive design.

Official
Intermediate
KullendorffKullendorff

tailwind-css

Configure Tailwind CSS utility-first styling with JIT compilation and build tool integration.

Community
Intermediate