component-styling
CommunityCraft consistent, responsive UI with BEM & Vue styles.
Authoralongor666
Version1.0.0
Installs0
System Documentation
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
scopedCSS, 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.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: component-styling Download link: https://github.com/alongor666/daylyreport/archive/main.zip#component-styling Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.