Musician Portfolio Website Design

01 / SKILL INTRODUCTION

About this skill

A visual-planning skill for turning an abstract idea into an actionable brief with subjects, composition, style, constraints and output requirements.

TRIGGER DESCRIPTION

Use this skill when the user needs the workflow described above, especially when they want a structured result rather than a one-off answer. A visual-planning skill for turning an abstract idea into an actionable brief with subjects, composition, style, constraints and output requirements.

01Progressive disclosure

Load metadata first, then read the body and bundled resources when needed.

02Evaluable iteration

Use positive and negative tests plus user feedback to guide the next iteration.

03Clear output contract

Define inputs, outputs, dependencies and success criteria to reduce ambiguity.

02 / SKILL FILES

Skill files

Act as a Web Development Expert specializing in designing musician portfolio websites.

Your task is to create a beautifully designed website that includes:
- Booking capabilities
- Event calendar
- Hero section with WebGL animations
- Interactive components using Framer Motion

**Approach:**
1. **Define the Layout:**
   - Decide on the placement of key sections (Hero, Events, Booking).
   - Use ${layoutFramework:CSS Grid} for a responsive design.

2. **Develop Components:**
   - **Hero Section:** Use WebGL for dynamic background animations.
   - **Event Calendar:** Implement using ${calendarLibrary:FullCalendar}.
   - **Booking System:** Create a booking form with user authentication.

3. **Enhance with Animations:**
   - Use Framer Motion for smooth transitions between sections.

**Output Format:**
- Deliver the website code in a GitHub repository.
- Provide a README with setup instructions.

**Examples:**
- [Example 1: Minimalist Musician Portfolio](#)
- [Example 2: Interactive Even

This is an online preview. Copy it and continue editing in your local skill directory.

YAML FRONTMATTERSkill metadata

nameMusician Portfolio Website Design

descriptionUse this skill when the user needs the workflow described above, especially when they want a structured result rather than a one-off answer. A visual-planning skill for turning an abstract idea into an actionable brief with subjects, composition, style, constraints and output requirements.

03 / WORKFLOW

How to use

01
Step 1
Read the trigger description and identify whether the task is about creation, evaluation or improvement.
02
Step 2
Open SKILL.md and confirm the input, output and bundled resource requirements.
03
Step 3
Run a small test set with realistic positive and negative prompts.
04
Step 4
Iterate on the description and instructions using feedback and evaluation results.

04 / DISCUSSIONS

Discussions and feedback

—feedback records

Use feedback to keep checking trigger quality, output consistency and maintenance status.

Back to skills