FreePublished on GitHub

frontend-conventions

Define and enforce consistent coding standards across HTML, CSS, and JavaScript. Always use this skill when naming a new class, variable, component, or file; setting up a new project's conventions; choosing a class prefix for a new CSS category; deciding on modifier API names (sizes, shades, hierarchy, breakpoints); or reviewing code for formatting and naming consistency. If you're about to invent a prefix, abbreviation, or modifier name without checking the conventions first, use this skill.

The English summary is being prepared. Showing the original description.

mikemai2awesome/agent-skills16 stars(GitHub 16 + cccskills 0)

Run score Not tested

See how to install

Files included (2)

SKILL.md6.5 KB
evals/evals.json4.8 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

Frontend Conventions

A shared system of rules for naming, formatting, and structuring code across HTML, CSS, and JavaScript. Consistency here is what makes a codebase feel like it was written by one person, regardless of team size.

Code Formatting

General

Setting	Value
Indentation	spaces
Tab size	2
Translate tabs to spaces	Yes
Trim trailing whitespace	Yes
New line at end of file	Yes

Quotes by File Type

File type	Quote style
`.html`	`"double"`
`.css`	`'single'`
`.js`	`'single'`
`.json`	`"double"`
`.yml`	none in general; `'single'` when forcing a string or using special characters; `"double"` when parsing escape codes

Naming Cases

What you're naming	Case style
HTML attributes and values	`dash-case`
CSS custom property	`--dash-case`
JavaScript variable / function	`camelCase`
JavaScript class	`PascalCase`
File names	`dash-case.extension`

Naming Prefixes

All CSS classes are prefixed by category so their purpose is immediately visible in HTML.

Category	Prefix
Component	`c-`
Utility	`u-`
JavaScript hook	`js-`

js- classes are never styled — they exist solely as selectors for JavaScript behavior.

Namespacing

When working within a named project or library, prefix everything with a project namespace to prevent collisions:

Scope	Namespace
Global/custom property	`--namespace-property-name`
Scoped/component property	`--prefix-namespace-block-property`

Examples:

/* Global token */
var(--mmn-color-bg-primary)

/* Scoped to a component */
var(--c-mmn-card-border-radius)

Frontend Naming Patterns

Type	Pattern	Example
HTML custom element	`<namespace-element-name>`	`<mmn-card>`
HTML data attribute	`data-namespace-attribute`	`data-mmn-uuid="rng1928"`
CSS selector	`class="prefix-namespace-block__element--modifier"`	`class="c-mmn-card__media--video"`
JS selector	`class="js-namespace-target"`	`class="js-mmn-card-for-ab-test"`

Acceptable Abbreviations

Only use abbreviations from this list — everything else is spelled out in full.

Full word	Abbreviation
Image	`img`
Background	`bg`
Minimum	`min`
Maximum	`max`
Call to action	`cta`
Column	`col`
Column span	`colspan`
Row span	`rowspan`

Modifier API

Use these standardized modifier names so any developer can predict class names without checking documentation.

Size Scale

2xs · xs · sm · md · lg · xl · 2xl

<!-- The 2xl heading component -->
<h1 class="c-mmn-heading--2xl">...</h1>

Tints and Shades

xxlight · xlight · light · medium · dark · xdark · xxdark

<!-- The xdark magenta utility color -->
<span class="u-mmn-color-magenta-xdark">...</span>

Hierarchy

primary · secondary · tertiary

<!-- The primary button component -->
<button class="c-mmn-button--primary" type="button">...</button>

Responsive Behavior

Apply a utility or modifier at a specific breakpoint using @from- and @until- suffixes:

Syntax	Meaning
`behavior@from-[breakpoint]`	Apply from this breakpoint and up
`behavior@until-[breakpoint]`	Apply below this breakpoint

<!-- Full width from the sm breakpoint and beyond -->
<div class="u-mmn-full-width@from-sm">...</div>

<!-- Full width below the sm breakpoint only -->
<div class="u-mmn-full-width@until-sm">...</div>

CSS Property Order

Write CSS properties in this order within every rule. Grouping by concern (display → position → size → space → typography → border → background → advanced) makes rules easier to scan and diff.

.selector {
  content;

  /* Display */
  display;
  grid;
  grid-*;
  flex;
  flex-*;
  justify-*;
  align-*;
  place-*;
  order;
  box-sizing;
  appearance;
  visibility;
  opacity;

  /* Position */
  position;
  inset;
  inset-block;
  inset-block-start;
  inset-block-end;
  inset-inline;
  inset-inline-start;
  inset-inline-end;
  float;
  clear;
  transform;
  z-index;

  /* Size */
  inline-size;
  min-inline-size;
  max-inline-size;
  block-size;
  min-block-size;
  max-block-size;
  overflow;
  overflow-block;
  overflow-inline;

  /* Space */
  margin;
  margin-block;
  margin-block-start;
  margin-block-end;
  margin-inline;
  margin-inline-start;
  margin-inline-end;
  padding;
  padding-block;
  padding-block-start;
  padding-block-end;
  padding-inline;
  padding-inline-start;
  padding-inline-end;

  /* Typography */
  font;
  font-family;
  font-style;
  font-size;
  font-weight;
  font-feature-settings;
  font-variant;
  line-height;
  list-style;
  color;
  text-align;
  text-decoration;
  text-transform;
  text-wrap;
  letter-spacing;
  vertical-align;
  cursor;
  pointer-events;
  user-select;

  /* Border */
  border;
  border-radius;
  border-width;
  border-style;
  border-color;
  border-image;
  box-shadow;
  outline;

  /* Background */
  background;
  background-color;
  background-image;
  background-position;
  background-repeat;
  background-size;
  backdrop-filter;

  /* Advanced */
  filter;
  will-change;
  transition;
  animation;
}

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

