design-taste-frontend-v1
フロントエンドデザインのセンスを向上
AI が生成するフロントエンドは汎用的に見えたり、レスポンシブ状態が不足したりすることがあります。このスキルは、Claude、Codex、Claude Code に対して、より洗練された React と Tailwind の出力を得るための明確な UI ルールを提供します。
自分のエージェントでインストール
このリクエストをエージェントにコピーしてください。正規の Skill ページとマニフェストが含まれています。
Review the Skillstore skill "design-taste-frontend-v1" from https://skillstore.io/skills/leonxlnx-design-taste-frontend-v1.md and its manifest at https://skillstore.io/api/skills/leonxlnx-design-taste-frontend-v1/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.エージェントは引き続き計画を提示し、セキュリティポリシーで必要な確認を求める必要があります。
エージェントが読めるリソース
AI エージェント、クローラー、スクリプトがページ全体ではなく整理されたコンテキストを必要とする場合は、これらのリンクを使ってください。
テストする
「design-taste-frontend-v1」を使用しています。 Create a SaaS dashboard for operations managers.
期待される結果:
応答では、実装前に非対称なダッシュボードレイアウト、抑制されたパレット、明確なフォーム状態、モバイル時の折りたたみルールを説明します。
「design-taste-frontend-v1」を使用しています。 Improve a product landing page that looks generic.
期待される結果:
応答では、中央寄せのヒーローの既定パターンを、より強い構成、独自性のあるタイポグラフィ、具体的な画像ガイダンス、より整理された call-to-action 階層に置き換えます。
「design-taste-frontend-v1」を使用しています。 Add motion to a feature grid without hurting performance.
期待される結果:
応答では、分離されたアニメーションコンポーネント、スプリングベースのトランジション、メモ化されたループ、transform のみを使うアニメーション選択を提案します。
セキュリティ監査
安全The static alerts are false positives caused by Markdown backticks and design prose in SKILL.md. I found no executable code, shell invocation, secret access, prompt-injection attempt, or malicious network behavior. No semantic security findings were added.
リスク要因
⚙️ 外部コマンド (55)
🌐 ネットワークアクセス (1)
このレポートを共有・引用
バージョン付き評価レポート、中立的なバッジ、埋め込みカード、引用を共有できます。Skillstore は証拠を報告しますが、この Skill が安全かどうかは判断しません。
レポートリンクをコピー
https://skillstore.io/skills/leonxlnx-design-taste-frontend-v1/audits/4?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdownバッジ
[](https://skillstore.io/skills/leonxlnx-design-taste-frontend-v1?utm_source=security_passport_badge)HTMLバッジ
<a href="https://skillstore.io/skills/leonxlnx-design-taste-frontend-v1?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/leonxlnx-design-taste-frontend-v1/security.svg" alt="Skillstore security assessment" loading="lazy"></a>埋め込みカード
<iframe src="https://skillstore.io/embed/skills/leonxlnx-design-taste-frontend-v1.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形式の引用
leonxlnx. (2026). design-taste-frontend-v1 security audit report (audit version 4) [Author version unspecified]. Skillstore. https://skillstore.io/skills/leonxlnx-design-taste-frontend-v1/audits/4BibTeX形式の引用
@techreport{leonxlnx-leonxlnx-design-taste-frontend-v1-2026,
author = {leonxlnx},
title = {design-taste-frontend-v1 security audit report (audit version 4)},
institution = {Skillstore},
year = {2026},
number = {4},
url = {https://skillstore.io/skills/leonxlnx-design-taste-frontend-v1/audits/4},
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: "design-taste-frontend-v1 security audit report (audit version 4)"
version: "unspecified"
type: report
authors:
- name: "leonxlnx"
date-released: "2026-07-06"
url: "https://skillstore.io/skills/leonxlnx-design-taste-frontend-v1/audits/4"
identifiers:
- type: other
value: "skillstore:leonxlnx-design-taste-frontend-v1:audit:4"
description: "Skillstore immutable audit report identifier"
Skillstore スコア
このスコアの理由 証拠の信頼度: 高作成できるもの
プロダクト画面を洗練する
複雑なプロダクト画面を実装する前に、このスキルを使ってレイアウト、タイポグラフィ、モーション、状態に関するガイダンスを設定します。
ブランドインターフェースを形作る
ランディングページ、機能セクション、プロダクト主導のマーケティングページを作成する際に、より強いビジュアルディレクションを適用します。
AI プロトタイプをレビューする
事前チェックリストを使って、汎用的なレイアウト、不足している状態、弱いレスポンシブ挙動を見つけます。
これらのプロンプトを試す
Use design-taste-frontend-v1 for a React interface. Create a [screen type] for [audience]. Use Tailwind. Include loading, empty, and error states.
Apply the skill to redesign this page. Keep the same content. Improve layout, typography, responsive behavior, and interaction states.
Use the skill with motion intensity above five. Add purposeful Framer Motion interactions. Isolate animated client components and protect performance.
Review this dashboard concept with the skill checklist. Identify generic patterns, weak hierarchy, missing states, and mobile risks. Then propose focused fixes.
ベストプラクティス
- 生成前に、対象ユーザー、プロダクト領域、スタック、視覚的制約を提供します。
- 既存のブランドトークンやコンポーネントルールがこのスキルより優先される必要がある場合は、それらを共有します。
- 最初のプロンプトで、loading、empty、error、mobile の各状態を依頼します。
回避
- ブランド、対象ユーザー、プロダクトの文脈なしに汎用的なランディングページを依頼すること。
- 厳格な企業デザインシステムがすべての選択を制御する必要がある場合に、このスキルを使うこと。
- 明確なユーザーメリットなしに、パフォーマンスに敏感なページへ永続的なモーションを追加すること。