mcpField
D
distinctive-frontend

distinctive-frontend

github.com/podoDesign & UI29589 installsUpdated 1d ago
Repository

About distinctive-frontend

distinctive-frontend is a skill for generating frontend component code in one of four specified visual styles, for agents building interfaces with a defined aesthetic. Each style includes typography, colors, and animation sequences.

Key features

  1. 01Four predefined design systems
  2. 02Cyberpunk, Brutalist, Vaporwave, Nordic Minimalism styles
  3. 03Curated typography and color systems
  4. 04Prebuilt staggered animations
  5. 05Production-ready component code

Use cases

  1. 01Generate components in a named visual style
  2. 02Apply a consistent palette and typography
  3. 03Add staggered animations to an interface

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/podo/design-agent-skills --skill distinctive-frontend

After installing, type/distinctive-frontendin Claude Code to confirm it loaded.

Bundled filesstub.yaml

Details

From the project README

distinctive-frontend

Catalogue stub — full package: 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

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)

Comments

Markdown supported