Webauthn Front Design

webauthn-front-design

katasu.me インスパイアのフロントエンドデザインシステムをプロジェクトに適用する Claude Code プラグイン。

概要

WebAuthn TODO アプリで使用しているデザインシステムをそのまま別プロジェクトに取り込めるスキルです。CSS 変数・コンポーネントクラス・HTML パターン・Google フォント設定を一式提供します。

デザインの特徴

項目	内容
カラーパレット	温かみのある低彩度ブラウン系（katasu.me インスパイア）
フォント	Reddit Sans + IBM Plex Sans JP
アニメーション	cubic-bezier(0.16, 1, 0.3, 1) の弾むような ease
レイアウト	768px 中央寄せ シングルカラム
角丸	12px / 8px の2段階

主要な CSS 変数

--color-bg: #fefbfb;      /* ページ背景 */
--color-text: #483030;    /* 本文・見出し */
--color-muted: #a39696;   /* サブテキスト */
--color-border: #dfd7d7;  /* ボーダー */
--color-surface: #f2f0f0; /* 入力フィールド背景 */
--color-accent: #73862d;  /* アクセント（オリーブグリーン） */
--color-danger: #ff340b;  /* 削除・エラー */
--radius: 12px;
--radius-sm: 8px;

コンポーネント

• .btn-primary / .btn-ghost — プライマリ・ゴーストボタン
• .btn-sm / .btn-lg / .btn-full — サイズバリアント
• .card — カードコンテナ
• .tab-btn — タブボタン
• .form-group — フォームグループ（label + input）
• .interactive-scale / .interactive-scale-sm — ホバースケールエフェクト

使い方

WebAuthnのデザインを適用して
katasu.meスタイルにして
CSSシステムを入れて

スキルを呼び出すと、CSS 変数・コンポーネント定義・HTML パターンをプロジェクトのスタイルファイルに追加する手順を案内します。