技能 frontend-dev

📦

frontend-dev

Name: frontend-dev
Author: MiniMax-AI

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

使用 AI 媒体构建前端页面

创建专业网页需要设计、媒体、动画和文案技能。此技能将所有五种能力整合到一个工作流中，生成包含 AI 创建的图片、视频、音乐、配音和滚动动画的完整页面。

支持: Claude Codex Code(CC)

🥉 75 青铜

下载技能 ZIP

在 Claude 中上传

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

开启并开始使用

测试它

正在使用“frontend-dev”。 Build a landing page for a fitness app with hero image and feature sections

预期结果:

Generated: index.html with React components
Generated: hero image via MiniMax image API
Generated: Framer Motion scroll animations for feature cards
Generated: Tailwind CSS styling with responsive layout

正在使用“frontend-dev”。 Create a product page with AI video demo and background music

预期结果:

Generated: Next.js page with video hero section
Generated: AI video clip via MiniMax video API with push-in camera movement
Generated: Ambient background music via MiniMax music API
Generated: GSAP timeline for scroll-triggered content reveals

安全审计

低风险

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 旁白教程、生成背景音乐和产品展示图片的演示页面。该技能可创建所有媒体并组装页面。

试试这些提示

基础落地页

Build a landing page for a coffee subscription service. Include a hero section, features grid, and pricing cards. Use React with Tailwind CSS.

带有 AI 图片的页面

Create a travel blog homepage with AI-generated hero images for destinations: 'tropical beach sunset', 'mountain village morning', 'city skyline at night'. Use Next.js with Framer Motion for fade-in animations.

多媒体营销网站

Build a product launch page with an AI-generated hero video, background music, and a narrated product demo section. Use AI images for feature cards. Include scroll-triggered animations with GSAP. Deploy as pure HTML.

互动艺术装置页面

Create an interactive art gallery page with a p5.js generative art piece as the hero. Include a parameter control panel for users to adjust the art. Add ambient background music generated by AI. Use Vue with cinematic scroll animations.