skills.rest
slashwhy
slashwhyOFFICIAL
Explore all skills by this author →
WebsiteGitHub

styling

Enforce CSS variables, BEM naming, and responsive design in Vue.js components.

5|1|Updated Jan 16, 2026
Search Tags:#responsive design#css#styling#vue#design tokens#bem
One-click install
npx skills add https://github.com/slashwhy/super-todo --skill styling-slashwhy
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: styling
Source: https://github.com/slashwhy/super-todo/tree/main/.github/skills/styling
Command: npx skills add https://github.com/slashwhy/super-todo --skill styling-slashwhy

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill ensures consistent visual presentation across the application by enforcing project-wide styling conventions, including CSS variables, BEM naming, and responsive design patterns.

Core Features & Use Cases

  • Design Token Adherence: Guarantees that colors, spacing, and typography are applied using predefined CSS variables.
  • BEM Naming Convention: Promotes maintainable and scalable CSS by enforcing the Block, Element, Modifier pattern.
  • Responsive Layouts: Provides patterns for mobile-first, adaptive, and responsive design.
  • Use Case: When styling a new Vue component, use this Skill to ensure all colors, padding, and margins align with the project's design system, and that the component is responsive across different screen sizes.

Quick Start

Use the styling skill to apply a primary button style to the element with the class 'btn-submit'.

Frequently Asked Questions about styling

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

FAQPage Schema
How do I apply consistent design tokens to Vue.js components?▼

To apply consistent design tokens to Vue.js components, use this Skill to enforce predefined CSS variables for colors, spacing, and typography, ensuring visual coherence and maintainability across your project.

What is the best way to structure CSS for scalable Vue.js applications?▼

The best way to structure scalable CSS for Vue.js applications is using the BEM naming convention alongside scoped CSS practices, which enforces maintainable Block, Element, and Modifier patterns for your styling.

How do I implement mobile-first responsive design patterns in Vue?▼

To implement mobile-first responsive design patterns in Vue, this Skill provides adaptive layout rules and enforces responsive design principles, ensuring your components render correctly across different screen sizes.

Do I need predefined CSS variables to use this styling Skill?▼

Yes, you need predefined CSS variables to use this styling Skill, as it enforces design token adherence by requiring that colors, spacing, and typography are applied using your project's existing CSS variables.

Can I use this Skill to style a Vue component without an existing design system?▼

No, this Skill is designed to enforce project-wide styling conventions and requires an existing design system, as it facilitates the application of predefined design tokens rather than generating new style guidelines.

Related Skills

Explore More Design & Creative Skills→
ArnavPuriArnavPuri
3

design-context

Establish and manage design context with brand identity, color palettes, and typography.

Community
Intermediate
0xDarkMatter0xDarkMatter
29

tailwind-patterns

Generate Tailwind CSS v3+ utility patterns with responsive breakpoints and dark mode configuration.

Community
Basic
alongor666alongor666
1

component-styling

Generate BEM-compliant responsive CSS templates for Vue components.

Community
Basic
t-stringst-strings

Frontend CSS

Enforce frontend CSS standards for consistent styling and maintainability.

Official
Basic