More skills from this repository

brightcove-player

Free

Style and fully customize the Brightcove video player UI — control bar, play button, progress bar, volume, captions, playlists, responsive sizing, and skins. Use this skill whenever the user mentions Brightcove, video-js player styling, customizing a Brightcove player, changing player colors/layout/controls, embedding a Brightcove player, making it responsive, player skins or themes, Brightcove Studio styling, or working with Brightcove playlists or captions. Also use it when the user is working with `.video-js`, `vjs-*` CSS classes, or `bc()` / `videojs.getPlayer()` / `videojs()` JavaScript APIs.

The English summary is being prepared. Showing the original description.

mikemai2awesome/agent-skills16Updated Jul 31, 2026

format-storybook

Free

Structure and organize Storybook files for scalability using battle-tested patterns. Based on "A Storybook format that scales with you" by Cassondra Roberts. Always use this skill when creating or editing any Storybook story file, writing template files, organizing a component library, setting up visual regression tests with Chromatic, or when the user asks anything about Storybook — even casual questions about file structure, controls, args, or how to document a component.

The English summary is being prepared. Showing the original description.

mikemai2awesome/agent-skills16Updated Jul 31, 2026

frontend-a11y

Free

Write minimal, accessible web UI without over-engineering, adapting to whatever stack the project uses — React, Vue, Svelte, Angular, web components, or plain HTML. Use this skill on every project and every task that writes or reviews markup or components, builds forms, adds interactive elements like buttons, dialogs, accordions, or tabs, or audits code for accessibility — even when the user never mentions accessibility, and even inside a framework, CMS, or design system. It's non-negotiable regardless of project type, stack, or deadline. About to reach for ARIA attributes, a dialog library, a focus-trap package, or a headless UI component? Use this skill first.

The English summary is being prepared. Showing the original description.

mikemai2awesome/agent-skills16Updated Jul 31, 2026

frontend-design-2010s

Free

Create web interfaces with an authentic early-2010s aesthetic. Use this skill when the user wants a 2010s-era, Web 2.0, or retro corporate web look — gradient headers, glossy buttons, skeuomorphic icons, horizontal band layouts, and drop shadows from circa 2010–2014.

The English summary is being prepared. Showing the original description.

mikemai2awesome/agent-skills16Updated Jul 31, 2026

ios-a11y

Free

Implement accessibility in iOS apps using Swift, UIKit, and SwiftUI. Use this skill whenever working on any iOS development task that involves: making UI elements accessible to VoiceOver or other assistive technologies, adding or reviewing accessibility labels/hints/traits/actions/values, supporting Dynamic Type or text scaling, respecting Reduce Motion or reduced transparency preferences, adapting to Dark Mode or increased contrast, building accessible forms and inputs, announcing dynamic content changes, managing focus programmatically, customizing accessibility focus order, supporting external keyboard navigation, or auditing iOS code for accessibility issues. Trigger even when the user only says "SwiftUI" or "UIKit" without mentioning "accessibility" explicitly — if they're building custom controls, modals, forms, lists, or animated views, this skill applies.

The English summary is being prepared. Showing the original description.

mikemai2awesome/agent-skills16Updated Jul 31, 2026

more-css

Free

Write scalable, well-architected CSS using design tokens, cascade layers, and modern organization patterns. Use this skill as the default for any real project — if it has more than a handful of CSS files, multiple components, a team, a design system, or any kind of token or theming setup, this is the right skill.

The English summary is being prepared. Showing the original description.

mikemai2awesome/agent-skills16Updated Jul 31, 2026

See all skills by mikemai2awesome

Report a problem with this skill

Install

Install with a command

npx skills add https://github.com/mikemai2awesome/agent-skills --skill frontend-conventions

Paste it into your terminal and run it (requires Node.js). You can choose which agents to install it for, such as Claude Code or Codex.

Ask your agent

Please install the following Agent Skill.
https://github.com/mikemai2awesome/agent-skills/tree/main/skills/frontend-conventions

First review SKILL.md and the bundled files and confirm there is nothing suspicious (such as sending data externally or reading credentials). Then place it in ~/.claude/skills/frontend-conventions/ for Claude Code, or ~/.agents/skills/frontend-conventions/ for Codex.

Send this text to Claude Code or Codex as is. It checks the contents before installing.

View source on GitHub

Repository: mikemai2awesome/agent-skills
Stars: 16
Forks: 0
Category: Development
License: MIT
Original language: English
Last updated: Jul 31, 2026

A skill is a set of instructions and scripts for an agent. cccskills does not guarantee that skills are safe. Review the contents before you install.