How do I install the Distinctive Frontend skill?

Run npx skillmds add podo/distinctive-frontend 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 Distinctive Frontend safe to use?

This skill has not completed SkillMD's automated safety review yet. Capability flags: makes network calls. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Distinctive Frontend?

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 Distinctive Frontend free to use?

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

Who published Distinctive Frontend?

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

Distinctive Frontend by podo — Agent Skill

Name: Distinctive Frontend
Rating: 4.2 (5 reviews)
Author: podo

Distinctive Frontend

Generates distinctive interfaces using four themed design systems — Cyberpunk, Brutalist, Vaporwave, and Nordic Minimalism — with pre-configured typography pairings, color systems, and staggered animations. Single skill: distinctive-frontend.

podo c5924ed 2 files · 2.3 KB Updated Sep 9, 2026

File contents

distinctive-frontend

Catalogue stub — full package: Koomook/claude-frontend-skills

Decision tree

Is the package already installed? Check: your agent's skills directory contains distinctive-frontend with content beyond this stub.
- Yes → invoke distinctive-frontend and proceed
- No → go to step 2
Which agent are you on?
- Claude Code → npm install -g @bong/claude-frontend-skills
- Cursor → npm install -g @bong/claude-frontend-skills
- Other → npm install -g @bong/claude-frontend-skills or see GitHub README

Install command

npm install -g @bong/claude-frontend-skills

Invoke after install

Skill name: distinctive-frontend
Trigger phrases: "distinctive frontend", "cyberpunk UI", "brutalist frontend", "vaporwave design", "nordic minimalism"

What it does

Packages four fully-specified design systems in a single skill: Cyberpunk (neon-on-dark, tech typography, glitch effects), Brutalist (high-contrast, raw grid, bold sans), Vaporwave (pastel gradients, retro type, synthwave motion), and Nordic Minimalism (clean whitespace, muted palette, functional sans). Each theme ships with curated typography pairings, a complete color system, and pre-built staggered animation sequences. Choose a theme by name and the skill generates production-ready component code aligned to that aesthetic.

When NOT to use

When you need production-safe, conservative design (these themes are opinionated and experimental — not suitable for enterprise SaaS or regulated industries without significant adaptation)
When you need to mix themes or create a hybrid aesthetic (each theme is self-contained and opinionated)

---name: distinctive-frontenddescription: Generates distinctive interfaces using four themed design systems — Cyberpunk, Brutalist, Vaporwave, and Nordic Minimalism — with pre-configured typography pairings, color systems, and staggered animations. Single skill: distinctive-frontend.--- # distinctive-frontend > Catalogue stub — full package: [Koomook/claude-frontend-skills](https://github.com/Koomook/claude-frontend-skills) ## Decision tree 1. **Is the package already installed?** Check: your agent's skills directory contains `distinctive-frontend` with content beyond this stub. - Yes → invoke `distinctive-frontend` and proceed - No → go to step 2 2. **Which agent are you on?** - Claude Code → `npm install -g @bong/claude-frontend-skills` - Cursor → `npm install -g @bong/claude-frontend-skills` - Other → `npm install -g @bong/claude-frontend-skills` or see [GitHub README](https://github.com/Koomook/claude-frontend-skills) ## Install command ```bash npm install -g @bong/claude-frontend-skills ``` ## Invoke after install - Skill name: `distinctive-frontend` - Trigger phrases: "distinctive frontend", "cyberpunk UI", "brutalist frontend", "vaporwave design", "nordic minimalism" ## What it does Packages four fully-specified design systems in a single skill: Cyberpunk (neon-on-dark, tech typography, glitch effects), Brutalist (high-contrast, raw grid, bold sans), Vaporwave (pastel gradients, retro type, synthwave motion), and Nordic Minimalism (clean whitespace, muted palette, functional sans). Each theme ships with curated typography pairings, a complete color system, and pre-built staggered animation sequences. Choose a theme by name and the skill generates production-ready component code aligned to that aesthetic. ## When NOT to use - When you need production-safe, conservative design (these themes are opinionated and experimental — not suitable for enterprise SaaS or regulated industries without significant adaptation) - When you need to mix themes or create a hybrid aesthetic (each theme is self-contained and opinionated)

Frequently asked questions