Css Scss Human Made

What it does

This skill enables AI agents to generate CSS and SCSS code adhering to a specific, pre-defined coding standard. It ensures consistency and maintainability in frontend projects by enforcing rules related to naming conventions, formatting, and best practices. The agent can produce clean, readable, and compliant stylesheets based on the provided humanmade standards.

When to use it

• Creating new project stylesheets: Generate a base stylesheet from scratch that automatically follows established coding guidelines.
• Refactoring existing CSS: Convert legacy CSS code into SCSS while adhering to the defined standard for improved organization and maintainability.
• Generating component-specific styles: Produce isolated, styled components with consistent formatting and naming conventions.
• Automating style guide implementation: Ensure all new or modified styles align with a pre-existing style guide.

Key capabilities

• SCSS code generation
• CSS code generation
• Adherence to humanmade coding standards
• Consistent formatting
• Naming convention enforcement

Example prompts

• "Generate SCSS for a button component, following the humanmade standard."
• "Convert this CSS into SCSS and apply the humanmade style guide: [CSS code snippet]"
• "Create a base stylesheet with global styles adhering to the humanmade coding standards."

Tips & gotchas

The effectiveness of this skill relies on having a clear understanding of the "humanmade" coding standard. Familiarize yourself with these guidelines beforehand for optimal results.