mcpField
C
css-architecture

css-architecture

github.com/aj-geddesデザイン・UI373963 回インストール34 週間前に更新
リポジトリ

css-architecture について

css-architectureは、大規模なスタイルシートやコンポーネントベースの開発、デザインシステム向けにCSSを整理するスキルです。代表的な設計手法やスタイルパターンを扱い、実装の参考ガイドも備えています。

主な機能

  1. 01BEMとSMACSSのパターン
  2. 02Styled ComponentsによるCSS-in-JS
  3. 03CSS変数とユーティリティファーストCSS
  4. 04規約と保守性に関する指針

活用シーン

  1. 01大規模プロジェクトのスタイル整理
  2. 02コンポーネントベースのスタイリング
  3. 03デザインシステムの構築
  4. 04チーム内のCSS規約の統一

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/aj-geddes/useful-ai-prompts --skill css-architecture

インストール後、Claude Code で/css-architectureを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/
bem-block-element-modifier-pattern.md
css-in-js-with-styled-components.md
css-variables-custom-properties.md
smacss-scalable-and-modular-architecture-for-css.md
utility-first-css-tailwind-pattern.md
templates/
component-template.tsx

詳細

CSS アーキテクチャ

目次

概要

BEM（Block Element Modifier）、SMACSS、CSS-in-JS パターンなどの方法論を、適切な構成と規約に沿って活用し、保守しやすい CSS システムを構築します。

使用する場面

  • 大規模なスタイルシート
  • コンポーネントベースのスタイリング
  • デザインシステムの開発
  • 複数チームでの共同作業
  • CSS の拡張性と再利用性

クイックスタート

最小限の動作例：

/* Block - standalone component */
.button {
  display: inline-block;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.3s ease;
}

/* Element - component part */
.button__icon {
  margin-right: 8px;
  vertical-align: middle;
}

/* Modifier - variant */
.button--primary {
  background-color: #007bff;
  color: white;
}

.button--primary:hover {
  background-color: #0056b3;
// ... (see reference guides for full implementation)

リファレンスガイド

詳細な実装は references/ ディレクトリにあります。

ガイド内容
BEM（Block Element Modifier）パターンBEM（Block Element Modifier）パターン
SMACSS（CSS のスケーラブルでモジュール化されたアーキテクチャ）SMACSS（CSS のスケーラブルでモジュール化されたアーキテクチャ）
Styled Components を使った CSS-in-JSStyled Components を使った CSS-in-JS
CSS 変数（カスタムプロパティ）CSS 変数（カスタムプロパティ）
ユーティリティファースト CSS（Tailwind パターン）ユーティリティファースト CSS（Tailwind パターン）

ベストプラクティス

✅ 推奨事項
  • 確立されたパターンと規約に従う
  • 読みやすく保守しやすいコードを書く
  • 適切なドキュメントを追加する
  • デプロイ前に十分にテストする
❌ 避けるべきこと
  • テストや検証を省略する
  • エラー処理を無視する
  • 設定値をハードコードする

コメント

Markdown 対応