Reactで複雑なHTMLアーティファクトを作成するには、かなりのセットアップ時間と設定が必要です。このスキルは、Tailwind CSSとshadcn/uiを使ったReactプロジェクトを初期化する自動スクリプトを提供し、すべてを1つのポータブルなHTMLファイルにバンドルして、Claudeの会話で共有できる状態にします。

一貫性のある専門的なビジュアルスタイリングをプレゼンテーションに適用するには、相当の時間とデザインの専門知識が必要です。このスキルは、10の厳選されたカラーとフォントのテーマをあらゆるアーティファクトに即座に適用でき、オンデマンドでカスタムテーマを生成する機能も提供します。

ユーザーはSlackのリアクションやメッセージ用に適切にサイズ調整されたGIFを必要としています。このスキルは、アニメーションUtilities、イージング関数、Slack要件を満たすための検証を備えた、最適化されたGIFを構築するためのツールを提供します。

ユーザーは、汎用的なAIが生成したデザインとは異なるフロントエンドコードを生成することに困難を感じています。このスキルは、記憶に残るプロダクション品質のインターフェース、大胆な aesthetics、 thoughtful なタイポグラフィ、洗練された視覚的ディテールで作られたガイドを提供します。

独自の視覚芸術作品の制作には、深いデザイン知識と芸術的スキルが必要です。このスキルは、形、色、構成を通じて表現される確立されたデザイン哲学を使用して、博物館品質のポスター、デザイン、視覚芸術を生成します。出力はPNGまたはPDF形式です。

一貫したブランドスタイルを適用するには、正確な色とフォントを知る必要があります。このスキルはAnthropicの公式ブランドガイドラインを提供し、任意の成果物を素早くスタイル適用できます。

ユーザーは独自性のあるジェネラティブアートを求めているが、アルゴリズミックなデザイン知識が不足している。このスキルは、シード付き乱数、フローフィールド、パーティクルシステム、インタラクティブなパラメータ探索を用いて、p5.jsでオリジナルのアルゴリズミックアートを作成し、カスタマイズ可能な視覚出力を提供する。

レスポンシブでアクセシブルなユーザーインターフェースを構築するには、ユーティリティクラスとデザインパターンの深い知識が必要です。このスキルは、Tailwind CSSの規則を使用したモバイルファーストレイアウト、ダークモード対応、およびコンポーネントスタイリングの専門家によるガイダンスを提供します。

チームはドキュメント、ウェブサイト、マーケティング資料で一貫したブランディングを維持することに困難を感じています。このスキルは、ロゴの使用、カラーパレット、タイポグラフィ、ブランドボイスに関する包括的なテンプレートと仕様を提供し、すべてのチャネルで専門的で一貫したブランドアイデンティティを確保します。

汎用的なAI生成デザインは似通いがちです。このスキルは、大胆な美的選択と卓越したビジュアルの磨き込みを備えた、記憶に残るプロダクション品質のフロントエンド・インターフェースを作るための指針です。

アクセシブルなReactコンポーネントの構築には、時間とキーボード操作およびARIA属性への丁寧な配慮が必要です。このスキルは、Next.jsアプリケーション向けに、フォームバリデーション、ダークモード、レスポンシブレイアウトを備えたshadcn/uiコンポーネントのコピペ可能なパターンを提供します。

視覚的に一貫性のあるアーティファクトをデザインするには時間がかかり、専門的なデザインの知識が必要です。このスキルは、プレゼンテーション、ドキュメント、レポートに即座に適用できる、10の専門的にキュレーションされたテーマ（カラーパレットとフォントの組み合わせ）を提供します。

Slack用のアニメーションGIFを作成するには、厳格なサイズ制限を満たし、適切なアニメーション技術を使用する必要があります。このツールキットは、Slackで完璧に動作するメッセージGIFやカスタム絵文字を作成するためのバリデーター、アニメーションプリミティブ、最適化ツールを提供します。

ユーザーは抽象的なデザインの概念を魅力的な視覚作品に変換することに困難を感じています。このスキルは、哲学的フレームワークを使用して美術館品質の視覚デザインを生み出し、PNGおよびPDFフォーマットでオリジナルコンポジションを作成し、プロフェッショナルなタイポグラフィを適用します。

Anthropicのビジュアルアイデンティティに合致したドキュメントや成果物を作成します。公式ブランドカラーとタイポグラフィをすべての資料に一貫して適用します。

ジェネラティブアートの制作には、技術的なスキルと芸術的なビジョンの両方が必要です。このスキルは、AIシステムがシード付きランダム性、インタラクティブなパラメータ、ギャラリー品質の出力を備えたオリジナルのアルゴリズミックアートを作成できるよう導きます。

標準化されたデザイン基盤がないと、アプリケーション全体で一貫性のあるアクセシブルなユーザーインターフェースを作成することは困難です。このスキルは、デザイントークン構造、コンポーネントパターン、アクセシビリティガイドラインを提供し、視覚的な一貫性とWCAG準拠を保証するスケーラブルなデザインシステムを構築します。

Vercelの公式アクセシビリティおよびデザインガイドラインに基づいてウェブUIを確認します。セマンティックHTML、フォーカス状態、フォーム、アニメーション、タイポグラフィ、画像などについて即座にフィードバックを受け取れます。

AIが生成したインターフェースの多くは汎用的で、独自の個性缺乏がちです。このスキルは、Coding Agent for Claude Codeが、美しく出色的で、他と区別できる視覚的アイデンティティを持ち、一般的なAIパターンを避けた思慮深いデザイン判断を備えた、プロダクションレベルのウェブインターフェースを作成するためのガイドです。

文書全体で一貫したブランドアイデンティティを維持することは時間がかかり、エラーが発生しやすい作業です。このスキルは、カラーパレット、タイポグラフィ、書式ルール、検証ツールを含む企業ブランド基準への即座のアクセスを提供し、すべての文書がプロフェッショナルなブランドガイドラインを満たすことを保証します。