2. skills.md

🔷 MODULE 1: Introduction to skills.md

✅ Definition

skills.md (or SKILL.md) is a Markdown file that teaches AI how to perform a task properly.

• It is not just a prompt

• It is a reusable instruction system

👉 It tells AI:

• What to do

• How to do

• When to do

✅ Purpose

• Reduce repeated prompting

• Improve output quality

• Maintain consistency

• Enable reusable workflows

👉 Key idea:

Skills package expertise into reusable instructions that AI loads when needed (Flex)

✅ Why it is powerful

Without skills:

• You write long prompts every time

• Results are inconsistent

With skills:

• Instructions are pre-defined

• AI follows structured workflow

• Output becomes professional

✅ Simple Analogy

• Prompt = Asking a chef to cook

• Skill = Giving recipe + rules + style

---

🔷 MODULE 2: Real-Life Example

🎯 Use Case: Next-Gen Corporate Consulting Website

We compare:

❌ WITHOUT skills.md

Prompt:

Create a modern website for a corporate consulting company.
Include homepage, services, and contact page.
Use HTML, CSS.

Output Problems:

• Generic design

• Same fonts (Arial, Roboto)

• No brand identity

• Basic layout

👉 Reason: AI chooses “safe default design”

---

✅ WITH skills.md

Now AI uses a frontend-design skill

👉 This skill enforces:

• Strong typography

• Unique layout

• Design principles

• Production-ready UI (Awesome MCP Servers)

---

🔷 Step-by-Step Workflow

Step 1: Define Company Concept

Example:

• Name: Nexora Consulting

• Type: AI-driven corporate consulting

• Audience: Fortune 500 companies

• Tone: Premium + futuristic

---

Step 2: Prompt WITH skill

Using frontend-design skill, create a high-end website for:

Company: Nexora Consulting
Focus: AI-powered business transformation
Tone: Luxury + futuristic
Pages:
- Homepage
- Services
- Case Studies
- Contact

Include:
- Unique typography
- Dark premium theme
- Smooth animations
- Non-generic layout

---

✅ Output Difference

Feature	Without Skill	With Skill
Design	Generic	Premium
Fonts	Default	Custom
Layout	Basic	Creative
UX	Average	High-end
Branding	Weak	Strong

---

🔷 MODULE 3: What is inside SKILL.md

A typical file:

---
name: frontend-design
description: Create high-quality frontend UI with strong design principles
---

# Frontend Design Skill

## Overview
Create premium UI designs.

## When to Use
- Website design
- Landing pages
- Dashboards

## Rules
- Avoid default fonts
- Use strong color themes
- Focus on UX

👉 Important:

• YAML part controls when skill activates

• Content controls how AI behaves (Agent Layer)

---

🔷 MODULE 4: Download Official Skill

Here is the official frontend design skill:

👉 Download SKILL.md file

Steps:

1. Open link

2. Copy SKILL.md

3. Save in folder:

/skills/frontend-design/SKILL.md

4. Load into AI tool (Cursor / Claude / Codex)

---

🔷 MODULE 5: Teaching Flow (for your class)

🧑‍🏫 Session Plan

Part 1: Concept (15 min)

• Explain prompt vs skill

• Show analogy

Part 2: Demo (20 min)

• Run without skill

• Run with skill

• Compare outputs

Part 3: Hands-on (30 min)

Students create:

• Consulting website prompt

• Modify tone (luxury / minimal / futuristic)

Part 4: Assignment

• Create own skill for:

  • Resume generator

  • Blog writer

  • Portfolio builder

---

🔷 MODULE 6: Key Takeaways

• skills.md = reusable intelligence

• Reduces prompt complexity

• Improves design quality

• Essential for vibe coding

---

🔷 BONUS: Simple Explanation for Students

👉 One line:

“Skill is a permanent prompt that AI remembers and applies automatically.”

---

Demo