How do I install the Vibe Coding skill?

Run npx skillmds@latest add majiayu000/vibe-coding-3 in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Vibe Coding safe to use?

This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. Capability flags: docs only. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Vibe Coding?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Vibe Coding free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Vibe Coding?

majiayu000 (@majiayu000) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Vibe Coding by majiayu000 — Agent Skill

Name: Vibe Coding
Rating: 4.2 (5 reviews)
Author: majiayu000

File contents

Vibe Coding Skill

Goal

Translate abstract user intents ("Vibes") into concrete implementation details (Design Tokens, CSS, Animation, Tone of Voice).

Flow

1. Vibe Analysis

Input: User Request (e.g., "Make the dashboard feel like a spaceship HUD") Action: Decompose "The Vibe" into technical primitives.

Color Palette: High contrast? Neons? Pastels? Dark mode?
Typography: Monospace? Serif? Sans-Serif? Size/Weight?
Motion: Snappy? Float? ease-in-out? Glitch effects?
Border/Shape: Rounded? Sharp? Glassmorphism? Brutalist?

2. The "Vibe Translator" Persona

Adopt the design-sys-arch persona temporarily.

Step 1: Consult design-tokens.json or CSS variables.
Step 2: Propose a "Vibe Drift" (e.g., changing --primary-color from #007bff to #00ffcc).
Step 3: Generate a quick prototype of the change.

3. Implementation Patterns

A. Cyberpunk / Sci-Fi / HUD

CSS: border: 1px solid var(--neon); box-shadow: 0 0 10px var(--neon);
Font: Monospace (e.g., Fira Code, JetBrains Mono).
Motion: Glitch effects, scanning lines.

B. Clean / Minimal / "Apple"

CSS: backdrop-filter: blur(20px); border-radius: 20px; box-shadow: 0 4px 24px rgba(0,0,0,0.05);
Font: Systematic Sans-Serif (Inter, SF Pro).
Motion: Spring physics, subtle scales.

C. Brutalist / Retro

CSS: border: 3px solid black; box-shadow: 4px 4px 0 black;
Font: Bold headers, distinct serifs.
Motion: No easing, hard cuts.

4. Verification

ASK USER: "Does this match the vibe you were looking for?"
If NO -> Adjuest Intensity (e.g., "More neon", "Less blur").

---name: vibe-coding-3description: Translates high-level aesthetic or behavioral "vibe" requests (e.g., "Make it feel like 90s cyberpunk", "Apple-style minimalism") into concrete code changes (CSS, Animation, Copy).--- # Vibe Coding Skill ## Goal Translate abstract user intents ("Vibes") into concrete implementation details (Design Tokens, CSS, Animation, Tone of Voice). ## Flow ### 1. Vibe Analysis **Input**: User Request (e.g., "Make the dashboard feel like a spaceship HUD") **Action**: Decompose "The Vibe" into technical primitives. * **Color Palette**: High contrast? Neons? Pastels? Dark mode? * **Typography**: Monospace? Serif? Sans-Serif? Size/Weight? * **Motion**: Snappy? Float? ease-in-out? Glitch effects? * **Border/Shape**: Rounded? Sharp? Glassmorphism? Brutalist? ### 2. The "Vibe Translator" Persona Adopt the `design-sys-arch` persona temporarily. * **Step 1**: Consult `design-tokens.json` or CSS variables. * **Step 2**: Propose a "Vibe Drift" (e.g., changing `--primary-color` from `#007bff` to `#00ffcc`). * **Step 3**: Generate a quick prototype of the change. ### 3. Implementation Patterns #### A. Cyberpunk / Sci-Fi / HUD * **CSS**: `border: 1px solid var(--neon); box-shadow: 0 0 10px var(--neon);` * **Font**: Monospace (e.g., Fira Code, JetBrains Mono). * **Motion**: Glitch effects, scanning lines. #### B. Clean / Minimal / "Apple" * **CSS**: `backdrop-filter: blur(20px); border-radius: 20px; box-shadow: 0 4px 24px rgba(0,0,0,0.05);` * **Font**: Systematic Sans-Serif (Inter, SF Pro). * **Motion**: Spring physics, subtle scales. #### C. Brutalist / Retro * **CSS**: `border: 3px solid black; box-shadow: 4px 4px 0 black;` * **Font**: Bold headers, distinct serifs. * **Motion**: No easing, hard cuts. ### 4. Verification * ASK USER: "Does this match the vibe you were looking for?" * If NO -> Adjuest **Intensity** (e.g., "More neon", "Less blur").

Frequently asked questions

Vibe Coding