Use this skill when styling components, adding shadcn/ui components, or configuring Tailwind v4 design tokens. Trigger words: スタイリング, Tailwind, shadcn, コンポーネント追加, デザイントークン, テーマ, CSS, クラス, ボタン, カード, ダークモード.
The English summary is being prepared. Showing the original description.
See how to installReview the instructions the agent will receive before you install.
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 で消してアクセシビリティを損なう。No reviews yet. Tell others what you thought.
No login needed. Share how it worked for you, ask a question, or note where it did not run.
No comments yet. Be the first to write one.
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.
The English summary is being prepared. Showing the original description.
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.
The English summary is being prepared. Showing the original description.
Use this skill when implementing sign-in, sessions, authorization checks, or protecting routes and Server Actions. Trigger words: 認証, ログイン, サインイン, セッション, 認可, 権限チェック, Better Auth, Auth.js, 保護, ミドルウェア, getSession.
The English summary is being prepared. Showing the original description.
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.
The English summary is being prepared. Showing the original description.
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.
The English summary is being prepared. Showing the original description.
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.
The English summary is being prepared. Showing the original description.