Use this skill when styling components, adding shadcn/ui components, or configuring Tailwind v4 design tokens. Trigger words: スタイリング, Tailwind, shadcn, コンポーネント追加, デザイントークン, テーマ, CSS, クラス, ボタン, カード, ダークモード.
インストールする前に、エージェントに与えられる指示の中身を確認できます。
npx shadcn@latest add <name>)。自作は最後の手段。@theme でトークンを定義(JS config 不要)。.dark で切り替える。cn()(clsx + tailwind-merge)で衝突解決。next/font で読み込む。/* app/globals.css — Tailwind v4 のトークン定義 */
@import 'tailwindcss';
@theme {
--color-brand: oklch(0.62 0.17 250);
--radius: 0.625rem;
}
import { cn } from '@/lib/utils';
export function Badge({ active, className }: { active?: boolean; className?: string }) {
return (
<span className={cn('rounded-md px-2 py-0.5 text-sm', active && 'bg-brand text-white', className)} />
);
}
#8b5cf6 のように直書きしてテーマ切替を壊す。outline-none で消してアクセシビリティを損なう。まだレビューはありません。使ってみた感想をお寄せください。
概要と使いどころ
Use this skill when creating or reviewing Next.js Route Handlers (app/api), adding rate limiting, input validation, or auth to API endpoints. Trigger words: API ルート, Route Handler, app/api, エンドポイント, レート制限, 入力検証, CORS, ヘッダー, 認証付き API, hardening.
Use this skill when implementing full-text search, autocomplete, or vector/semantic search and RAG with MongoDB Atlas. Trigger words: 全文検索, あいまい検索, オートコンプリート, ベクトル検索, セマンティック検索, 類似検索, Atlas Search, $search, $vectorSearch, RAG, embedding.
Use this skill when implementing sign-in, sessions, authorization checks, or protecting routes and Server Actions. Trigger words: 認証, ログイン, サインイン, セッション, 認可, 権限チェック, Better Auth, Auth.js, 保護, ミドルウェア, getSession.
Use this skill when starting a new session, opening this project for the first time, or when you need to recall the project's tech stack, hard rules, and which other skills exist. Trigger words: セッション開始, このプロジェクト, 全体像, どのスキル, 何から, getting started, overview.
Use this skill when setting up or modifying CI pipelines, GitHub Actions workflows, or automated checks (lint, typecheck, test, build) for this project. Trigger words: CI, GitHub Actions, ワークフロー, パイプライン, 自動テスト, lint チェック, typecheck, ビルド検証, .github/workflows.
Use this skill when writing end-to-end tests, browser automation, or verifying user flows in a real browser. Trigger words: E2E, Playwright, ブラウザテスト, ユーザーフロー, 結合テスト, シナリオテスト, ログインテスト, getByRole, expect.