スキル designing-frontend

📦

designing-frontend

Name: designing-frontend
Author: Byunk

コンテンツリビジョン r1 安全

特徴的なフロントエンドインターフェイスを設計する

汎用的なインターフェイスは、プロダクトをどれも同じように感じさせることがあります。このスキルは、Claude、Codex、Claude Code を、具体的なビジュアル方針、洗練されたコード、検証へと導きます。

対応: Claude Codex Code(CC)

🥉 79 ブロンズ

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

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

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

エージェントリクエスト

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

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

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

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

Markdown詳細 GET /skills/byunk-designing-frontend.md 署名済み manifest GET /api/skills/byunk-designing-frontend/manifest 署名済み lockfile GET /api/skills/byunk-designing-frontend/lockfile

テストする

「designing-frontend」を使用しています。特徴的な分析ダッシュボードのリクエスト。

期待される結果:

ドメイン特化のタイポグラフィ、構造化された情報密度、控えめなモーション、レスポンシブな本番向けインターフェイスガイダンスを備えた、焦点の明確なダッシュボードコンセプト。

「designing-frontend」を使用しています。汎用的に感じられる平凡なサインアップページ。

期待される結果:

より強い視覚的階層、意図のある色使い、洗練されたホバー状態、アクセシビリティチェックを備えた、再設計されたサインアップフロー。

「designing-frontend」を使用しています。クリエイティブツール向けの新しいプロダクトページ。

期待される結果:

表現力のある書体、文脈に合った視覚効果、インタラクションの詳細、実装優先事項を備えた大胆なページ方針。

セキュリティ監査

安全

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

All four static alerts are false positives caused by ordinary visual design language in SKILL.md. No system reconnaissance, prompt injection, or other malicious intent was found.

スキャンされたファイル

解析済み行数

レビュー項目

誤検知を無視

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

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

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

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

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

レポートリンクをコピー

https://skillstore.io/skills/byunk-designing-frontend/audits/9?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdownバッジ

[![Skillstore security assessment](https://skillstore.io/badges/skills/byunk-designing-frontend/security.svg)](https://skillstore.io/skills/byunk-designing-frontend?utm_source=security_passport_badge)

HTMLバッジ

<a href="https://skillstore.io/skills/byunk-designing-frontend?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/byunk-designing-frontend/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

埋め込みカード

<iframe src="https://skillstore.io/embed/skills/byunk-designing-frontend.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形式の引用

Byunk. (2026). designing-frontend security audit report (audit version 9) [Author version unspecified]. Skillstore. https://skillstore.io/skills/byunk-designing-frontend/audits/9

BibTeX形式の引用

@techreport{byunk-byunk-designing-frontend-2026,
  author = {Byunk},
  title = {designing-frontend security audit report (audit version 9)},
  institution = {Skillstore},
  year = {2026},
  number = {9},
  url = {https://skillstore.io/skills/byunk-designing-frontend/audits/9},
  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: "designing-frontend security audit report (audit version 9)"
version: "unspecified"
type: report
authors:
  - name: "Byunk"
date-released: "2026-07-23"
url: "https://skillstore.io/skills/byunk-designing-frontend/audits/9"
identifiers:
  - type: other
    value: "skillstore:byunk-designing-frontend:audit:9"
    description: "Skillstore immutable audit report identifier"

Skillstore スコア

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

アーキテクチャ

保守性

コンテンツ

コミュニティ

仕様準拠

作成できるもの

プロダクトダッシュボードを構築する

プロダクト領域に合い、汎用的な SaaS スタイルを避けた、洗練されたダッシュボードを作成します。

マーケティングページを刷新する

平凡なページを、より強い階層、モーション、視覚的な質感を備えた印象的なWeb体験に変えます。

新しいアプリ画面をプロトタイプする

本番向けフロントエンドコードへ変換する前に、具体的な美的方向性を探ります。

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

ランディングセクションを作成する

Use the designing-frontend skill to create a landing section for a finance app. Make it distinctive, accessible, and production ready.

既存コンポーネントを改善する

Use the designing-frontend skill to redesign this component. Keep the data model, improve hierarchy, motion, color, and responsive behavior.

完全なインターフェイスを設計する

Use the designing-frontend skill to build a complete onboarding interface. Define the aesthetic direction, implement the screen, and verify accessibility.

ドメイン特化型システムを作成する

Use the designing-frontend skill to create a visual system for a medical analytics tool. Include layout rules, components, states, and verification notes.

ベストプラクティス

実装を依頼する前に、プロダクト領域、対象ユーザー、フレームワーク、アクセシビリティ要件を提供します。
最初のビルド後に、階層、レスポンシブ対応、インタラクション、アクセシビリティの検証を依頼します。
ブランドやユーザーの期待がすでに分かっている場合は、具体的な美的方向性を指定します。

回避

ドメインコンテキストなしに、汎用的なモダンデザインを依頼しないでください。
アニメーション、コントラスト、高密度なレイアウトを追加する際に、アクセシビリティチェックを省略しないでください。
無関係なプロジェクト間で、同じフォント、グラデーション、レイアウトパターンを使い回さないでください。

よくある質問

このスキルはフロントエンドコードを書きますか？

はい。本番品質の HTML、CSS、JavaScript、React、Vue、または類似のフロントエンドコードを書くようにモデルをガイドします。

すぐに使えるデザインアセットは含まれていますか？

いいえ。デザインと実装のガイダンスを提供しますが、フォント、画像、テンプレートは同梱していません。

アクセシビリティに役立ちますか？

はい。ワークフローには、特にインタラクション、コントラスト、階層に関する検証中のアクセシビリティ確認が含まれます。

ランディングページ専用ですか？

いいえ。コンポーネント、ページ、アプリケーション画面、完全なフロントエンド体験に適用できます。

どのツールがこのスキルをサポートしていますか？

レポートでは、Claude、Codex、Claude Code のサポートが記載されています。

ユーザーはどのようなコンテキストを提供すべきですか？

対象ユーザー、目的、フレームワーク、ブランド上の制約、アクセシビリティ要件、避けたいスタイルの例を提供してください。

開発者情報

作成者

Byunk

ライセンス

MIT

Skillstore リビジョン

バージョンに関する注意

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

リポジトリ

https://github.com/Byunk/claude-code-essentials/tree/main/essentials/skills/designing-frontend

参照

a39a91716eadede5f4cdefd78178fed4e837a128

メンテナンスの新しさ

2026/7/24

利用状況

10 ダウンロード · 173 閲覧

ファイル構成

📄 SKILL.md