frontend-dev

Files (105)

• 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 45 more

SKILL.md (first lines)

# Frontend Studio

Build complete, production-ready frontend pages by orchestrating 4 specialized capabilities: design engineering, motion systems, 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)
├── references/                   # Detailed guides (read as needed)
│   ├── motion-recipes.md         # Animation code snippets
│   ├── performance-checklist.md  # Core Web Vitals, budgets, anti-patterns
│   ├── accessibility-checklist.md # WCAG 2.1 AA, ARIA, keyboard nav
│   ├── landing-page-design.md     # Landing pages: intake, structure, conversion copy, strict visual system
│   ├── motion-showcase.md        # Animate a static design: load-in choreography, story loops, deterministic capture, MP4/GIF export
│   ├── design-principles.md      # Gestalt, hierarchy, composition, balance + self-check checklist
│   ├── color-theory.md           # Color science, harmony schemes, palettes, dark-mode mapping
│   ├── typography-fundamentals.md # Type anatomy, pairing, fluid scales, font performance
│   ├── masters-applied.md        # Bass/Vignelli/Rams/Scher/Brockmann/Carson/Rand as build-time exercises
│   ├── troubleshooting.md        # Common issues
│   ├── taste.md                  # Anti-slop protocol: design-system picking, AI-tell removal (loads taste/ refs)
│   └── taste/                    # Taste references: aesthetics, design systems, motion, redesign protocol
├── 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

```
project/

From hheydaroff/common-agent-skills, MIT.

More from hheydaroff/common-agent-skills