Tailwind と shadcn でアクセシブルな UI を構築
チームには、コンポーネント、スタイリング、アクセシビリティ、レスポンシブ動作を網羅する一貫したインターフェース指針が必要です。このスキルは、Claude、Codex、Claude Code のワークフロー向けに shadcn/ui、Tailwind CSS、ビジュアルデザインのリファレンスを提供します。
インストール前に停止して確認を求めてください。
計画を確認し、ファイルを変更する前にユーザーの明示的な同意を得てください。
このリクエストをエージェントにコピーしてください。正規の Skill ページとマニフェストが含まれています。
Review the Skillstore skill "ckm-ui-styling" from https://skillstore.io/skills/nextlevelbuilder-ckm-ui-styling.md and its manifest at https://skillstore.io/api/skills/nextlevelbuilder-ckm-ui-styling/manifest. Verify the artifact. Stop and obtain explicit user consent before installing or changing files.エージェントは引き続き計画を提示し、セキュリティポリシーで必要な確認を求める必要があります。
AI エージェント、クローラー、スクリプトがページ全体ではなく整理されたコンテキストを必要とする場合は、これらのリンクを使ってください。
「ckm-ui-styling」を使用しています。 設定ページには、レスポンシブなカード、ダークモード、明確なフォーム操作が必要です。
期待される結果:
「ckm-ui-styling」を使用しています。 既存のダイアログがキーボードとスクリーンリーダーのレビューに合格しません。
期待される結果:
「ckm-ui-styling」を使用しています。 チームはプロダクトページ全体で一貫した Tailwind トークンを求めています。
期待される結果:
Most static hits are false positives in documentation, license text, tests, and coverage data. Real issues remain around unpinned npx execution in a helper script and numerous bundled binary font assets that need manual verification.
これらは、このスキルに期待される可能性のある実際のローカル機能であるため、レビューが必要ですが、確認済みの悪意ある動作としてはカウントされません。
バージョン付き評価レポート、中立的なバッジ、埋め込みカード、引用を共有できます。Skillstore は証拠を報告しますが、この Skill が安全かどうかは判断しません。
https://skillstore.io/skills/nextlevelbuilder-ckm-ui-styling/audits/4?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report[](https://skillstore.io/skills/nextlevelbuilder-ckm-ui-styling?utm_source=security_passport_badge)<a href="https://skillstore.io/skills/nextlevelbuilder-ckm-ui-styling?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/nextlevelbuilder-ckm-ui-styling/security.svg" alt="Skillstore security assessment" loading="lazy"></a><iframe src="https://skillstore.io/embed/skills/nextlevelbuilder-ckm-ui-styling.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>nextlevelbuilder. (2026). ckm-ui-styling security audit report (audit version 4) [Author version 1.0.0]. Skillstore. https://skillstore.io/skills/nextlevelbuilder-ckm-ui-styling/audits/4@techreport{nextlevelbuilder-nextlevelbuilder-ckm-ui-styling-2026,
author = {nextlevelbuilder},
title = {ckm-ui-styling security audit report (audit version 4)},
institution = {Skillstore},
year = {2026},
number = {4},
url = {https://skillstore.io/skills/nextlevelbuilder-ckm-ui-styling/audits/4},
note = {Author version 1.0.0}
}cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "ckm-ui-styling security audit report (audit version 4)"
version: "1.0.0"
type: report
authors:
- name: "nextlevelbuilder"
date-released: "2026-07-05"
url: "https://skillstore.io/skills/nextlevelbuilder-ckm-ui-styling/audits/4"
identifiers:
- type: other
value: "skillstore:nextlevelbuilder-ckm-ui-styling:audit:4"
description: "Skillstore immutable audit report identifier"
shadcn のカード、フォーム、ダイアログ、Tailwind の余白ルールを使って、モバイルファーストのページを作成します。
共有 UI システム向けに、トークン、ダークモードの動作、コンポーネントバリアント、アクセシブルなインタラクション状態を定義します。
フォーカス管理、キーボード動作、フォームエラー、色のコントラスト、スクリーンリーダー通知をレビューします。
Use ckm-ui-styling to style a responsive shadcn button and card for a simple signup screen.
Create an accessible settings dialog with keyboard navigation, focus states, form messages, and Tailwind dark mode styles.
Define a Tailwind and shadcn theme for a finance dashboard, including tokens, variants, and responsive layout guidance.
Review this React UI for accessibility, layout consistency, dark mode, and shadcn composition. Provide precise changes and validation steps.
作成者
nextlevelbuilderライセンス
MIT
作者バージョン
v1.0.0
Skillstore リビジョン
r1
参照
62e2a730c5cd74eab4c7164309d810de660fcea3
メンテナンスの新しさ
2026/7/18
利用状況
8 ダウンロード · 15 閲覧
Build Accessible Tailwind Interfaces
Building consistent, responsive interfaces requires many component, styling, and accessibility decisions. This skill provides shadcn/ui patterns, Tailwind guidance, and focused automation.
Build Consistent Design Systems and Slides
Inconsistent tokens and components make design handoffs difficult. This skill structures tokens, validates usage, and generates brand-aligned presentation assets.
Create Strategic HTML Presentations
Building persuasive, responsive presentations requires coordinated structure, design, copy, and data visualization. This skill turns a topic and audience brief into a complete HTML deck.
UI と UX デザインのワークフローを改善する
インターフェイス作業では、一貫したスタイル、アクセシビリティ、スタック固有のガイダンスが必要になることがよくあります。このスキルは、Claude、Codex、Claude Code に、デザインの計画、構築、レビューのために検索可能な UI/UX リファレンスを提供します。
ブランドガイドラインとアセットワークフローを構築
ブランド業務では、ボイス、ビジュアル、アセット、デザイントークンの間で一貫性が崩れがちです。このスキルは、Claude、Codex、Claude Code が一貫したブランドシステムを作成、レビュー、適用するのを支援します。
Build consistent brand guidelines and assets
Brand work can become inconsistent across content, assets, and interfaces. This skill provides structured guidance, validation, and token synchronization to keep brand decisions aligned.
WCAG準拠のためのWebアクセシビリティ監査
作成者 89jobrien
アクセシビリティ上のギャップは、ユーザーの利用を妨げ、コンプライアンスリスクを生む可能性があります。このスキルは、WCAG監査、スクリーンリーダーチェック、キーボードテスト、改善計画を支援します。
構築前にUXを計画する
作成者 pbakaus
チームは、ユーザーの目標、状態、制約を明確にする前にインターフェースを構築してしまうことがよくあります。このスキルはディスカバリーをガイドし、実装のためのデザインブリーフを作成します。
リサーチ主導のデザインガイダンスでUXを改善
作成者 shubhamsaboo
チームは思い込みに基づいてフローを設計し、アクセシビリティの問題を見落としがちです。このスキルは、UXのベストプラクティスを用いて、リサーチ、構造化、インタラクションデザイン、レビューを支援します。
特徴的なUIプロトタイプを設計する
作成者 tencentcloudbase
汎用的なAIインターフェースは、視覚的な方向性やプラットフォームを考慮した細部が不足しがちです。このスキルは、Claude、Codex、Claude Codeがプロトタイプを構築する前にデザイン意図を定義できるよう支援します。
Check designs with deterministic CSS rules
作成者 cubha
Design reviews can vary between reviewers and slow down delivery. This skill applies repeatable checks to HTML and CSS so teams can catch token, layout, and accessibility issues before release.
Next.jsでshadcn/uiインターフェースを構築
作成者 Asmayaseen
Reactチームには、モダンなNext.jsで機能する一貫したUIパターンが必要です。このスキルは、shadcn/uiのセットアップガイダンス、コンポーネント例、フォームバリデーション、テーブル、サイドバー、ダークモードパターンを提供します。