Run any Skill in Manus with one click

css-modules

Stars3

Forks0

UpdatedJuly 7, 2026 at 03:58

CSS Modules and styling conventions — design tokens, naming, variants, responsive design, layout, dark mode/theming. Use when styling or visually adjusting components, or editing any *.module.css, tokens, or global styles. For animations/transitions/motion use the `motion` skill instead. 日本語の依頼例:「スタイルを当てて」「見た目を整えて」「デザイン調整」「ダークモード」「レスポンシブ対応」「CSS書いて」。

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

Syo-M

Syo-M/fable-frontend-skills

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Web DevelopersComputer and Mathematical Occupations·SOC 15-1254

SKILL.md

readonly

name

css-modules

description

CSS Modules

Files & naming

One module per component, colocated: UserCard.tsx + UserCard.module.css.
Class names: camelCase (primaryButton, not primary-button) — enables styles.primaryButton without bracket access.
Name by role, not appearance: .errorMessage not .redText. The module scope already namespaces — no BEM prefixes needed.
Import as styles: import styles from './UserCard.module.css'.

Design tokens — single source of truth

All colors, spacing, radii, shadows, typography, z-index live as CSS custom properties in src/styles/tokens.css, defined on :root.
Component modules consume tokens only — the semantic/component tier where tiers exist (see design-system), never primitives like --blue-600. A raw hex/px value for a themable property in a component module is a bug.
Spacing on a scale (--space-1 … --space-8); z-index from a fixed ladder (--z-dropdown, --z-modal, --z-toast) — never z-index: 9999.
Theming (dark mode) by redefining tokens — components never branch on theme themselves. Default to prefers-color-scheme; add [data-theme] only when a user-facing toggle is required, set pre-paint by a tiny inline script (CSP nonce applies — see frontend-security) to avoid a wrong-theme flash.

Variants & state

Variants via data attributes, not class string concatenation:

<button className={styles.button} data-variant={variant} data-size={size}>

.button[data-variant='danger'] { background: var(--color-danger); }

Boolean UI state the same way (data-open, aria-expanded) — style off ARIA attributes when one exists: .menu[aria-expanded='true'].
clsx has exactly one job here: merging a consumer-passed className prop with the base class. Enumerated variants and boolean state always go through data attributes, never conditional class lists; a component wanting 3+ conditional classes should be restructured into variants.

Layout & responsive

