skills.rest
bikeindex
bikeindexOFFICIAL
Explore all skills by this author →
WebsiteGitHub

frontend-conventions

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
One-click install
npx skills add https://github.com/bikeindex/bike_index --skill frontend-conventions-bikeindex
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
reckerswartzreckerswartz

tailwind-agent

Style Rails ERB views and ViewComponents with Tailwind CSS 4 utilities.

Community
Advanced
HeldinhowHeldinhow
4

cicd-github-actions

Generate GitHub Actions CI/CD pipelines for automated builds, tests, and deployments.

Community
Intermediate
corey-alixcorey-alix

Atomic CSS

Create atomic CSS utility classes using token-based custom properties.

Official
Intermediate
ehtbantonehtbanton

stylelint-config-generator

Generate Stylelint configuration files for CSS/SCSS linting and formatting.

Community
Basic