frontend-conventions

Name: frontend-conventions
Availability: InStock
Author: Bike Index

Enforce Tailwind CSS and ViewComponent conventions in frontend code.

308|76|Updated Jul 25, 2013

Search Tags:#coding conventions #Tailwind CSS #ViewComponent #HTML styling #JavaScript interactivity

Ready to run

npx skills add https://github.com/bikeindex/bike_index --skill frontend-conventions-bikeindex

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-conventions
Source: https://github.com/bikeindex/bike_index/tree/main/.claude/skills/frontend-conventions
Command: npx skills add https://github.com/bikeindex/bike_index --skill frontend-conventions-bikeindex

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This skill helps enforce and maintain consistency across Bike Index's frontend development, ensuring a standardized codebase for better maintainability and collaboration.

Core Features & Use Cases

Conventions Enforcement: Applies a set of predefined style and code rules for HTML, SCSS, and JavaScript.
Tailwind CSS Guidelines: Manages prefixing, variant modifiers, and form styling using Tailwind classes.
ViewComponent Usage: Encourages the use of components and adheres to the naming and structuring standards of ViewComponent.

Quick Start

Run 'bin/lint file.html.erb' after editing a .html.erb file to apply the frontend conventions.

Frequently Asked Questions about frontend-conventions

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

FAQPage Schema

How do I enforce Tailwind CSS conventions in my web development project?▼

To enforce Tailwind CSS conventions, automated linting scripts check prefixing, variant modifiers, and form styling against predefined rules. This ensures code consistency and reduces manual styling errors across your codebase.

What is the best way to maintain ViewComponent naming and structuring standards?▼

The best way to maintain ViewComponent standards is applying automated checks that verify component naming and structuring rules. This reduces manual errors and ensures a uniform, maintainable codebase.

How do I lint HTML and SCSS files for frontend coding conventions?▼

You can lint HTML and SCSS files by running a script like 'bin/lint file.html.erb' after editing. This applies predefined style and code rules for HTML, SCSS, and JavaScript automatically.

Does this frontend conventions tool work with JavaScript interactivity and HTML styling?▼

Yes, this frontend conventions tool works with JavaScript interactivity and HTML styling by applying predefined style and code rules. It manages adherence to Tailwind CSS and ViewComponent guidelines in web development.

Why does my Tailwind CSS styling break when using ViewComponent?▼

Tailwind CSS styling may break with ViewComponent if naming and structuring standards are not followed. Automated checks help enforce conventions for prefixing, variant modifiers, and component usage to prevent inconsistencies.