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

brand

Brand voice, visual identity, messaging frameworks, asset management, brand consistency. Activate for branded content, tone of voice, marketing assets, brand compliance, style guides.

nextlevelbuilder/ui-ux-pro-max-skill
インストール方法を見る

含まれるファイル（18）

  • SKILL.md3.8 KB
  • references/approval-checklist.md4.1 KB
  • references/asset-organization.md5.0 KB
  • references/brand-guideline-template.md3.5 KB
  • references/color-palette-management.md4.2 KB
  • references/consistency-checklist.md1.9 KB
  • references/logo-usage-rules.md5.3 KB
  • references/messaging-framework.md1.7 KB
  • references/typography-specifications.md4.9 KB
  • references/update.md3.8 KB
  • references/visual-identity.md1.8 KB
  • references/voice-framework.md2.0 KB
  • scripts/extract-colors.cjs9.0 KB
  • scripts/inject-brand-context.cjs9.5 KB
  • scripts/sync-brand-to-tokens.cjs14.9 KB
  • scripts/tests/test_sync_brand_to_tokens.py14.0 KB
  • scripts/validate-asset.cjs9.9 KB
  • templates/brand-guidelines-starter.md6.5 KB

SKILL.md（原文）

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

Brand

Brand identity, voice, messaging, asset management, and consistency frameworks.

When to Use

  • Brand voice definition and content tone guidance
  • Visual identity standards and style guide development
  • Messaging framework creation
  • Brand consistency review and audit
  • Asset organization, naming, and approval
  • Color palette management and typography specs

Script Paths

Script paths in this skill and its references/ are relative to the directory that contains this SKILL.md, not to the project: scripts/<file> is this skill's own scripts/ folder, and ../<skill>/scripts/<file> is a sibling sub-skill installed alongside it. Build the full path from that directory (Claude Code reports it as the skill's base directory when the skill loads) and keep the working directory at the project root — the scripts read and write project files such as docs/brand-guidelines.md, assets/design-tokens.json or src/ relative to it.

Quick Start

Inject brand context into prompts:

node scripts/inject-brand-context.cjs
node scripts/inject-brand-context.cjs --json

Validate an asset:

node scripts/validate-asset.cjs <asset-path>

Extract/compare colors:

node scripts/extract-colors.cjs --palette
node scripts/extract-colors.cjs <image-path>

Brand Sync Workflow

# 1. Edit docs/brand-guidelines.md (or use /brand update)
# 2. Sync to design tokens
node scripts/sync-brand-to-tokens.cjs
# 3. Verify
node scripts/inject-brand-context.cjs --json | head -20

The sync stops when it detects existing token files, :root custom properties or Tailwind v4 @theme variables in common CSS entry points and their local CSS imports, or Tailwind theme colors and presets. Review the reported source before proceeding. If the detected files are the managed assets/design-tokens.* outputs from an earlier sync and replacing them is intentional, re-run with --force.

Files synced:

  • docs/brand-guidelines.md → Source of truth
  • assets/design-tokens.json → Token definitions
  • assets/design-tokens.css → CSS variables

Subcommands

SubcommandDescriptionReference
updateUpdate brand identity and sync to all design systemsreferences/update.md

References

TopicFile
Voice Frameworkreferences/voice-framework.md
Visual Identityreferences/visual-identity.md
Messagingreferences/messaging-framework.md
Consistencyreferences/consistency-checklist.md
Guidelines Templatereferences/brand-guideline-template.md
Asset Organizationreferences/asset-organization.md
Color Managementreferences/color-palette-management.md
Typographyreferences/typography-specifications.md
Logo Usagereferences/logo-usage-rules.md
Approval Checklistreferences/approval-checklist.md

Scripts

ScriptPurpose
scripts/inject-brand-context.cjsExtract brand context for prompt injection
scripts/sync-brand-to-tokens.cjsSync brand-guidelines.md → design-tokens.json/css
scripts/validate-asset.cjsValidate asset naming, size, format
scripts/extract-colors.cjsExtract and compare colors against palette

Templates

TemplatePurpose
templates/brand-guidelines-starter.mdComplete starter template for new brands

Routing

  1. Parse subcommand from $ARGUMENTS (first word)
  2. Load corresponding references/{subcommand}.md
  3. Execute with remaining arguments

レビュー

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

ログインしてレビューを書く

同じリポジトリのスキル

概要と使いどころ

banner-design

無料

Design banners for social media, ads, website heroes, creative assets, and print. Multiple art direction options with optional generated or supplied visuals. Actions: design, create, generate banner. Platforms: Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Google Display, website hero, print. Styles: minimalist, gradient, bold typography, photo-based, illustrated, geometric, retro, glassmorphism, 3D, neon, duotone, editorial, collage.

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

nextlevelbuilder/ui-ux-pro-max-skill13.5万2026年10月11日 更新

design

無料

Comprehensive design skill: brand identity, design tokens, UI styling, logo generation (55 styles, Gemini, Atlas Cloud, or MuAPI AI), corporate identity program (50 deliverables, CIP mockups), HTML presentations (Chart.js), banner design (22 styles, social/ads/web/print), icon design (15 styles, SVG, Gemini 3.1 Pro), social photos (HTML→screenshot, multi-platform). Actions: design logo, create CIP, generate mockups, build slides, design banner, generate icon, create social photos, social media images, brand identity, design system. Platforms: Facebook, Twitter, LinkedIn, YouTube, Instagram, Pinterest, TikTok, Threads, Google Ads.

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

nextlevelbuilder/ui-ux-pro-max-skill13.5万2026年10月11日 更新

design-system

無料

Token architecture, component specifications, and slide generation. Three-layer tokens (primitive→semantic→component), CSS variables, spacing/typography scales, component specs, strategic slide creation. Use for design tokens, systematic design, brand-compliant presentations.

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

nextlevelbuilder/ui-ux-pro-max-skill13.5万2026年10月11日 更新

slides

無料

Create strategic HTML presentations with Chart.js, design tokens, responsive layouts, copywriting formulas, and contextual slide strategies.

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

nextlevelbuilder/ui-ux-pro-max-skill13.5万2026年10月11日 更新

ui-styling

無料

Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and posters, or establishing consistent styling patterns across applications.

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

nextlevelbuilder/ui-ux-pro-max-skill13.5万2026年10月11日 更新

ui-ux-pro-max

無料

UI/UX design intelligence for web, mobile, and desktop. This skill should be used when designing, building, reviewing, or fixing interfaces, including pages, components, design systems, accessibility, interaction, responsive layout, typography, color, charts, and stack-specific UI implementation. Searchable local data: 79 searchable styles (50 active), 192 product palettes and reasoning profiles, 74 font pairings, 119 UX guidelines, 105 icons, 17 GSAP presets, 25 chart types, and 22 stacks.

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

nextlevelbuilder/ui-ux-pro-max-skill13.5万2026年10月11日 更新

nextlevelbuilder のスキルをすべて見る

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