Skill Market

design system

アクセシビリティ、レスポンシブネス、テーマ設定、コンポーネント群、トークンを備えた本番環境対応デザインシステムの構築。Figma、Storybook、コンポーネントライブラリ統合。

GitHub
githubcommunity
0.0
0 installs262.1K GitHub starsby affaan-m

Skill Introduction

Overview
アクセシビリティ、レスポンシブネス、テーマ設定、コンポーネント群、トークンを備えた本番環境対応デザインシステムの構築。Figma、Storybook、コンポーネントライブラリ統合。

Core value

Turns reusable Other know-how into an installable skill, helping users complete github, community work faster.

Target users

  • Developers, testers, and maintainers who handle Other tasks in Focus Code.
  • Teams that already trust workflows or content from affaan-m.
  • Users who want standardized prompts, steps, or conventions instead of repeating setup work.

Best practices

  • Read the skill content first to confirm required inputs, expected outputs, and dependencies.
  • Try it on a small task before relying on it for critical work.
  • Add project-specific constraints such as coding style, target platform, test expectations, and delivery format.
  • For external sources, verify the source link, version, and recent maintenance activity.

Best use cases

  • Tasks related to github, community that need a reusable execution flow.
  • Converting a community repo, team convention, or personal workflow into day-to-day assistance.
  • Starting from a proven skill instead of writing prompts or procedures from scratch.

Limits and boundaries

  • Results depend on the quality of the original skill content and may need human correction.
  • It does not replace code review, tests, security review, or professional judgment.
  • External tools, APIs, account permissions, and local dependencies still need separate setup.

Differentiation

  • Structured around Other, making it easier to discover and reuse than loose prompt snippets.
  • Marked as GitHub, which helps users judge trust and maintenance expectations.
  • Keeps the original source link available for repository, documentation, or discussion follow-up.
  • Tagged with github, community, so it can be filtered by concrete task intent.

Install and use

Install
Copy Install Command
focus install design-system-114235
View source

Detail Preview

SKILL.md

Primary filemarkdown2 KB

name: design-system description: アクセシビリティ、レスポンシブネス、テーマ設定、コンポーネント群、トークンを備えた本番環境対応デザインシステムの構築。Figma、Storybook、コンポーネントライブラリ統合。 origin: ECC

デザイン システム

スケーラブルで保守可能なデザインシステムの構築。

使用時期

  • デザインシステムを初期化
  • コンポーネントライブラリを拡張
  • デザインと実装の間の同期を保つ
  • アクセシビリティ標準を強制
  • テーマング実装

コア要素

1. デザイントークン

色、タイポグラフィ、スペーシング、シャドウの中央コレクション。

2. コンポーネント

ボタン、入力、カード、など基本的なUIの再利用可能なビルディングブロック。

3. レイアウトパターン

ページレイアウト、フォーム、グリッド。

4. アイコン

SVGベースのアイコンライブラリ。

ツール

  • Figma 設計ツール
  • Storybook コンポーネント展示
  • Chromatic ビジュアルテスト
  • Design tokens JSON管理

チェックリスト

  • トークン定義（色、スペーシング、タイプ）
  • 基本コンポーネント実装
  • Storybook設定
  • アクセシビリティテスト
  • ドキュメント作成
  • チーム採用

詳細については、ドキュメントを参照してください。

Reviews

Overall rating

0.0
0.0

0 comments

No reviews yet