Mobile-first: base styles, then @media (min-width: …) upward. Breakpoints documented once in tokens.css comments (custom properties don't work in media queries — keep the canonical list there).
Prefer modern layout primitives: flex gap / grid over margin hacks; aspect-ratio; container queries for components that adapt to their container, media queries only for page-level layout.
Aspect-preserving media: give the box a defined aspect-ratio and use object-fit: contain/cover. Never size an image with max-width/max-height inside a flex item — the main-axis shrink sizes width independently of the height cap and stretches the image (a mixed-aspect-ratio thumbnail grid is where this bites).
Logical properties (margin-inline, padding-block, inset-inline-start) over physical ones — free RTL support (the foundation the i18n skill builds on).
No fixed heights on text containers; min-height if needed.

Globals — the only allowed global CSS

src/styles/ contains exactly: tokens.css, reset.css, globals.css (base element styles: body, headings, links). Nothing else is global. No :global() in component modules except to target third-party library DOM you don't control — with a comment saying which library.

In Astro projects, the per-component styling primitive is the single-file scoped <style> block instead of *.module.css — see astro. The token/naming/variant rules here still apply.

Motion

Animate transform and opacity only (compositor-friendly); never animate width/height/top/left for transitions.
Every significant animation (anything beyond a subtle hover/focus transition) respects @media (prefers-reduced-motion: reduce) — same threshold as the a11y skill.
Durations/easings as tokens (--duration-fast, --ease-out).
These are the invariants only — escalation (keyframes / WAAPI / animation libraries), View Transitions, entrance/exit animations, and scroll effects live in the motion skill.

Enforcement

The token/var() and class-naming rules above are machine-enforced by Stylelint — see tooling for the exact rules and the shipped templates/stylelint.config.mjs.

More from this repository

same repository

astro

Syo-M/fable-frontend-skills

Astro conventions — routing and adding pages, islands architecture, client directives, content collections, .astro components. Use when working in an Astro project. 日本語の依頼例:「Astroで〜」「ページを追加/新規作成して」「ルーティング」「アイランド」「コンテンツコレクション」「.astroコンポーネント」。

2026-07-123

nextjs

Syo-M/fable-frontend-skills

Next.js App Router conventions — routing and adding pages, Server/Client Components, data fetching, caching, Server Actions, route handlers, metadata, env vars. Use for any work inside a Next.js app. 日本語の依頼例:「Next.jsで〜」「ページを追加/新規作成して」「ルーティング」「Server Action」「ルートハンドラ」「RSC/サーバーコンポーネント」「キャッシュ」。

2026-07-123

codex-imagegen

Syo-M/fable-frontend-skills

Generate or AI-edit images by delegating to the Codex CLI ($imagegen / gpt-image) — sample banners, hero visuals, demo assets, image-to-image edits. Use whenever a task needs image GENERATION or AI photo editing (Claude Code cannot generate images itself). 日本語の依頼例:「画像を生成して」「サンプル画像を作って」「この写真を加工して」「バナー/ヒーロー画像が必要」。NOT for resizing/compressing existing assets (use `images-media`).

2026-07-073

governance

Syo-M/fable-frontend-skills

Repository governance — CI merge gates, toolchain pinning, dependency lifecycle and license policy, secrets scanning, change control for rules and sensitive paths, Git/PR conventions, observability, performance budgets, browser support. Use when setting up CI/CD, repo configuration, releases, adding dependencies, or defining team policy. 日本語の依頼例:「CI/CD設定」「リリース手順」「依存ライセンス確認」「秘密情報スキャン」「リポジトリ設定」「ブランチ/PR運用」「パフォーマンスバジェット」。

2026-07-073

motion

Syo-M/fable-frontend-skills

Animation and motion conventions — CSS transitions/keyframes, View Transitions, scroll-driven effects, animation libraries, exit animations, performance. Use when adding, changing, or debugging any animation, transition, or page-transition effect. 日本語の依頼例:「アニメーション付けて」「動きを付けて」「トランジション」「ページ遷移アニメ」「スクロール演出」「ふわっと表示」。

2026-07-073

storybook

Syo-M/fable-frontend-skills

Storybook conventions — CSF3 stories, play functions as Vitest component tests, decorators, a11y. Use when writing or editing *.stories.tsx or Storybook config, AND whenever asked to write tests for a component — stories with play functions are this repo's component-test layer. 日本語の依頼例:「Storybook/ストーリー書いて」「コンポーネントのテスト書いて」「play関数」「interaction test」。

2026-07-073

name

css-modules

description

CSS Modules

Files & naming

One module per component, colocated: UserCard.tsx + UserCard.module.css.
Class names: camelCase (primaryButton, not primary-button) — enables styles.primaryButton without bracket access.
Name by role, not appearance: .errorMessage not .redText. The module scope already namespaces — no BEM prefixes needed.
Import as styles: import styles from './UserCard.module.css'.

Design tokens — single source of truth

All colors, spacing, radii, shadows, typography, z-index live as CSS custom properties in src/styles/tokens.css, defined on :root.
Component modules consume tokens only — the semantic/component tier where tiers exist (see design-system), never primitives like --blue-600. A raw hex/px value for a themable property in a component module is a bug.
Spacing on a scale (--space-1 … --space-8); z-index from a fixed ladder (--z-dropdown, --z-modal, --z-toast) — never z-index: 9999.
Theming (dark mode) by redefining tokens — components never branch on theme themselves. Default to prefers-color-scheme; add [data-theme] only when a user-facing toggle is required, set pre-paint by a tiny inline script (CSP nonce applies — see frontend-security) to avoid a wrong-theme flash.

Variants & state

Variants via data attributes, not class string concatenation:

<button className={styles.button} data-variant={variant} data-size={size}>

.button[data-variant='danger'] { background: var(--color-danger); }

Boolean UI state the same way (data-open, aria-expanded) — style off ARIA attributes when one exists: .menu[aria-expanded='true'].
clsx has exactly one job here: merging a consumer-passed className prop with the base class. Enumerated variants and boolean state always go through data attributes, never conditional class lists; a component wanting 3+ conditional classes should be restructured into variants.

Layout & responsive

Mobile-first: base styles, then @media (min-width: …) upward. Breakpoints documented once in tokens.css comments (custom properties don't work in media queries — keep the canonical list there).
Prefer modern layout primitives: flex gap / grid over margin hacks; aspect-ratio; container queries for components that adapt to their container, media queries only for page-level layout.
Aspect-preserving media: give the box a defined aspect-ratio and use object-fit: contain/cover. Never size an image with max-width/max-height inside a flex item — the main-axis shrink sizes width independently of the height cap and stretches the image (a mixed-aspect-ratio thumbnail grid is where this bites).
Logical properties (margin-inline, padding-block, inset-inline-start) over physical ones — free RTL support (the foundation the i18n skill builds on).
No fixed heights on text containers; min-height if needed.

Globals — the only allowed global CSS

In Astro projects, the per-component styling primitive is the single-file scoped <style> block instead of *.module.css — see astro. The token/naming/variant rules here still apply.

Motion

Animate transform and opacity only (compositor-friendly); never animate width/height/top/left for transitions.
Every significant animation (anything beyond a subtle hover/focus transition) respects @media (prefers-reduced-motion: reduce) — same threshold as the a11y skill.
Durations/easings as tokens (--duration-fast, --ease-out).
These are the invariants only — escalation (keyframes / WAAPI / animation libraries), View Transitions, entrance/exit animations, and scroll effects live in the motion skill.

Enforcement

The token/var() and class-naming rules above are machine-enforced by Stylelint — see tooling for the exact rules and the shipped templates/stylelint.config.mjs.