frontend-dev

Files (98)

• SKILL.md
• ArsenalSC-OFL.txt · canvas-fonts/
• ArsenalSC-Regular.ttf · canvas-fonts/
• BigShoulders-Bold.ttf · canvas-fonts/
• BigShoulders-OFL.txt · canvas-fonts/
• BigShoulders-Regular.ttf · canvas-fonts/
• Boldonse-OFL.txt · canvas-fonts/
• Boldonse-Regular.ttf · canvas-fonts/
• BricolageGrotesque-Bold.ttf · canvas-fonts/
• BricolageGrotesque-OFL.txt · canvas-fonts/
• BricolageGrotesque-Regular.ttf · canvas-fonts/
• CrimsonPro-Bold.ttf · canvas-fonts/
• CrimsonPro-Italic.ttf · canvas-fonts/
• CrimsonPro-OFL.txt · canvas-fonts/
• CrimsonPro-Regular.ttf · canvas-fonts/
• DMMono-OFL.txt · canvas-fonts/
• DMMono-Regular.ttf · canvas-fonts/
• EricaOne-OFL.txt · canvas-fonts/
• EricaOne-Regular.ttf · canvas-fonts/
• GeistMono-Bold.ttf · canvas-fonts/
• GeistMono-OFL.txt · canvas-fonts/
• GeistMono-Regular.ttf · canvas-fonts/
• Gloock-OFL.txt · canvas-fonts/
• Gloock-Regular.ttf · canvas-fonts/
• IBMPlexMono-Bold.ttf · canvas-fonts/
• IBMPlexMono-OFL.txt · canvas-fonts/
• IBMPlexMono-Regular.ttf · canvas-fonts/
• IBMPlexSerif-Bold.ttf · canvas-fonts/
• IBMPlexSerif-BoldItalic.ttf · canvas-fonts/
• IBMPlexSerif-Italic.ttf · canvas-fonts/
• IBMPlexSerif-Regular.ttf · canvas-fonts/
• InstrumentSans-Bold.ttf · canvas-fonts/
• InstrumentSans-BoldItalic.ttf · canvas-fonts/
• InstrumentSans-Italic.ttf · canvas-fonts/
• InstrumentSans-OFL.txt · canvas-fonts/
• InstrumentSans-Regular.ttf · canvas-fonts/
• InstrumentSerif-Italic.ttf · canvas-fonts/
• InstrumentSerif-Regular.ttf · canvas-fonts/
• Italiana-OFL.txt · canvas-fonts/
• Italiana-Regular.ttf · canvas-fonts/
• JetBrainsMono-Bold.ttf · canvas-fonts/
• JetBrainsMono-OFL.txt · canvas-fonts/
• JetBrainsMono-Regular.ttf · canvas-fonts/
• Jura-Light.ttf · canvas-fonts/
• Jura-Medium.ttf · canvas-fonts/
• Jura-OFL.txt · canvas-fonts/
• LibreBaskerville-OFL.txt · canvas-fonts/
• LibreBaskerville-Regular.ttf · canvas-fonts/
• Lora-Bold.ttf · canvas-fonts/
• Lora-BoldItalic.ttf · canvas-fonts/
• Lora-Italic.ttf · canvas-fonts/
• Lora-OFL.txt · canvas-fonts/
• Lora-Regular.ttf · canvas-fonts/
• NationalPark-Bold.ttf · canvas-fonts/
• NationalPark-OFL.txt · canvas-fonts/
• NationalPark-Regular.ttf · canvas-fonts/
• NothingYouCouldDo-OFL.txt · canvas-fonts/
• NothingYouCouldDo-Regular.ttf · canvas-fonts/
• Outfit-Bold.ttf · canvas-fonts/
• Outfit-OFL.txt · canvas-fonts/
• …and 38 more

SKILL.md (first lines)

# Frontend Studio

Build complete, production-ready frontend pages by orchestrating 5 specialized capabilities: design engineering, motion systems, AI-generated assets, persuasive copy, and generative art.

## Invocation

```
/frontend-dev <request>
```

The user provides their request as natural language (e.g. "build a landing page for a music streaming app").

## Skill Structure

```
frontend-dev/
├── SKILL.md                      # Core skill (this file)
├── scripts/                      # Asset generation scripts
│   ├── minimax_tts.py            # Text-to-speech
│   ├── minimax_music.py          # Music generation
│   ├── minimax_video.py          # Video generation (async)
│   └── minimax_image.py          # Image generation
├── references/                   # Detailed guides (read as needed)
│   ├── minimax-cli-reference.md  # CLI flags quick reference
│   ├── asset-prompt-guide.md     # Asset prompt engineering rules
│   ├── minimax-tts-guide.md      # TTS usage & voices
│   ├── minimax-music-guide.md    # Music prompts & lyrics format
│   ├── minimax-video-guide.md    # Camera commands & models
│   ├── minimax-image-guide.md    # Ratios & batch generation
│   ├── minimax-voice-catalog.md  # All voice IDs
│   ├── motion-recipes.md         # Animation code snippets
│   ├── env-setup.md              # Environment setup
│   └── troubleshooting.md        # Common issues
├── templates/                    # Visual art templates
│   ├── viewer.html               # p5.js interactive art base
│   └── generator_template.js     # p5.js code reference
└── canvas-fonts/                 # Static art fonts (TTF + licenses)
```

## Project Structure

### Assets (Universal)

All frameworks use the same asset organization:

```
assets/
├── images/
│   ├── hero-landing-1710xxx.webp
│   ├── icon-feature-01.webp
│   └── bg-pattern.svg
├── videos/
│   ├── hero-bg-1710xxx.mp4
│   └── demo-preview.mp4
└── audio/
    ├── bgm-ambient-1710xxx.mp3
    └── tts-intro-1710xxx.mp3
```

**Asset naming:** `{type}-{descriptor}-{timestamp}.{ext}`

### By Framework

| Framework | Asset Location | Component Location |
|-----------|---------------|-------------------|
| **Pure HTML** | `./assets/` | N/A (inline or `./js/`) |
| **React/Next.js** | `public/assets/` | `src/components/` |
| **Vue/Nuxt** | `public/assets/` | `src/components/` |
| **Svelte/SvelteKit** | `static/assets/` | `src/lib/components/` |
| **Astro** | `public/assets/` | `src/components/` |

### Pure HTML

```
project/
├── index.html
├── assets/
│   ├── images/
│   ├── videos/
│   └── audio/
├── css/
│   └── styles.css
└── js/
    └── main.js           # Animations (GSAP/vanilla)
```

### React / Next.js

```
project/
├── public/assets/        # Static assets
├── src/
│   ├── components/
│   │   ├── ui/           # Button, Card, Input
│   │   ├── sections/     # Hero, Features, CTA
│   │   └── motion/       # RevealSection, StaggerGrid
│   ├── lib/
│   ├── styles/
│   └── app/              # Pages
└── package.json
```

### Vue / Nuxt

```
project/
├── public/assets/
├── src/                  # or root for Nuxt
│   ├── components/
│   │   ├── ui/
│   │   ├── sections/
│   │   └── motion/
│   ├── composables/      # Shared logic
│   ├── pages/
│   └── assets/           # Processed assets (optional)
└── package.json
```

### Astro

From vibeeval/vibecosystem, MIT.

More from vibeeval/vibecosystem