本文へ移動
cccskills
無料GitHub で公開

ui-design-system

Use when creating or maintaining UI design systems, design tokens, component documentation, responsive calculations, quality checks, or design-dev handoff materials.

インストール方法を見る

含まれるファイル(2)

  • SKILL.md1.3 KB
  • scripts/design_token_generator.py5.3 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

UI Design System Toolkit

Professional toolkit for creating and maintaining scalable design systems.

Core Capabilities

  • Design token generation (colors, typography, spacing)
  • Component system architecture
  • Responsive design calculations
  • Accessibility compliance
  • Developer handoff documentation

Key Scripts

design_token_generator.py

Generates complete design system tokens from brand colors.

Usage: python scripts/design_token_generator.py [brand_color] [style] [format]

  • Styles: modern, classic, playful
  • Formats: json, css, scss

Features:

  • Complete color palette generation
  • Modular typography scale
  • 8pt spacing grid system
  • Shadow and animation tokens
  • Responsive breakpoints
  • Multiple export formats

Verification

Before reporting completion, validate generated tokens or handoff artifacts against the requested brand color, output format, accessibility constraints, and the target implementation surface. For script usage, run the command with representative input and inspect the emitted JSON/CSS/SCSS for valid syntax and preserved brand values.

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

同じリポジトリのスキル

概要と使いどころ

Audit and organize AI coding-agent instructions, including AGENTS.md, CLAUDE.md, skills, and agent definitions. Use when the user asks to diagnose conflicting instructions, excessive approval pauses, broad skill triggers, duplicate guidance, or broken instruction references, or to clean up that instruction set. Ordinary code review, Markdown editing, or application debugging alone does not trigger this workflow. Inspection stays read-only; apply changes when authorized.

日本語の概要は準備中です。原文の説明を表示しています。

majiayu000/spellbook2872026年10月8日 更新

Generate or update repository-specific AGENTS.md instruction files from real repo evidence. Use when asked to create, design, scaffold, split, or improve root or scoped AGENTS.md files for Codex/Claude/agent workflows, especially when a repo needs directory-specific rules, validation commands, generated-file boundaries, or a short agent onboarding router.

日本語の概要は準備中です。原文の説明を表示しています。

majiayu000/spellbook2872026年10月8日 更新

REST/GraphQL/gRPC API design best practices. Use when designing APIs, defining contracts, handling versioning. Covers OpenAPI 3.2, GraphQL Federation, gRPC streaming.

日本語の概要は準備中です。原文の説明を表示しています。

majiayu000/spellbook2872026年10月8日 更新

Mobile app UI design expert for iOS and Android. Use when designing app interfaces, creating design systems, ensuring accessibility, or following platform guidelines. Covers Material Design 3, Human Interface Guidelines, color theory, typography, and 2025 trends.

日本語の概要は準備中です。原文の説明を表示しています。

majiayu000/spellbook2872026年10月8日 更新

End-to-end app feature inventory and user-story testing workflow with a canonical tracker. Use when the user asks to audit every feature, derive expected behavior from code, test user journeys, or explicitly fix and retest documented UX or logistical defects.

日本語の概要は準備中です。原文の説明を表示しています。

majiayu000/spellbook2872026年10月8日 更新

Design architecture foundations before implementation. Use when asked to design or refactor architecture, choose Rust/Go crate, package, module, runtime, workflow, or service boundaries, compare mature project architecture, prevent stacked one-off PRs, audit migration debt in existing repos, or produce a spec before coding.

日本語の概要は準備中です。原文の説明を表示しています。

majiayu000/spellbook2872026年10月8日 更新

majiayu000 のスキルをすべて見る

このスキルの問題を報告する