Community画像github.com

composiohq/ブランドガイドライン

Anthropicの公式ブランドカラーとタイポグラフィをあらゆる種類のアーティファクトに適用し、Anthropicのルック&フィールを実現します。ブランドカラーやスタイルガイドライン、ビジュアルフォーマット、企業デザイン基準が適用される場合に使用します。

ブランドガイドライン とは?

このスキルは、Anthropicの公式ブランドガイドラインに従って、アーティファクト(ドキュメント、UIコンポーネント、プレゼンテーションなど)に一貫したビジュアルデザインを適用するために設計されています。主にClaude CodeやCodexなどのAIエージェントプラットフォームで動作し、開発者がブランドの一貫性を維持しながら迅速にデザイン作業を進められるようにします。具体的には、Anthropicのプライマリカラー(#DSA73Aや#1A1A1Aなど)、セカンダリカラー、アクセントカラー、および公式フォントファミリー(例: Inter, IBM Plex Mono)を適用します。このスキールは、コーポレートアイデンティティが重要なプロジェクトや、クライアント向け資料の作成時に特に有用で、手動でスタイルを調整する手間を省き、プラットフォーム間での視覚的な整合性を確保します。SKILL.mdに基づき、コード生成時にはカラー変数やタイポグラフィ設定を自動的に組み込みます。

対応✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/composiohq/awesome-claude-skills/tree/main/skills/brand-guidelines

Installed? Explore more 画像 skills: steipete/songsee, affaan-m/frontend-design, mattpocock/improve-codebase-architecture · View all 6 →

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

ブランドガイドライン は何をしますか?

Anthropicの公式ブランドカラーとタイポグラフィをあらゆる種類のアーティファクトに適用し、Anthropicのルック&フィールを実現します。ブランドカラーやスタイルガイドライン、ビジュアルフォーマット、企業デザイン基準が適用される場合に使用します。

概要

このスキルは、Anthropicのブランドガイドラインに従って視覚的に一貫性のある出力を生成するために設計されています。これには、プライマリカラー、セカンダリカラー、アクセントカラー、フォントファミリー、およびその他のスタイル属性が含まれます。

使用方法

このスキルは、ブランド要素が適用されるべきアーティファクトを作成または変更するときに自動的に呼び出されます。手動で有効にする必要はありません。

ブランドカラー

  • プライマリカラー: #DSA73A(金色) - ロゴと主要なブランド要素に使用
  • セカンダリカラー: #1A1A1A(濃い黒) - テキストと背景に使用
  • アクセントカラー: #F5F5F5(薄いグレー) - セクションの区切りや二次的な要素に使用
  • 背景カラー: #FFFFFF(白) - 主要な背景に使用

タイポグラフィ

  • 見出しフォント: Inter(太字) - 見出しとタイトルに使用
  • 本文フォント: Inter(通常) - 本文テキストに使用
  • コードフォント: IBM Plex Mono - コードブロックとインラインコードに使用

フォーマットルール

  • すべてのアーティファクトは、指定されたブランドカラーとフォントを一貫して使用する必要があります。
  • 色のコントラスト比は、WCAG AA標準(少なくとも4.5:1)に準拠する必要があります。
  • アーティファクトの全体的なレイアウトは、クリーンでプロフェッショナルな外観を優先する必要があります。

例

<!-- Anthropicブランドガイドラインに従ったボタンの例 -->
<button style="background-color: #DSA73A; color: #1A1A1A; font-family: 'Inter', sans-serif;">
  クリックしてください
</button>

追加情報

完全なブランドガイドラインについては、Anthropicの公式ブランドリソースを参照するか、デザインチームにお問い合わせください。

Individual skills in this repo

This repo contains 20 individual skills — each has its own dedicated page.

composiohq/artifacts-builder

Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.

composiohq/canvas-design

Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.

composiohq/changelog-generator

Automatically creates user-facing changelogs from git commits by analyzing commit history, categorizing changes, and transforming technical commits into clear, customer-friendly release notes. Turns hours of manual changelog writing into minutes of automated generation.

composiohq/competitive-ads-extractor

Extracts and analyzes competitors' ads from ad libraries (Facebook, LinkedIn, etc.) to understand what messaging, problems, and creative approaches are working. Helps inspire and improve your own ad campaigns.

composiohq/connect

Connect Claude to any app. Send emails, create issues, post messages, update databases - take real actions across Gmail, Slack, GitHub, Notion, and 1000+ services.

composiohq/connect-apps

Connect Claude to external apps like Gmail, Slack, GitHub. Use this skill when the user wants to send emails, create issues, post messages, or take actions in external services.

composiohq/content-research-writer

Assists in writing high-quality content by conducting research, adding citations, improving hooks, iterating on outlines, and providing real-time feedback on each section. Transforms your writing process from solo effort to collaborative partnership.

composiohq/developer-growth-analysis

Analyzes your recent Claude Code chat history to identify coding patterns, development gaps, and areas for improvement, curates relevant learning resources from HackerNews, and automatically sends a personalized growth report to your Slack DMs.

composiohq/domain-name-brainstormer

Generates creative domain name ideas for your project and checks availability across multiple TLDs (.com, .io, .dev, .ai, etc.). Saves hours of brainstorming and manual checking.

composiohq/file-organizer

Intelligently organizes your files and folders across your computer by understanding context, finding duplicates, suggesting better structures, and automating cleanup tasks. Reduces cognitive load and keeps your digital workspace tidy without manual effort.

composiohq/image-enhancer

Improves the quality of images, especially screenshots, by enhancing resolution, sharpness, and clarity. Perfect for preparing images for presentations, documentation, or social media posts.

composiohq/internal-comms

A set of resources to help me write all kinds of internal communications, using the formats that my company likes to use. Claude should use this skill whenever asked to write some sort of internal communications (status reports, leadership updates, 3P updates, company newsletters, FAQs, incident reports, project updates, etc.).

composiohq/invoice-organizer

Automatically organizes invoices and receipts for tax preparation by reading messy files, extracting key information, renaming them consistently, and sorting them into logical folders. Turns hours of manual bookkeeping into minutes of automated organization.

composiohq/langsmith-fetch

Debug LangChain and LangGraph agents by fetching execution traces from LangSmith Studio. Use when debugging agent behavior, investigating errors, analyzing tool calls, checking memory operations, or examining agent performance. Automatically fetches recent traces and analyzes execution patterns. Requires langsmith-fetch CLI installed.

composiohq/lead-research-assistant

Identifies high-quality leads for your product or service by analyzing your business, searching for target companies, and providing actionable contact strategies. Perfect for sales, business development, and marketing professionals.

composiohq/mcp-builder

Guide for creating high-quality MCP (Model Context Protocol) servers that enable LLMs to interact with external services through well-designed tools. Use when building MCP servers to integrate external APIs or services, whether in Python (FastMCP) or Node/TypeScript (MCP SDK).

composiohq/meeting-insights-analyzer

Analyzes meeting transcripts and recordings to uncover behavioral patterns, communication insights, and actionable feedback. Identifies when you avoid conflict, use filler words, dominate conversations, or miss opportunities to listen. Perfect for professionals seeking to improve their communication and leadership skills.

composiohq/raffle-winner-picker

Picks random winners from lists, spreadsheets, or Google Sheets for giveaways, raffles, and contests. Ensures fair, unbiased selection with transparency.

composiohq/skill-creator

Guide for creating effective skills. This skill should be used when users want to create a new skill (or update an existing skill) that extends Claude's capabilities with specialized knowledge, workflows, or tool integrations.

composiohq/skill-share

A skill that creates new Claude skills and automatically shares them on Slack using Rube for seamless team collaboration and skill discovery.

関連スキル