技能 frontend-dev

📦

frontend-dev

Name: frontend-dev
Author: MiniMax-AI

低风险 🌐 网络访问⚙️ 外部命令🔑 环境变量📁 文件系统访问⚡ 包含脚本

AIメディアでフロントエンドページを構築

プロフェッショナルなWebページを作成するには、デザイン、メディア、アニメーション、コピーライティングのスキルが必要です。このスキルは5つの機能をひとつのワークフローに統合し、AIで作成した画像、動画、音楽、ナレーション、スクロールアニメーションを備えた完全なページを生成します。

支持: Claude Codex Code(CC)

🥉 75 青铜

下载技能 ZIP

在 Claude 中上传

前往设置 → 功能 → 技能 → 上传技能

开启并开始使用

测试它

正在使用“frontend-dev”。ヒーロー画像と機能セクションを備えたフィットネスアプリのランディングページを構築

预期结果:

生成: index.html（Reactコンポーネント）
生成: MiniMax 画像APIによるヒーロー画像
生成: 機能カード用Framer Motionスクロールアニメーション
生成: レスポンシブレイアウトのTailwind CSSスタイリング

正在使用“frontend-dev”。 AI動画デモとBGM付きプロダクトページを作成

预期结果:

生成: 動画ヒーローセクション付きNext.jsページ
生成: プッシュインカメラ移動付きMiniMax 動画APIによるAI動画クリップ
生成: MiniMax 音楽APIによるアンビエントBGM
生成: スクロールトリガーコンテンツ表示用GSAPタイムライン

安全审计

低风险

v1 • 4/16/2026

