スキル ui-component-creation

📦

ui-component-creation

Name: ui-component-creation
Author: CleanExpo

コンテンツリビジョン r1 安全 ⚙️ 外部コマンド

建立設計系統 UI 元件

團隊需要遵循本地設計規則的一致 UI 元件。此技能會以權杖、狀態、響應式版面配置和無障礙性，引導 shadcn/ui 的建立。

対応: Claude Codex Code(CC)

🥉 78 ブロンズ

Maintain this Skill? Claim it 🥉 78 ブロンズ

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

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

エージェントリクエスト

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

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

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

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

Markdown詳細 GET /skills/cleanexpo-ui-component-creation.md 署名済み manifest GET /api/skills/cleanexpo-ui-component-creation/manifest 署名済み lockfile GET /api/skills/cleanexpo-ui-component-creation/lockfile

テストする

「ui-component-creation」を使用しています。 Create a dashboard summary card for monthly sales data.

期待される結果:

可重複使用的卡片元件規劃，包含以權杖為基礎的表面顏色、清楚的標題層級、動作按鈕樣式，以及響應式間距。

「ui-component-creation」を使用しています。 Refactor a feature panel that uses raw gray and white classes.

期待される結果:

符合設計系統的面板，將原始顏色 class 替換為核准的文字、背景、強調色與邊框權杖。

「ui-component-creation」を使用しています。 Create a responsive three-column statistics section.

期待される結果:

避免固定行動版欄位的響應式版面配置，並定義無障礙標籤、狀態與斷點行為。

セキュリティ監査

安全

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

The static findings are false positives caused by Markdown code fences, inline Tailwind class names, and design-token examples. No shell execution, system reconnaissance, network reconnaissance, prompt injection, or data exfiltration intent was found in SKILL.md.

スキャンされたファイル

解析済み行数

レビュー項目

誤検知を無視

リスク要因

⚙️ 外部コマンド (10)

SKILL.md:15 SKILL.md:26-47 SKILL.md:47-56 SKILL.md:56 SKILL.md:57 SKILL.md:58-59 SKILL.md:59-68 SKILL.md:68 SKILL.md:69 SKILL.md:70

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

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

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

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

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

レポートリンクをコピー

https://skillstore.io/skills/cleanexpo-ui-component-creation/audits/8?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdownバッジ

