원클릭으로 Manus에서 모든 스킬 실행

css-modules

스타3

포크0

업데이트2026년 7월 7일 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書いて」。

설치

Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.

Manus에서 실행

출처

Syo-M

Syo-M/fable-frontend-skills

GitHub 저장소 열기 Creator 저장소 보기

다운로드

Manus에서 실행

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.

이 저장소의 다른 Skills

같은 저장소

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.