스킬 frontend-dev

📦

frontend-dev

Name: frontend-dev
Author: MiniMax-AI

낮은 위험 🌐 네트워크 접근⚙️ 외부 명령어🔑 환경 변수📁 파일 시스템 액세스⚡ 스크립트 포함

AI 미디어로 프론트엔드 페이지 구축

전문적인 웹 페이지를 만들려면 디자인, 미디어, 애니메이션, 카피라이팅 능력이 필요합니다. 이 스킬은 다섯 가지 기능을 하나의 워크플로우로 결합하여, AI가 생성한 이미지, 비디오, 음악, 내레이션, 스크롤 애니메이션을 포함한 완성된 페이지를 생성합니다.

지원: Claude Codex Code(CC)

🥉 75 브론즈

스킬 ZIP 다운로드

Claude에서 업로드

설정 → 기능 → 스킬 → 스킬 업로드로 이동

토글을 켜고 사용 시작

테스트해 보기

"frontend-dev" 사용 중입니다. 피트니스 앱을 위한 히어로 이미지와 기능 섹션이 포함된 랜딩 페이지를 구축하세요

예상 결과:

React 컴포넌트가 포함된 index.html 생성
MiniMax 이미지 API를 통해 히어로 이미지 생성
기능 카드를 위한 Framer Motion 스크롤 애니메이션 생성
반응형 레이아웃이 적용된 Tailwind CSS 스타일링 생성

"frontend-dev" 사용 중입니다. AI 비디오 데모와 배경 음악이 포함된 제품 페이지를 만드세요

예상 결과:

비디오 히어로 섹션이 포함된 Next.js 페이지 생성
푸시인 카메라 이동이 적용된 MiniMax 비디오 API를 통한 AI 비디오 클립 생성
MiniMax 음악 API를 통한 앰비언트 배경 음악 생성
스크롤 트리거 콘텐츠 표시를 위한 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 내레이션 튜토리얼, 생성된 배경 음악, 제품 쇼케이스 이미지가 포함된 데모 페이지를 필요로 합니다. 이 스킬은 모든 미디어를 생성하고 페이지를 조립합니다.

이 프롬프트를 사용해 보세요

기본 랜딩 페이지

커피 구독 서비스를 위한 랜딩 페이지를 구축하세요. 히어로 섹션, 기능 그리드, 가격 카드를 포함하세요. React와 Tailwind CSS를 사용하세요.

AI 이미지가 포함된 페이지

'열대 해변 일몰', '산마을 아침', '밤의 도시 스카이라인' 목적지에 대한 AI 생성 히어로 이미지가 포함된 여행 블로그 홈페이지를 만드세요. 페이드인 애니메이션을 위해 Next.js와 Framer Motion을 사용하세요.

멀티미디어 마케팅 사이트

AI 생성 히어로 비디오, 배경 음악, 내레이션 제품 데모 섹션이 포함된 제품 런칭 페이지를 구축하세요. 기능 카드에 AI 이미지를 사용하세요. GSAP을 사용한 스크롤 트리거 애니메이션을 포함하세요. 순수 HTML로 배포하세요.

대화형 아트 설치 페이지

히어로로 p5.js 생성형 아트가 포함된 대화형 아트 갤러리 페이지를 만드세요. 사용자가 아트를 조정할 수 있는 파라미터 제어 패널을 포함하세요. AI가 생성한 앰비언트 배경 음악을 추가하세요. Vue와 시네마틱 스크롤 애니메이션을 사용하세요.

모범 사례

미디어 생성 기능을 사용하기 전에 MINIMAX_API_KEY와 MINIMAX_API_BASE 환경 변수를 설정하세요
AI 미디어 생성 시 더 높은 품질의 결과를 얻으려면 구체적이고 상세한 프롬프트를 사용하세요
AI 출력 품질은 일정하지 않으므로 프로덕션에 배포하기 전에 생성된 미디어 자산을 테스트하세요

피하기

API 키를 버전 관리에 커밋하지 마세요. 항상 환경 변수를 사용하세요
품질과 적절성을 검토하지 않고 AI 생성 미디어를 사용하지 마세요
API 속도 제한을 초과할 수 있으므로 너무 많은 미디어 자산을 병렬로 생성하지 마세요

자주 묻는 질문

어떤 AI 도구가 이 스킬을 지원하나요?

이 스킬은 Claude, Codex, Claude Code와 함께 작동합니다. 세 AI 도구 모두 프론트엔드 생성과 MiniMax API 호출을 오케스트레이션할 수 있습니다.

MiniMax API 키가 필요한가요?

네, 미디어 생성 기능(이미지, 비디오, 음악, 텍스트 음성 변환)에는 MINIMAX_API_KEY가 필요합니다. 사용 전에 환경 변수로 설정하세요. 프론트엔드 디자인 기능은 API 키 없이도 작동합니다.

어떤 프레임워크를 지원하나요?

이 스킬은 순수 HTML, Next.js와 React, Nuxt와 Vue, SvelteKit과 Svelte, 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