⏳ This skill is pending AI review.
Scores will appear once the review pipeline completes.
hyperplasma
Ask the user which visual design style, font pairing, and animation set to use before designing or building any website, landing page, dashboard, web app, portfolio, or UI, and describe each option so they can choose. Use this skill whenever the user asks to build, design, redesign, mock up, or restyle a site or interface and has NOT already named a style, fonts, or animations. Also use when they say "pick a style", "what design should I use", "give me design options", "which fonts", "font pairing", "which animations", "add motion", "glassmorphism or something else", or want to browse aesthetics, typography, or transitions. Contains 301 UI design styles, 400 heading+body font pairings, and 500 animations/transitions (Framer Motion, GSAP, CSS, Three.js/R3F, shaders), each with a one-line description.
Choose how to use this skill
You do not need every option. Choose the path your AI client supports. The stable page stays the same; versioned files are immutable.
1. Native installer
This listing has no registered native installer command. Use the complete package or source fallback below, depending on what your client supports.
Do not guess an installer command or replace an existing version without reviewing the diff.
2. Complete package recommended
Download the ZIP when available. It includes SKILL.md plus the references, security notes and version metadata.
No complete ProSkills package is published for this listing yet.3. Prompt-only
Copy the prompt above when the agent can read the stable page or when you want to adopt the workflow without installing a skill.
Need only the instruction file?
Download SKILL.md only if your client requires a single file. The complete ZIP is safer for a full installation because it preserves the references and release context.
No path installs or executes anything by itself. Your agent still needs access to the project files. Before updating, compare the installed version and review the diff.
// RATINGS
Not yet listed on ClawHub or SkillsMP
// README
HYPERPLASMA
An agent skill that stops your AI from building the same generic website every time.
Before it writes a single line of UI code, your agent asks you to pick a design style, a font pairing, and an animation set, and describes every option so you can choose fast.
What's inside
| Catalogue | Source entries | Unique entries | Notes |
|---|---|---|---|
| Design styles | 301 | 239 | Glassmorphism, neo-brutalism, aurora, bento, retro OS, sci-fi HUD, art movements, textures, SaaS defaults |
| Font pairings | 400 | 206 | 15 groups (SaaS, dev, luxury, wellness, fintech, gaming...), availability flags, fallbacks |
| Animations | 500 | 203 | Framer Motion, GSAP, native CSS, Three.js/R3F, shaders, route transitions, micro-gestures |
Nothing was dropped: every repeated ID is mapped to its canonical entry in a 99-duplicate-map.md / 00-duplicate-map.md file, so "style 271" or "animation 476" still resolves.
How it works
You: build me a portfolio site
Agent: What are you building, and who is it for? (only if unclear)
You: ML engineer portfolio for campus placements
Agent: 1. Glassmorphism - frosted panels, background blur ...
2. Bento Grid - modular rounded compartments ...
3. Terminal Dashboard - monospace, status chips ...
4. Neo-Brutalism - hard shadows, thick strokes ...
5. Cyberpunk - neon, HUD panels ...
Which one (number), or a different batch / mix two / you choose?
You: 1
Agent: Fonts: 1. Plus Jakarta Sans + Inter ... Which pair?
You: 1
Agent: Motion: 1. 3D Tilt [FM] ... pick up to 4, or subtle / standard / cinematic
You: standard
Agent: Going with Glassmorphism + Plus Jakarta/Inter + tilt, reveal, transition. Building...
One question per message. Say "surprise me" at any point and it picks a coherent trio.
Install
Option 1: any agent, one command (recommended)
Uses the open SKILL.md format, supported by Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, Roo Code, Windsurf and 30+ other agents via the skills CLI.
npx skills add gaur-avvv/HyperPlasma-Skills
Target one agent or install globally:
npx skills add gaur-avvv/HyperPlasma-Skills -a claude-code
npx skills add gaur-avvv/HyperPlasma-Skills -g -a codex -a cursor -y
(Replace gaur-avvv with your GitHub username/org if you fork it.)
Option 2: the bundled installer
git clone https://github.com/gaur-avvv/HyperPlasma-Skills.git
cd HyperPlasma-Skills
bash install.sh --agent claude # ~/.claude/skills/hyperplasma
bash install.sh --agent codex --project # ./.codex/skills/hyperplasma
bash install.sh --agent all # every supported agent, user-level
Windows (PowerShell): ./install.ps1 -Agent claude
| Agent | --agent | User-level path | Project path (--project) |
|---|---|---|---|
| Claude Code | claude | ~/.claude/skills/hyperplasma | .claude/skills/hyperplasma |
| Codex CLI | codex | ~/.codex/skills/hyperplasma | .codex/skills/hyperplasma |
| Cursor | cursor | ~/.cursor/skills/hyperplasma | .cursor/skills/hyperplasma |
| Gemini CLI | gemini | ~/.gemini/skills/hyperplasma | .gemini/skills/hyperplasma |
| GitHub Copilot | copilot | n/a | .github/skills/hyperplasma |
| Any other dir | --target <dir> | custom | custom |
Option 3: Claude.ai / Claude Desktop
Zip the folder skills/hyperplasma (the zip must contain the hyperplasma/ folder with SKILL.md inside) and upload it under Settings > Capabilities > Skills.
Option 4: agents without skill support (rules / instructions files)
Copies the skill to .hyperplasma/ in your project and adds a short rule pointing to it.
bash install.sh --rules cursor # .cursor/rules/hyperplasma.mdc
bash install.sh --rules windsurf # .windsurf/rules/hyperplasma.md
bash install.sh --rules copilot # .github/copilot-instructions.md (appended)
bash install.sh --rules gemini # GEMINI.md (appended)
bash install.sh --rules agents # AGENTS.md (appended; Codex, Amp, Jules, Zed, etc.)
Ready-made snippets are in adapters/. For a raw API or custom agent, paste adapters/system-prompt.md into the system prompt and make the references/ folder readable by a file tool.
Repo layout
hyperplasma/
├── skills/hyperplasma/
│ ├── SKILL.md # workflow (agent reads this first)
│ └── references/
│ ├── styles/ # 301 design styles (10 category files + duplicate map)
│ ├── fonts/pairings.md # 400 font pairings (groups A-O)
│ └── motion/ # 500 animations (11 files + tokens + duplicate map)
├── adapters/ # rule snippets for non-skill agents
├── scripts/validate.py # checks every ID resolves (runs in CI)
├── install.sh / install.ps1
└── .github/workflows/validate.yml
The agent loads SKILL.md (about 165 lines) and then only the one or two reference files it needs, so context stays small.
Customize
- Add your own styles, fonts or animations as new
- **ID. Name** - descriptionlines in the matching file, then runpython3 scripts/validate.py. - Change the quick-pick tables at the bottom of
SKILL.mdto match the projects you build most. - Fonts marked with a dagger (free, not on Google Fonts), dollar sign (paid/system) or question mark (unverified) need a license check; the fonts file lists fallbacks.
Credits and notes
Style, font and animation lists were compiled from AI-generated catalogues, then deduplicated and annotated. Some names are informal community terms rather than industry standards, and a few font names
// HOW IT'S BUILT
KEY FILES