Static analysis flagged 1176 patterns with a risk score of 100/100, but evaluation confirms these are overwhelmingly false positives. High-severity 'weak cryptographic algorithm' findings in canvas-fonts/*.txt files are font Open Font License texts, not crypto code. 'Ruby/shell backtick execution' findings in markdown reference files are backtick-enclosed code examples in documentation. 'Windows SAM database' finding at templates/viewer.html:508 is the word 'CUSTOMIZE' containing the substring 'SAM'. regex.exec() in generator_template.js:133 is a standard JavaScript hex color parser. The skill is a legitimate frontend development tool with MiniMax API client scripts that properly use environment variables for API key management. Low risk after review.

已扫描文件

6,379

分析行数

发现项

审计总数

中风险问题 (2)

scripts/minimax_image.py:20 scripts/minimax_music.py:21 scripts/minimax_tts.py:21 scripts/minimax_video.py:21

API key stored in module-level variable

MINIMAX_API_KEY is read from environment at module import time and stored in a module-level variable. While this is standard practice for API clients, the key persists in memory for the process lifetime.

scripts/minimax_image.py:80-119 scripts/minimax_music.py:141-148 scripts/minimax_tts.py:120 scripts/minimax_video.py:130-131

File write operations for generated media

Scripts write generated media (images, video, audio) to local filesystem. This is expected behavior for a media generation tool. File paths are user-controlled via command line arguments.

低风险问题 (6)

canvas-fonts/ArsenalSC-OFL.txt:1-94 canvas-fonts/BigShoulders-OFL.txt:1-94 canvas-fonts/Boldonse-OFL.txt:1-94

False positive: Weak cryptographic algorithm in font license files

Static scanner flagged 'weak cryptographic algorithm' in canvas-fonts/*-OFL.txt files. These are Open Font License text files for bundled fonts, containing no code. Pattern matching triggered on license boilerplate text.

references/minimax-cli-reference.md:1-128 SKILL.md:30-446

False positive: Shell backtick execution in markdown documentation

Static scanner flagged 'Ruby/shell backtick execution' in markdown reference files. These are backtick-enclosed code examples and CLI command documentation, not actual shell execution. The files are reference guides for users.

templates/viewer.html:508

False positive: Windows SAM database reference

Scanner flagged 'Windows SAM database' at templates/viewer.html:508. The actual text is '// PARTICLE SYSTEM - CUSTOMIZE FOR YOUR ALGORITHM'. The substring 'SAM' within 'CUSTOMIZE' triggered a false regex match.

templates/generator_template.js:133

False positive: Python exec() function

Scanner flagged 'Python exec() function' at templates/generator_template.js:133. The actual code is '/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)', which is a standard JavaScript regex method for parsing hex color strings.

canvas-fonts/JetBrainsMono-OFL.txt:81 canvas-fonts/WorkSans-OFL.txt:81

False positive: System reconnaissance in font license files

Scanner flagged 'system reconnaissance' patterns in OFL license files. These contain URLs to font directories and repository links as part of standard Open Font License attribution requirements.

canvas-fonts/JetBrainsMono-OFL.txt:1-5 canvas-fonts/WorkSans-OFL.txt:1-5

False positive: Hardcoded URLs in font license files

Scanner flagged 'hardcoded URL' in canvas-fonts/*.txt license files. These are standard Open Font License repository and directory URLs, not actual network requests or data exfiltration.

风险因素

🌐 网络访问 (70)

⚙️ 外部命令 (841)

🔑 环境变量 (51)

📁 文件系统访问 (16)

references/minimax-cli-reference.md:82 references/minimax-cli-reference.md:114 references/minimax-cli-reference.md:131 references/minimax-music-guide.md:29 references/minimax-tts-guide.md:37 scripts/minimax_image.py:88 scripts/minimax_image.py:80 scripts/minimax_image.py:119 scripts/minimax_image.py:97 scripts/minimax_music.py:141 scripts/minimax_music.py:148 scripts/minimax_music.py:127 scripts/minimax_tts.py:120 scripts/minimax_tts.py:105 scripts/minimax_video.py:131 scripts/minimax_video.py:130

⚡ 包含脚本 (1)

templates/generator_template.js:133

审计者: claude

质量评分

架构

100

可维护性

内容

社区

安全

规范符合性

你能构建什么

マーケティング用ランディングページの作成

スタートアップの創業者が、ヒーロー画像、背景動画、説得力のあるコピーを備えたランディングページを必要としています。このスキルはAIで作成したメディアアセットを使用して完全なページを生成します。

ジェネラティブアートを特徴とするポートフォリオサイト

デザイナーが、インタラクティブなp5.jsジェネラティブアート、スムーズなページトランジション、カスタムタイポグラフィを特徴とするポートフォリオを求めています。このスキルはアートシステムとサイト全体を構築します。

ナレーションと動画付きプロダクトデモ

プロダクトマネージャーが、AIナレーションによるチュートリアル、生成されたBGM、プロダクト紹介画像を備えたデモページを必要としています。このスキルはすべてのメディアを作成し、ページを組み立てます。

试试这些提示

基本的なランディングページ

コーヒーサブスクリプションサービス向けのランディングページを構築してください。ヒーローセクション、機能グリッド、価格カードを含めてください。ReactとTailwind CSSを使用します。

AI画像付きページ

旅行ブログのホームページを作成し、目的地用のAI生成ヒーロー画像を含めてください：「トロピカルビーチの夕日」「山あいの村の朝」「夜の都市スカイライン」。Next.jsとFramer Motionでフェードインアニメーションを使用します。

マルチメディアマーケティングサイト

AI生成ヒーロー動画、BGM、ナレーション付きプロダクトデモセクションを備えたプロダクトローンチページを構築してください。機能カードにはAI画像を使用。GSAPでスクロールトリガーアニメーションを含める。プレーンHTMLとしてデプロイ。

インタラクティブアートインスタレーションページ

p5.jsジェネラティブアートをヒーローとしたインタラクティブアートギャラリーページを作成してください。ユーザーがアートを調整できるパラメータコントロールパネルを含める。AI生成のアンビエントBGMを追加。Vueとシネマティックスクロールアニメーションを使用。

最佳实践

メディア生成機能を使用する前に、MINIMAX_API_KEYとMINIMAX_API_BASE環境変数を設定してください
高品質な結果を得るには、AIメディア生成に具体的で詳細なプロンプトを使用してください
AI出力の品質は変動するため、本番環境にデプロイする前に生成されたメディアアセットをテストしてください

避免

APIキーをバージョン管理にコミットしないでください。必ず環境変数を使用してください
品質や適切さを確認せずにAI生成メディアを使用しないでください
APIレートリミットを超える可能性があるため、メディアアセットの並列生成を避けましょう

常见问题

このスキルをサポートするAIツールは何ですか？

このスキルはClaude、Codex、Claude Codeで動作します。3つのAIツールすべてがフロントエンド生成とMiniMax API呼び出しをオーケストレーションできます。

MiniMax APIキーは必要ですか？

はい、メディア生成機能（画像、動画、音楽、テキスト読み上げ）にはMINIMAX_API_KEYが必要です。使用前に環境変数として設定してください。フロントエンドデザイン機能はそれなしでも動作します。

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

このスキルはプレーンHTML、React（Next.js）、Vue（Nuxt）、Svelte（SvelteKit）、Astroをサポートしています。各フレームワークは適切なアセットおよびコンポーネントディレクトリ構造を使用します。

メディア生成にはどのくらい時間がかかりますか？

画像生成は通常同期的で、数秒で完了します。音楽やテキスト読み上げも同期的ですが、時間がかかる場合があります。動画生成は非同期ポーリングを使用しており、数分かかることがあります。

AIメディア生成なしでこのスキルを使えますか？

はい。フロントエンドデザイン、アニメーション、コピーライティング機能は単独で動作します。MiniMax APIが必要なのはメディア生成スクリプトのみです。プレースホルダー画像や既存のメディアを使用することもできます。

テキスト読み上げで利用可能な音声オプションは何ですか？

このスキルはさまざまなスタイルの男性・女性オプションを含む複数のMiniMax音声をサポートしています。音声IDと特性はminimax-voice-catalogリファレンスファイルに記載されています。

开发者详情

作者

MiniMax-AI

许可证

MIT

仓库

https://github.com/MiniMax-AI/skills/tree/main/skills/frontend-dev

引用

main

文件结构

📁 canvas-fonts/

📄 ArsenalSC-OFL.txt

📄 ArsenalSC-Regular.ttf

📄 BigShoulders-Bold.ttf

📄 BigShoulders-OFL.txt

📄 BigShoulders-Regular.ttf

📄 Boldonse-OFL.txt

📄 Boldonse-Regular.ttf

📄 BricolageGrotesque-Bold.ttf

📄 BricolageGrotesque-OFL.txt

📄 BricolageGrotesque-Regular.ttf

📄 CrimsonPro-Bold.ttf

📄 CrimsonPro-Italic.ttf

📄 CrimsonPro-OFL.txt

📄 CrimsonPro-Regular.ttf

📄 DMMono-OFL.txt

📄 DMMono-Regular.ttf

📄 EricaOne-OFL.txt

📄 EricaOne-Regular.ttf

📄 GeistMono-Bold.ttf

📄 GeistMono-OFL.txt

📄 GeistMono-Regular.ttf

📄 Gloock-OFL.txt

📄 Gloock-Regular.ttf

📄 IBMPlexMono-Bold.ttf

📄 IBMPlexMono-OFL.txt

📄 IBMPlexMono-Regular.ttf

📄 IBMPlexSerif-Bold.ttf

📄 IBMPlexSerif-BoldItalic.ttf

📄 IBMPlexSerif-Italic.ttf

📄 IBMPlexSerif-Regular.ttf

📄 InstrumentSans-Bold.ttf

📄 InstrumentSans-BoldItalic.ttf

📄 InstrumentSans-Italic.ttf

📄 InstrumentSans-OFL.txt

📄 InstrumentSans-Regular.ttf

📄 InstrumentSerif-Italic.ttf

📄 InstrumentSerif-Regular.ttf

📄 Italiana-OFL.txt

📄 Italiana-Regular.ttf

📄 JetBrainsMono-Bold.ttf

📄 JetBrainsMono-OFL.txt

📄 JetBrainsMono-Regular.ttf

📄 Jura-Light.ttf

📄 Jura-Medium.ttf

📄 Jura-OFL.txt

📄 LibreBaskerville-OFL.txt

📄 LibreBaskerville-Regular.ttf

📄 Lora-Bold.ttf

📄 Lora-BoldItalic.ttf

📄 Lora-Italic.ttf

📄 Lora-OFL.txt

📄 Lora-Regular.ttf

📄 NationalPark-Bold.ttf

📄 NationalPark-OFL.txt

📄 NationalPark-Regular.ttf

📄 NothingYouCouldDo-OFL.txt

📄 NothingYouCouldDo-Regular.ttf

📄 Outfit-Bold.ttf

📄 Outfit-OFL.txt

📄 Outfit-Regular.ttf

📄 PixelifySans-Medium.ttf

📄 PixelifySans-OFL.txt

📄 PoiretOne-OFL.txt

📄 PoiretOne-Regular.ttf

📄 RedHatMono-Bold.ttf

📄 RedHatMono-OFL.txt

📄 RedHatMono-Regular.ttf

📄 Silkscreen-OFL.txt

📄 Silkscreen-Regular.ttf

📄 SmoochSans-Medium.ttf

📄 SmoochSans-OFL.txt

📄 Tektur-Medium.ttf

📄 Tektur-OFL.txt

📄 Tektur-Regular.ttf

📄 WorkSans-Bold.ttf

📄 WorkSans-BoldItalic.ttf

📄 WorkSans-Italic.ttf

📄 WorkSans-OFL.txt

📄 WorkSans-Regular.ttf

📄 YoungSerif-OFL.txt

📄 YoungSerif-Regular.ttf

📁 references/

📄 asset-prompt-guide.md

📄 env-setup.md

📄 minimax-cli-reference.md

📄 minimax-image-guide.md

📄 minimax-music-guide.md

📄 minimax-tts-guide.md

📄 minimax-video-guide.md

📄 minimax-voice-catalog.md

📄 motion-recipes.md

📄 troubleshooting.md

📁 scripts/

📄 minimax_image.py

📄 minimax_music.py

📄 minimax_tts.py

📄 minimax_video.py

📁 templates/

📄 generator_template.js

📄 viewer.html

📄 SKILL.md