[![Skillstore security assessment](https://skillstore.io/badges/skills/cleanexpo-ui-component-creation/security.svg)](https://skillstore.io/skills/cleanexpo-ui-component-creation?utm_source=security_passport_badge)

HTMLバッジ

<a href="https://skillstore.io/skills/cleanexpo-ui-component-creation?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/cleanexpo-ui-component-creation/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

埋め込みカード

<iframe src="https://skillstore.io/embed/skills/cleanexpo-ui-component-creation.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形式の引用

CleanExpo. (2026). ui-component-creation security audit report (audit version 8) [Author version unspecified]. Skillstore. https://skillstore.io/skills/cleanexpo-ui-component-creation/audits/8

BibTeX形式の引用

@techreport{cleanexpo-cleanexpo-ui-component-creation-2026,
  author = {CleanExpo},
  title = {ui-component-creation security audit report (audit version 8)},
  institution = {Skillstore},
  year = {2026},
  number = {8},
  url = {https://skillstore.io/skills/cleanexpo-ui-component-creation/audits/8},
  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: "ui-component-creation security audit report (audit version 8)"
version: "unspecified"
type: report
authors:
  - name: "CleanExpo"
date-released: "2026-07-06"
url: "https://skillstore.io/skills/cleanexpo-ui-component-creation/audits/8"
identifiers:
  - type: other
    value: "skillstore:cleanexpo-ui-component-creation:audit:8"
    description: "Skillstore immutable audit report identifier"

Skillstore スコア

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

アーキテクチャ

保守性

コンテンツ

コミュニティ

仕様準拠

作成できるもの

建立新的產品卡片

建立可重複使用的卡片，遵循專案權杖、狀態和響應式行為。

標準化功能面板

將各式介面需求轉換為使用相同視覺系統的元件。

審查 UI 生成請求

引導 AI 輔助的元件工作產出具備無障礙性且符合品牌的結果。

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

建立基本元件

Create a shadcn/ui card component for [purpose]. Use our design tokens, responsive spacing, and accessible labels.

新增互動狀態

Create a [component type] with hover, focus, disabled, and loading states. Use design tokens instead of raw Tailwind colors.

重構現有標記

Refactor this component to use shadcn/ui patterns, project color tokens, responsive breakpoints, and accessible controls: [paste component].

設計一組元件

Create a coordinated set of [components] for [workflow]. Include variants, empty states, error states, responsive behavior, and accessibility details.

ベストプラクティス

在請求元件工作前，提供相關的設計系統檔案或權杖名稱。
要求所有必要狀態，包括 hover、focus、disabled、loading、empty 和 error 狀態。
審查產生的元件是否符合無障礙性、響應式行為與權杖一致性。

回避

當專案已有設計權杖時，不要要求使用原始 Tailwind 顏色 class。
不要接受缺少行動版與平板行為的固定桌面網格版面配置。
不要省略按鈕、卡片、表單或導覽元素的互動狀態。

よくある質問

此技能針對哪些框架？

它針對具有已定義設計系統的 Tailwind CSS 專案中的 shadcn/ui 元件。

它會安裝 shadcn/ui 嗎？

否。它假設專案已具備所需的 UI 元件與權杖。

它可以建立響應式版面配置嗎？

可以。此技能要求響應式斷點，並提醒避免固定的多欄版面配置。

它支援無障礙需求嗎？

可以。它要求提供無障礙性細節，包括 aria 標籤和完整的互動狀態。

它可以重構現有元件嗎？

可以。它能引導重構，使其符合 shadcn/ui 模式與核准的設計權杖。

這是安全性敏感的技能嗎？

它主要是設計與前端編碼指南。經稽核的檔案僅包含文件。

開発者情報

作成者

CleanExpo

ライセンス

MIT

Skillstore リビジョン

バージョンに関する注意

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

リポジトリ

https://github.com/CleanExpo/Unite-Hub/tree/main/.claude/skills/ui-component-creation

参照

d11af420e07cd866fe39cfa937efef3223896c06

メンテナンスの新しさ

2026/7/18

利用状況

5 ダウンロード · 224 閲覧

ファイル構成

📄 SKILL.md

CleanExpo のその他のスキル

すべて表示

📦

verification-protocol

以證據驗證代理完成狀態

AI 代理可能在沒有證明的情況下將工作標記為完成，造成虛假完成的風險。此技能要求在接受任務完成前提供獨立證據。

生産性表示

📦

video-generation-skill

為行銷建立 AI 影片規劃

行銷團隊在使用生成工具之前，需要清晰的影片規劃。此技能可將行銷活動構想轉換為腳本、鏡頭清單、平台注意事項與剪輯指引。

デザイン＆クリエイティブ表示

📦

no-bluff-seo-skill

用證據驗證 SEO 主張

SEO 文案經常包含難以驗證的主張。這項技能會引導 Claude、Codex 和 Claude Code 追溯主張來源、評估信心分數，並區分事實與預測。

ライティング＆コンテンツ表示

📦

visual-engine-skill

打造無障礙視覺體驗

視覺體驗在不同頁面之間可能變得不一致、緩慢或不具無障礙性。此技能會以明確的安全限制，引導動畫、圖庫、展示與 Three.js 更新。

デザイン＆クリエイティブ表示

📦

decision-moment-skill

對漏斗中的決策時刻進行映射

行銷活動團隊經常錯過阻礙買家繼續前進的關鍵問題。此技能會將每個漏斗階段轉化為清晰的時刻、證明需求、素材、通路與留存行動。

生産性表示

📦

conversion-copywriting

撰寫經驗證的轉換文案

行銷頁面常常聽起來千篇一律，並提出無法驗證的主張。此技能協助 Claude、Codex 和 Claude Code 產出以研究為基礎、聚焦明確的文案。

ライティング＆コンテンツ表示

すべて表示

📦

ui-styling

Build Accessible Tailwind Interfaces

作成者 nextlevelbuilder

Building consistent, responsive interfaces requires many component, styling, and accessibility decisions. This skill provides shadcn/ui patterns, Tailwind guidance, and focused automation.

デザイン＆クリエイティブ表示

📦

core-components

建構一致的核心元件介面

作成者 sickn33

UI 工作可能逐漸變成硬編碼的間距、顏色與原始平台元件。這項技能會引導 Claude、Codex 和 Claude Code 使用核心元件、權杖與可重用版面配置。

デザイン＆クリエイティブ表示

📦

uiux-ops

改善 UI/UX 設計作業流程

作成者 A-Genno

當團隊缺乏共同原則與審查習慣時，UI/UX 工作往往容易偏離方向。此技能為 Claude、Codex 和 Claude Code 提供一份精簡的設計決策檢查清單。

デザイン＆クリエイティブ表示

📦

web-accessibility

稽核網站無障礙以符合 WCAG 規範

作成者 89jobrien

無障礙缺口可能阻礙使用者並造成合規風險。此技能可引導 WCAG 稽核、螢幕閱讀器檢查、鍵盤測試與修復規劃。

デザイン＆クリエイティブ表示

📦

design-system

Build Consistent Design Systems and Slides

作成者 nextlevelbuilder

Inconsistent tokens and components make design handoffs difficult. This skill structures tokens, validates usage, and generates brand-aligned presentation assets.

デザイン＆クリエイティブ表示

📦

ux-designer

透過研究導向的設計指引改善 UX

作成者 shubhamsaboo

團隊常根據假設設計流程，並忽略無障礙問題。此技能運用 UX 最佳實務，指導研究、結構、互動設計與審查。

デザイン＆クリエイティブ表示

ui-component-creation

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

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

テストする

セキュリティ監査

リスク要因

レポートリンクをコピー

Markdownバッジ

HTMLバッジ

埋め込みカード

APA形式の引用

BibTeX形式の引用

CITATION.cff

Skillstore スコア

作成できるもの

建立新的產品卡片

標準化功能面板

審查 UI 生成請求

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

ベストプラクティス

回避

よくある質問

開発者情報

CleanExpo のその他のスキル

verification-protocol

video-generation-skill

no-bluff-seo-skill

visual-engine-skill

decision-moment-skill

conversion-copywriting

関連スキル

ui-styling

core-components

uiux-ops

web-accessibility

design-system

ux-designer