Creates distinctive, production-grade frontend interfaces. Use when building web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
Creates distinctive, production-grade frontend interfaces with intentional aesthetics, avoiding generic AI patterns. Use when building web components, pages, or applications that require memorable, polished design.
/plugin marketplace add sumik5/sumik-claude-plugin/plugin install sumik@sumikThis skill inherits all available tools. When active, it can use any tool Claude has access to.
独創的で本番環境グレードのフロントエンドインターフェースを作成するスキル。汎用的な「AIスロップ」美学を避け、卓越した審美的ディテールと創造的な選択に細心の注意を払った、実際に動作するコードを実装します。
コーディング前に、コンテキストを理解し大胆な美的方向性にコミット：
以下から選択し、インスピレーションとして活用：
重要: 明確なコンセプト方向を選び、精度を持って実行する。大胆なマキシマリズムも洗練されたミニマリズムも有効 - 重要なのは強度ではなく意図性。
高インパクトな瞬間にフォーカス:
animation-delayを使ったスタガードリビールソリッドカラーをデフォルトにせず、雰囲気と深みを創出：
| 技法 | 説明 |
|---|---|
| グラデーションメッシュ | 複雑な色の混合 |
| ノイズテクスチャ | 粒状感の追加 |
| ジオメトリックパターン | 幾何学的背景 |
| レイヤード透過 | 重なりによる深み |
| ドラマティックシャドウ | 劇的な影効果 |
| デコラティブボーダー | 装飾的な境界線 |
| カスタムカーソル | 独自のマウスポインター |
| グレインオーバーレイ | フィルム調のノイズ |
| カテゴリ | 避けるべきもの |
|---|---|
| フォント | Inter、Roboto、Arial、Space Grotesk、システムフォント |
| 配色 | 白背景に紫グラデーション、ありがちなグラデーション |
| レイアウト | 予測可能なレイアウト、Cookie-cutterパターン |
| 全体 | コンテキスト固有の特徴を欠くデザイン |
重要: 生成ごとに異なるデザインを。ライト/ダークテーマ、異なるフォント、異なる美学を変化させる。共通の選択に収束してはいけない。
| ビジョン | 実装アプローチ |
|---|---|
| マキシマリスト | 豊富なアニメーション、複雑なエフェクト、多層的なコード |
| ミニマリスト/洗練 | 抑制、精度、スペーシング・タイポグラフィ・微妙なディテールへの注意 |
エレガンスはビジョンの優れた実行から生まれる。
□ 大胆な美的方向性を選択した
□ 汎用フォント（Inter, Roboto, Arial）を避けた
□ 特徴的なカラーパレットを定義した
□ 予想外のレイアウト要素を含めた
□ 意味のあるアニメーション/トランジションを追加した
□ 背景に深みと雰囲気を持たせた
□ CSS変数で一貫性を確保した
□ 本番環境グレードで機能する
□ 誰かが覚えている一つの要素がある
@keyframesでのスタガードアニメーション記憶せよ: Claudeは並外れた創造的作業が可能。既成概念にとらわれず、独自のビジョンに完全にコミットしたとき、真に何が創造できるかを示せ。