スキル styling-with-shadcn

📦

styling-with-shadcn

Name: styling-with-shadcn
Author: Asmayaseen

コンテンツリビジョン r1 安全 ⚙️ 外部コマンド🌐 ネットワークアクセス

Next.jsでshadcn/uiインターフェースを構築

Reactチームには、モダンなNext.jsで機能する一貫したUIパターンが必要です。このスキルは、shadcn/uiのセットアップガイダンス、コンポーネント例、フォームバリデーション、テーブル、サイドバー、ダークモードパターンを提供します。

対応: Claude Codex Code(CC)

🥈 80 シルバー

自分のエージェントでインストール

このリクエストをエージェントにコピーしてください。正規の Skill ページとマニフェストが含まれています。

エージェントリクエスト

Review the Skillstore skill "styling-with-shadcn" from https://skillstore.io/skills/asmayaseen-styling-with-shadcn.md and its manifest at https://skillstore.io/api/skills/asmayaseen-styling-with-shadcn/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.

エージェントは引き続き計画を提示し、セキュリティポリシーで必要な確認を求める必要があります。

エージェントが読めるリソース

AI エージェント、クローラー、スクリプトがページ全体ではなく整理されたコンテキストを必要とする場合は、これらのリンクを使ってください。

Markdown詳細 GET /skills/asmayaseen-styling-with-shadcn.md 署名済み manifest GET /api/skills/asmayaseen-styling-with-shadcn/manifest 署名済み lockfile GET /api/skills/asmayaseen-styling-with-shadcn/lockfile

テストする

「styling-with-shadcn」を使用しています。 Next.jsダッシュボードにタスク作成フォームが必要です。

期待される結果:

このスキルは、必要なフォームコンポーネント、バリデーションフィールド、送信処理、トースト通知によるユーザーフィードバックを概説します。

「styling-with-shadcn」を使用しています。ソートとページネーション付きのタスクテーブルが欲しいです。

期待される結果:

このスキルは、TanStack tableの構造、shadcn/uiテーブルコンポーネント、列の動作、ページネーションコントロールを説明します。

「styling-with-shadcn」を使用しています。暗いインダストリアル調のダッシュボードテーマが必要です。

期待される結果:

このスキルは、Tailwindトークン、フォント選定、カードスタイル、ステータスカラー、ダークモードのセットアップを要約します。

セキュリティ監査

安全

v13 • 2026/7/9 バージョン別レポートを開く

The skill is a shadcn/ui guidance package with Markdown examples and a small local verification script. The static alerts are false positives caused by Markdown fences, JSX template literals, CSS comments, and a public font import example. No prompt injection, data exfiltration, or malicious intent was found.

スキャンされたファイル

1,268

解析済み行数

レビュー項目

誤検知を無視

最新の完了済み静的・セマンティック監査では、確認済みのセキュリティ検出事項は見つかりませんでした。これは、スキルに副作用がないことを証明するものではありません。

監査者: codex 監査履歴を表示 →

このレポートを共有・引用

バージョン付き評価レポート、中立的なバッジ、埋め込みカード、引用を共有できます。Skillstore は証拠を報告しますが、この Skill が安全かどうかは判断しません。

バージョン別レポートを開く

レポートリンクをコピー

https://skillstore.io/skills/asmayaseen-styling-with-shadcn/audits/13?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdownバッジ

