Catalogskills.sh · 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.

Review advisedVerified hub590 installs

Savant verdict: Review advised

Security analysis or source-hub review identified patterns requiring attention.

Live evaluation

Not evaluated yet. Workspaces can request a live evaluation.

Security assessment

Scan pending.

Structure

  • No license declaredConfirm you may reuse this skill before importing it into your repository.
  • The source hub's security checks flagged this skillGen Agent Trust Hub: warn (This skill instructs the agent to install an unverified third-party NPM package globally, which can lead to the execution of untrusted code during the installation process.); Socket: warn (1 alert: gptAnomaly); Snyk: fail (Risk: CRITICAL · 2 issues)

SKILL.md

---
name: distinctive-frontend
description: |
  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.
triggers:
  - "distinctive frontend"
  - "cyberpunk UI"
  - "brutalist frontend"
  - "vaporwave design"
  - "nordic minimalism"
das:
  type: package
  category: design-systems
  upstream: "https://github.com/Koomook/claude-frontend-skills"
  version: latest
  install: false
---

# 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)