A set of UI rules for React projects using Tailwind CSS, covering typography, layout, accessibility, interaction feedback, and animation.

Use it while building or reviewing Tailwind and React components, especially their keyboard behavior, responsive layout, loading states, and motion.

It gives interface work consistent boundaries and helps avoid common usability problems, such as inaccessible controls, unsafe destructive actions, and distracting animations.

How yoshimi-I/ai-engineer-teams configures Kiro

Reuse

Borrowing it

Nothing to install: this file belongs to yoshimi-I/ai-engineer-teams. Take a copy, put it at the same path in your own repository, and replace the rules that are about this project with yours.

Copy the file

curl -O https://raw.githubusercontent.com/yoshimi-I/ai-engineer-teams/main/.kiro/skills/baseline-ui/SKILL.md

Clone the repo

git clone --depth 1 https://github.com/yoshimi-I/ai-engineer-teams

Made for: Kiro.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

README.md

[![agentmods](https://agentmods.dev/badge/skills/yoshimi-i/ai-engineer-teams/baseline-ui/github.svg)](https://agentmods.dev/skills/yoshimi-i/ai-engineer-teams/baseline-ui)

Your own site

<a href="https://agentmods.dev/skills/yoshimi-i/ai-engineer-teams/baseline-ui"><img src="https://agentmods.dev/badge/skills/yoshimi-i/ai-engineer-teams/baseline-ui/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

Your own site · 80×15

<a href="https://agentmods.dev/skills/yoshimi-i/ai-engineer-teams/baseline-ui"><img src="https://agentmods.dev/badge/skills/yoshimi-i/ai-engineer-teams/baseline-ui.svg" alt="Reviewed on agentmods" width="80" height="20"></a>

Per session 117 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.

When invoked 1,232 The whole file, excluding the scripts and references it only reads on demand.

Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.

Origin original No closer match found in the catalogue.

Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

Model	Per session	Once invoked
Fable 5.1	$0.00117	$0.01232
Opus 5	$0.00059	$0.00616
Sonnet 5	$0.00023	$0.00246
Haiku 4.5	$0.00012	$0.00123

Measured 10d ago against content hash 77e1517779d8, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-10, from the pricing page.

Security

Grade A, and why

baseline-ui scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 10d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

.kiro/skills/baseline-ui/SKILL.md · 87 lines

What it actually says

ベースラインUI

AI生成インターフェースの品質低下を防ぐための制約。

使い方

/baseline-ui この会話のUI作業に以下の制約を適用する。
/baseline-ui <file> ファイルを以下の制約に照らしてレビューし、出力:
- 違反箇所（該当行/スニペットを引用）
- 重要な理由（1文）
- 具体的な修正案（コードレベル）

スタック

Tailwind CSSのデフォルト値を使うこと（カスタム値が既存 or 明示的に要求された場合を除く）
JSアニメーションが必要な場合は motion/react（旧 framer-motion）を使用
Tailwind CSSのエントランス・マイクロアニメーションには tw-animate-css を推奨
クラスロジックには cn ユーティリティ（clsx + tailwind-merge）を使用

コンポーネント

キーボード・フォーカス動作があるものにはアクセシブルなプリミティブを使用（Base UI, React Aria, Radix）
プロジェクト既存のコンポーネントプリミティブを優先
同一インタラクション面でプリミティブシステムを混在させない
新規プリミティブにはスタック互換なら Base UI を推奨
アイコンのみのボタンには aria-label を付与
明示的に要求されない限り、キーボード・フォーカス動作を手動で再実装しない

インタラクション

破壊的・不可逆なアクションには AlertDialog を使用
ローディング状態にはスケルトンを推奨
h-screen は使わない、h-dvh を使う
固定要素には safe-area-inset を尊重
エラーはアクションが発生した場所の近くに表示
input や textarea でペーストをブロックしない

アニメーション

明示的に要求されない限りアニメーションを追加しない
コンポジタプロパティのみアニメーション（transform, opacity）
レイアウトプロパティのアニメーション禁止（width, height, top, left, margin, padding）
ペイントプロパティ（background, color）のアニメーションは小さなローカルUI（テキスト、アイコン）のみ許可
エントランスには ease-out を推奨
インタラクションフィードバックは 200ms を超えない
ループアニメーションは画面外で一時停止
prefers-reduced-motion を尊重
明示的に要求されない限りカスタムイージングカーブを導入しない
大きな画像やフルスクリーン面のアニメーションを避ける

タイポグラフィ

見出しには text-balance、本文/段落には text-pretty を使用
データには tabular-nums を使用
密なUIには truncate や line-clamp を推奨
明示的に要求されない限り letter-spacing（tracking-*）を変更しない

レイアウト

固定の z-index スケールを使用（任意の z-* 禁止）
正方形要素には w-* + h-* の代わりに size-* を推奨

パフォーマンス

大きな blur() や backdrop-filter 面のアニメーション禁止
アクティブなアニメーション外で will-change を適用しない
レンダーロジックで表現できるものに useEffect を使わない

デザイン

明示的に要求されない限りグラデーション禁止
紫やマルチカラーグラデーション禁止
グロー効果を主要なアフォーダンスとして使わない
明示的に要求されない限りTailwind CSSデフォルトのシャドウスケールを使用
空の状態には1つの明確な次のアクションを提示
アクセントカラーの使用は1ビューにつき1色まで
新しい色を導入する前に既存テーマやTailwind CSSカラートークンを使用

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

10d ago First seen · 87 lines · 117 tokens per session scan A 77e1517779d8

Subscribe to this mod's changes

baseline-ui is a skill published in the GitHub repository yoshimi-I/ai-engineer-teams (2 stars, last pushed 2mo ago), licensed MIT. It adds 117 tokens to every session and 1,232 once invoked, about $0.0006 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.

CSS and styling Claude Code Design and UX Frontend agentic-workflow ai-agents claude kiro kiro-cli

mcp-host-styling-integration

Integrates MCP App UI with host theming system. Applies host CSS variables, handles onhostcontextchanged, safe area insets, display mode detection, and fullscreen configuration.

a5c-ai/babysitter · 44 tokens

moai-design-tools

Design tool integration specialist covering Figma MCP, Pencil renderer, and Pencil-to-code export. Use when fetching design context from Figma, rendering Pencil designs, or exporting to React/Tailwind code.

modu-ai/moai-adk · 45 tokens

ui-first-builder

Creates production-ready UI immediately from any description. Generates complete pages, components, and realistic mock data in FIRST response. Uses Next.js 16 + Tailwind + shadcn/ui. Never asks questions - infers everything from context. Triggers: UI creation, page building, component generation, build interface…

wasintoh/toh-framework · 75 tokens

component-design

Apply a coherent visual system, responsive behavior, interaction states, and accessibility to Kun components.

KunAgent/Kun · 21 tokens

design-review

Designer's eye QA: finds visual inconsistency, spacing issues, hierarchy problems, AI slop patterns, and slow interactions — then fixes them. Iteratively fixes issues in source code, committing each fix atomically and re-verifying with before/after screenshots. For plan-mode design review (before implementation), use…

timurgaleev/vibestack · 70 tokens

coss-ui

Set up or extend a Next.js web app with Coss/UI — the official Cal.com design system, built on Base UI + Tailwind CSS v4 and installed through the shadcn CLI via the namespaced @coss/ registry. Two modes: Init (shadcn init @coss/style on a new project) and Add (pull @coss/ui primitives, single @coss/ components, or…

lukedj78/dev-flow · 244 tokens

ai-engineer-teams: Skill for Kiro