skills.rest
kleon6436
kleon6436COMMUNITY
Explore all skills by this author →
WebsiteGitHub

css-coding-standards

Enforce CSS and Tailwind coding standards during code reviews.

Updated Apr 13, 2026
Search Tags:#css#tailwind#coding-standards#responsive-design#css-variables#bem#selector-conventions
One-click install
npx skills add https://github.com/kleon6436/GitHubCopilotSettings --skill css-coding-standards
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: css-coding-standards
Source: https://github.com/kleon6436/GitHubCopilotSettings/tree/main/skills/css-coding-standards
Command: npx skills add https://github.com/kleon6436/GitHubCopilotSettings --skill css-coding-standards

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

CSS and Tailwind coding standards are defined and enforced to ensure consistency across projects.

Core Features & Use Cases

  • Naming conventions: BEM for raw CSS and kebab-case class names.
  • Tailwind usage: prioritize Tailwind's utilities; avoid overusing @apply; componentized styles; use tokens from config.
  • Selector and property-order rules: low specificity, no ID selectors, and a defined property-order sequence.
  • Responsive design guidance: mobile-first approach with proper breakpoints and utilities.
  • CSS variables: central tokens defined in :root and shared via Tailwind config.
  • Commenting conventions: clear structure, TODO markers, and documented hacks.

Quick Start

Audit a project’s CSS and Tailwind usage and apply the guidelines shown in this Skill.

Frequently Asked Questions about css-coding-standards

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

FAQPage Schema
What CSS coding standards should I use for consistent styling across a project?▼

Consistent CSS coding standards use BEM naming conventions, kebab-case class names, low specificity selectors, and a defined property-order sequence to ensure maintainable project styles.

How do I enforce Tailwind coding standards without overusing @apply?▼

Tailwind coding standards prioritize utility classes over @apply, encouraging componentized styles and centralized design tokens configured via the Tailwind config file.

How do I structure CSS variables and responsive design rules for mobile-first projects?▼

CSS variables should be centralized in :root and shared via Tailwind config, while responsive design standards enforce a mobile-first approach using defined breakpoints and utility classes.

Does this CSS standards approach work for both raw CSS and Tailwind-based projects?▼

Yes, these standards apply to both raw CSS and Tailwind-based projects, applying BEM naming, selector rules, and comment conventions during code reviews and style audits.

What selector rules and commenting conventions are recommended for CSS code reviews?▼

CSS code reviews enforce low specificity without ID selectors, a defined property-order sequence, clear structural comments, documented hacks, and TODO markers for maintainable code.

Related Skills

Explore More Design & Creative Skills→
dylantarredylantarre
38

breakpoints

Generate CSS, Tailwind, and JSON responsive breakpoint tokens from presets or custom values.

Community
Basic
shawn-sandyshawn-sandy

css-to-class

Convert multi-class HTML strings into a single semantic CSS class.

Community
Intermediate
nanorepublicananorepublica
61

Global Tech Stack

Validate code against centralized global tech stack standards.

Community
Basic
ngocp-0847ngocp-0847
1

ui-styling

Compose React UIs using shadcn/ui components with Tailwind CSS styling.

Community
Advanced