frontend-designer

Build production-grade frontend interfaces with modern React, TailwindCSS v4, and shadcn/ui. Five modes from project scaffolding to codebase audit.

Input: $ARGUMENTS — mode keyword + target, natural language UI description, or file path.

| server component | React component rendered on the server; default in Next.js/Remix App Router | "SSR component" | | client component | React component with "use client" directive; runs in the browser | "CSR component" | | design token | CSS custom property holding a design decision (color, spacing, font) | "CSS variable" (too generic) |

最新の React、Tailwind CSS、shadcn/ui を使用して実稼働グレードのフロントエンド インターフェイスを構築します。 5 つのモード: プロジェクトのスキャフォールディング、コンポーネントの作成、テーマの構成とトークンの設計、スタイルのリファクタリング、コードベースの監査。 React 19 サーバー コンポーネント (フレームワーク依存)、TailwindCSS v4 CSS-first config、Radix プリミティブを使用した shadcn/ui、最新の CSS (コンテナ クエリ、:has()、ビュー トランジション、スクロール駆動アニメーション)、Monaspace タイポグラフィ、および Vite 6 のベスト プラクティスをエンコードします。フロントエンド デザイン スキルに取って代わります。フロントエンド プロジェクトを構築、スタイル設定、テーマ設定、または改善するときに使用します。バックエンド API、データベース設計、DevOps、テスト フレームワーク、状態管理ライブラリ、ルーティング、または完全な SSR フレームワーク セットアップには使用できません。 ソース: wyattowalsh/agents。