[![Skillstore security assessment](https://skillstore.io/badges/skills/asmayaseen-styling-with-shadcn/security.svg)](https://skillstore.io/skills/asmayaseen-styling-with-shadcn?utm_source=security_passport_badge)

HTMLバッジ

<a href="https://skillstore.io/skills/asmayaseen-styling-with-shadcn?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/asmayaseen-styling-with-shadcn/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

埋め込みカード

<iframe src="https://skillstore.io/embed/skills/asmayaseen-styling-with-shadcn.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>

学術引用 (APA · BibTeX · CFF)

APA形式の引用

Asmayaseen. (2026). styling-with-shadcn security audit report (audit version 13) [Author version unspecified]. Skillstore. https://skillstore.io/skills/asmayaseen-styling-with-shadcn/audits/13

BibTeX形式の引用

@techreport{asmayaseen-asmayaseen-styling-with-shadcn-2026,
  author = {Asmayaseen},
  title = {styling-with-shadcn security audit report (audit version 13)},
  institution = {Skillstore},
  year = {2026},
  number = {13},
  url = {https://skillstore.io/skills/asmayaseen-styling-with-shadcn/audits/13},
  note = {Author version unspecified}
}

CITATION.cff

cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "styling-with-shadcn security audit report (audit version 13)"
version: "unspecified"
type: report
authors:
  - name: "Asmayaseen"
date-released: "2026-07-09"
url: "https://skillstore.io/skills/asmayaseen-styling-with-shadcn/audits/13"
identifiers:
  - type: other
    value: "skillstore:asmayaseen-styling-with-shadcn:audit:13"
    description: "Skillstore immutable audit report identifier"

Skillstore スコア

このスコアの理由証拠の信頼度: 高

アーキテクチャ

保守性

コンテンツ

コミュニティ

仕様準拠

作成できるもの

バリデーション付きの商品フォームを構築

shadcn/uiコントロール、react-hook-formの状態管理、Zodバリデーション、明確なエラー処理を備えたフォームを作成します。

ダッシュボードコンポーネントを標準化

Next.jsアプリ全体で、一貫したボタン、カード、ダイアログ、テーブル、サイドバー、トースト、ダークモードパターンを適用します。

カスタムテーマを適用

TaskFlowリファレンスを使用して、Tailwindトークン、タイポグラフィ、ステータスカラー、コンポーネントスタイルを計画します。

これらのプロンプトを試す

shadcn/uiコンポーネントをインストール

私のNext.jsプロジェクトにshadcn/uiをセットアップしてください。初期化手順、必要なコンポーネント、ファイル編集前のチェックを含めてください。

バリデーション付きフォームを作成

shadcn/ui、react-hook-form、Zodを使ってタスクフォームを構築してください。フィールド、バリデーション動作、エラー状態、送信フローを含めてください。

タスクダッシュボードを設計

カード、ダイアログ、サイドバー、データテーブル、トースト、ダークモードを使ってタスクダッシュボードを作成してください。既存のプロジェクト構造に従ってください。

カスタムテーマシステムを適用

TaskFlowテーマを私のアプリに適用してください。Tailwindトークン、タイポグラフィ、ステータススタイル、アクセシビリティリスク、必要なコンポーネント変更を確認してください。

ベストプラクティス

コンポーネントを追加する前に、shadcn/uiとTailwindの設定を確認します。
バリデーションスキーマをフォームの近くに保ち、すべてのエラー状態を確認します。
生成されたテーマカラーを、アクセシビリティとブランド基準に照らして確認します。

回避

レビューなしで本番環境にlatest依存関係インストーラーを実行すること。
import、パス、クライアント境界を適応せずに例をコピーすること。
同じワークフロー内で、このガイダンスを別のコンポーネントライブラリと混在させること。

よくある質問

このスキルはshadcn/uiを自動的にインストールしますか？

コマンドとパターンを提供します。エージェントは、インストーラーの実行やプロジェクトファイルの変更前に、引き続き確認する必要があります。

どのフレームワークをサポートしていますか？

Tailwind CSSを使用したReactとNext.jsに重点を置いています。Vue、Svelte、またはネイティブモバイルアプリ向けではありません。

完全なページを作成できますか？

はい。ページとコンポーネントの構成を案内できますが、例にはプロジェクト固有のimportとデータ接続が必要になる場合があります。

フォームバリデーションは含まれていますか？

はい。Zodとshadcn/uiフォームコンポーネントを使用したreact-hook-formを扱います。

ダークモードをサポートしていますか？

はい。next-themesプロバイダーのセットアップとテーマ切り替えパターンを示します。

TaskFlowテーマは必須ですか？

いいえ。これは色、タイポグラフィ、レイアウト、ステータスインジケーターの任意のリファレンスです。

開発者情報

作成者

Asmayaseen

ライセンス

MIT

Skillstore リビジョン

バージョンに関する注意

作者はバージョンを宣言していません。

リポジトリ

https://github.com/Asmayaseen/hackathon-2/tree/main/.claude/skills/styling-with-shadcn

参照

3e4b6c31a74a3bd1a291c98cf585d720cb9fbc88

メンテナンスの新しさ

2026/7/18

利用状況

18 ダウンロード · 292 閲覧

ファイル構成

📁 references/

📄 component-examples.md

📄 taskflow-theme.md

📁 scripts/

📄 verify.py

Next.js パフォーマンスの最適化

作成者 Atman36

Next.js アプリケーションは、大きなバンドル、弱いキャッシュ、最適化されていないメディアによって遅くなることがあります。このスキルは、Claude、Codex、Claude Code が本番アプリ向けに的を絞ったパフォーマンス改善を行えるよう支援します。

コーディング＆開発表示

styling-with-shadcn

自分のエージェントでインストール

エージェントが読めるリソース

テストする

セキュリティ監査

リスク要因

レポートリンクをコピー

Markdownバッジ

HTMLバッジ

埋め込みカード

APA形式の引用

BibTeX形式の引用

CITATION.cff

Skillstore スコア

作成できるもの

バリデーション付きの商品フォームを構築

ダッシュボードコンポーネントを標準化

カスタムテーマを適用

これらのプロンプトを試す

ベストプラクティス

回避

よくある質問

開発者情報

Asmayaseen のその他のスキル

tool-design

systematic-debugging

operating-production-services

streaming-llm-responses

context-degradation

multi-agent-patterns

関連スキル

shadcn-ui

senior-fullstack

vercel-react-view-transitions

senior-frontend

nextjs-architecture

nextjs-optimization