Skills ZICQ category：Design distinctive-frontend

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.

458 installs

Official URL：skills.sh

What this skill does

Intro in this page language first. The official description stays in its original wording; we do not rewrite SKILL.md.

What it does

When to use it

The official description does not include a separate “Use when”. Per the spec, agents activate this skill when the task matches keywords in that description.

How agents load it

Per Agent Skills progressive disclosure: name and description load at startup (~100 tokens); the full SKILL.md body loads when the skill activates; scripts/, references/, and assets/ load only as needed. This file's sections: distinctive-frontend; Decision tree; Install command; Invoke after install; What it does; When NOT to use.

File analysis

File analysis: instruction-only skill (SKILL.md). The agent loads the full body when activated.

distinctive-frontendDecision treeInstall commandInvoke after installWhat it doesWhen NOT to use

Source category：skills.sh agent-skill

Sources & links

Market sources：skills.sh

Full package on GitHub

OSS Skill ranking

SKILL.md & Agent activation

Official spec ↗

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.

DiscoverThe client exposes names and descriptions to the agent.
ActivateYour request or the task context selects the skill and loads its instructions.
Load resourcesReferenced scripts, documentation and assets are used when needed.

Invocation syntax and available tools depend on your Agent client. Client integration guide ↗

Install this skill

Skills CLI ↗

Choose the target agent and installation scope, keep referenced package files, then verify the skill appears in the client's catalog.

Ask your Agent to install

Copy these instructions to a compatible agent and confirm the target directory matches your client.

Install the agent skill "distinctive-frontend" into my project. The full SKILL.md and official description are at https://zicq.com/en/skills/skl-4ede01e1b81419d4-Distinctive-Frontend.html
Save it as .cursor/skills/distinctive-frontend/SKILL.md or .claude/skills/distinctive-frontend/SKILL.md and keep the frontmatter name and description exactly as-is.

Full package on GitHub ↗

Install from the terminal · Skills CLI

Requires Node.js and npx. First inspect the repository's skill list to confirm the name.

npx skills add 'https://github.com/podo/design-agent-skills' --list

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

The CLI lets you choose the agent interactively. The default scope is the project; use -g for user scope. Confirm package availability with the discovery command, then use npx skills list to inspect installed skills.

SKILL.md source Copy freely; the source file is unchanged

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

Readable layout

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

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

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)

Related skills

Design

Distinctive Frontend

What this skill does

What it does

When to use it

How agents load it

File analysis

SKILL.md & Agent activation

Install this skill

distinctive-frontend

Decision tree

Install command

Invoke after install

What it does

When NOT to use

Related skills

Automation Workflows

Ui Ux Pro Max

Frontend Design

N8n Workflow Automation