folio-scss
OfficialSass/SCSS styling conventions for Folio components.
Authorsinfin
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill provides guidelines for writing Sass/SCSS stylesheets for Folio components, ensuring consistency and maintainability across the project.
Core Features & Use Cases
- BEM Nesting: Defines best practices for BEM (Block Element Modifier) naming conventions for Folio components.
- Component Stylesheets: Instructions on where to place styles for each component.
- Responsive Styles: Guidelines on implementing responsive design using container queries and media queries.
- Variables and Utilities: Usage of pre-defined variables and utility functions.
- File Format: Standard for using indented Sass or SCSS and readability.
- Quality Gates: Checks for compilation errors after edits.
- Use Case: A developer new to Folio uses this Skill to style a new component and ensure it adheres to the established styling conventions.
Quick Start
Apply the folio-scss skill to the new component 'ui-button' by editing its corresponding '_ui-button.sass' file.
Dependency Matrix
Required Modules
None requiredComponents
scriptsreferences
💻 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: folio-scss Download link: https://github.com/sinfin/folio/archive/main.zip#folio-scss 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 620,000+ vetted skills library on demand.