frontend-agent
一貫したフロントエンドUIを構築
フロントエンド作業は、プロダクトのデザインルールからずれたり、必要な状態の実装が抜けたりしがちです。このスキルは、Claude、Codex、Claude CodeがUnite-Hub向けに一貫したReact、Next.js、shadcn/ui、Tailwindの変更を行えるように導きます。
自分のエージェントでインストール
このリクエストをエージェントにコピーしてください。正規の Skill ページとマニフェストが含まれています。
Review the Skillstore skill "frontend-agent" from https://skillstore.io/skills/cleanexpo-frontend-agent.md and its manifest at https://skillstore.io/api/skills/cleanexpo-frontend-agent/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.エージェントは引き続き計画を提示し、セキュリティポリシーで必要な確認を求める必要があります。
エージェントが読めるリソース
AI エージェント、クローラー、スクリプトがページ全体ではなく整理されたコンテキストを必要とする場合は、これらのリンクを使ってください。
テストする
「frontend-agent」を使用しています。 ダッシュボードの連絡先カードのレイアウトを修正してください。
期待される結果:
デザイントークンによるスタイリング、レスポンシブ動作、ローディング状態、空状態、エラー状態を備えた改訂済みカードレイアウト。
「frontend-agent」を使用しています。 ダッシュボードに分析ページを追加してください。
期待される結果:
metadata、ナビゲーション、breadcrumbs、shadcn/uiセクション、モバイルレイアウトチェックを備えた新しいダッシュボードルート。
「frontend-agent」を使用しています。 Hot Leads Send Emailボタンを動作するようにしてください。
期待される結果:
API送信、成功toast、失敗toast、ワークスペースを考慮した連絡先処理を備えた接続済みボタンフロー。
セキュリティ監査
安全All 90 static detections appear to be false positives from Markdown formatting and frontend examples. The skill does not include hidden execution, external exfiltration, destructive commands, or audit-bypass prompt injection. Manual npm and npx commands are documented workflow steps, not automatic execution by the skill.
リスク要因
⚡ スクリプトを含む (1)
⚙️ 外部コマンド (50)
🌐 ネットワークアクセス (4)
このレポートを共有・引用
バージョン付き評価レポート、中立的なバッジ、埋め込みカード、引用を共有できます。Skillstore は証拠を報告しますが、この Skill が安全かどうかは判断しません。
レポートリンクをコピー
https://skillstore.io/skills/cleanexpo-frontend-agent/audits/12?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdownバッジ
[](https://skillstore.io/skills/cleanexpo-frontend-agent?utm_source=security_passport_badge)HTMLバッジ
<a href="https://skillstore.io/skills/cleanexpo-frontend-agent?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/cleanexpo-frontend-agent/security.svg" alt="Skillstore security assessment" loading="lazy"></a>埋め込みカード
<iframe src="https://skillstore.io/embed/skills/cleanexpo-frontend-agent.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). frontend-agent security audit report (audit version 12) [Author version unspecified]. Skillstore. https://skillstore.io/skills/cleanexpo-frontend-agent/audits/12BibTeX形式の引用
@techreport{cleanexpo-cleanexpo-frontend-agent-2026,
author = {CleanExpo},
title = {frontend-agent security audit report (audit version 12)},
institution = {Skillstore},
year = {2026},
number = {12},
url = {https://skillstore.io/skills/cleanexpo-frontend-agent/audits/12},
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: "frontend-agent security audit report (audit version 12)"
version: "unspecified"
type: report
authors:
- name: "CleanExpo"
date-released: "2026-07-09"
url: "https://skillstore.io/skills/cleanexpo-frontend-agent/audits/12"
identifiers:
- type: other
value: "skillstore:cleanexpo-frontend-agent:audit:12"
description: "Skillstore immutable audit report identifier"
Skillstore スコア
このスコアの理由 証拠の信頼度: 高作成できるもの
ダッシュボードUIの問題を修正
Unite-Hubのデザイントークンの一貫性を保ちながら、レイアウト、ボタン、ローディング状態、レスポンシブ動作を修正します。
新しいダッシュボードページを作成
新しいダッシュボード機能のために、App Routerページ、metadata、ナビゲーション項目、breadcrumbs、shadcn/uiセクションを追加します。
ワークスペースに安全なインターフェースを改善
連絡先、キャンペーン、メール、生成コンテンツがアクティブなワークスペースの範囲内に保たれるように、フロントエンドのデータビューをレビューします。
これらのプロンプトを試す
[page]のレイアウト問題を修正してください。デザインチェックリストに従い、既存コンポーネントを確認し、shadcn/uiのスタイリングの一貫性を保ってください。
[feature]用の新しいダッシュボードページを作成してください。metadata、ナビゲーション、breadcrumbs、レスポンシブレイアウト、ローディング状態と空状態を追加してください。
[component]を更新して[data]を表示してください。サポートされているすべてのクエリがworkspaceIdにスコープされ、ワークスペース状態がない場合にも対応するようにしてください。
[workflow]のフロントエンドフローを監査してください。ルート構造、コンポーネント再利用、API呼び出し、ワークスペーススコープ、エラー、アクセシビリティ、モバイル動作を確認してください。
ベストプラクティス
- 新しいマークアップを提案する前に、デザインシステムと既存のUIコンポーネントを確認します。
- ユーザーレコードをレンダリングする前に、データビューをアクティブなワークスペースにスコープします。
- 作業を完了する前に、ローディング、エラー、空、モバイル、キーボード状態を確認します。
回避
- Unite-Hubのスタイリングトークンなしで、汎用的なshadcn/uiのデフォルトを使用しないでください。
- ワークスペースフィルタリングを省略したデータビューを作成しないでください。
- デスクトップビューポートでしか動作しないページを出荷しないでください。