무료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.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

mikemai2awesome/agent-skills스타 16(GitHub 16 + cccskills 0)

실행 점수 미검증

설치 방법 보기

포함된 파일(2)

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

SKILL.md(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

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;
}

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

같은 저장소의 스킬

brightcove-player

무료

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.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

mikemai2awesome/agent-skills162026년 7월 31일 업데이트

format-storybook

무료

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.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

mikemai2awesome/agent-skills162026년 7월 31일 업데이트

frontend-a11y

무료

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.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

mikemai2awesome/agent-skills162026년 7월 31일 업데이트

frontend-design-2010s

무료

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.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

mikemai2awesome/agent-skills162026년 7월 31일 업데이트

ios-a11y

무료

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.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

mikemai2awesome/agent-skills162026년 7월 31일 업데이트

more-css

무료

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.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

mikemai2awesome/agent-skills162026년 7월 31일 업데이트

mikemai2awesome의 스킬 모두 보기

이 스킬의 문제 신고

설치

명령으로 설치

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

터미널에 붙여 넣고 실행합니다(Node.js 필요). Claude Code, Codex 등 설치할 에이전트를 고를 수 있습니다.

에이전트에게 부탁하기

다음 Agent Skill을 설치해 주세요.
https://github.com/mikemai2awesome/agent-skills/tree/main/skills/frontend-conventions

먼저 SKILL.md와 첨부 파일의 내용을 확인해 수상한 처리(외부 전송, 인증 정보 읽기 등)가 없는지 확인한 뒤 Claude Code는 ~/.claude/skills/frontend-conventions/, Codex는 ~/.agents/skills/frontend-conventions/ 에 배치해 주세요.

이 문장을 그대로 Claude Code나 Codex에 보내면 내용을 확인한 뒤 설치해 줍니다.

GitHub에서 소스 보기

저장소: mikemai2awesome/agent-skills
스타: 16
포크: 0
카테고리: 개발
라이선스: MIT
원문 언어: 영어
최종 업데이트: 2026년 7월 31일

스킬은 에이전트를 위한 지시와 스크립트의 묶음입니다. cccskills는 내용의 안전성을 보증하지 않습니다. 설치하기 전에 내용을 확인하세요.