mcpbeat

Top Design Agent Skill

| Create award-winning, immersive web experiences at the level of Awwwards-featured agencies. Use when the user mentions "premium website", "portfolio site", "scroll animations", "Awwwards quality", or "brand experience". Covers dramatic typography, purposeful motion, scroll-based composition, and performance-optimized animation. For foundational UI, see refactoring-ui. For type selection, see web-typography. Trigger with 'top', 'design'.

10k tokens
context cost
the whole folder, loaded on every use
1
files
instructions only
0
copies elsewhere
how many repositories repackaged it
59
stars on the repo
on the repository, not the skill itself

Install

one command, takes just this skill from the repository
npx skills add https://github.com/ComeOnOliver/skillshub --skill top-design

Other skills for the same job

different authors, same section of the catalogue
Lint Check
by microsoft
vendor

Run lint on affected packages, parse errors, and auto-fix common issues (design tokens, React.FC, SSR safety, import restrictions)

567 tokens
Azldev Build Component
by microsoft
vendor

Read this before building a component or diagnosing a build failure; do not guess build flags or the inner loop. Explains how to build, iterate on, and debug an azldev component, covering comp build flags (local-repo, preserve-buildenv), the render/build/test inner loop, diff-sources, and disabling a failing %check via check.skip. Triggers include build component, build failed, build error, inner loop, preserve buildenv, local repo, disable check.

824 tokens
Cupynumeric Parallel Data Load
by NVIDIA
vendor

Load a sharded, on-disk dataset (sharded .npy, Parquet/Arrow, raw binary, sharded HDF5, custom layouts) into a distributed cuPyNumeric ndarray via a manual partition + leaf @task launch with CPU/OMP/GPU variants. Use when no single-call loader fits, including when per-shard row counts differ across files. Prefer cupynumeric.load or legate.io.hdf5.from_file when they apply.

19k tokens scripts
Wp Phpstan
by WordPress
vendor

Use when configuring, running, or fixing PHPStan static analysis in WordPress projects (plugins/themes/sites): phpstan.neon setup, baselines, WordPress-specific typing, and handling third-party plugin classes.

5k tokens scripts
Unity Script
by Besty0728

Create, read, and analyze C# scripts — create, read, replace, append, search, rename, move, and delete scripts, plus compile feedback. Use when authoring or editing C# code, searching across scripts, refactoring file layout, or checking compile errors, even if the user just says "写个脚本" or "改代码". 对 C# 脚本进行增删改查与分析(创建、读取、替换、追加、搜索、重命名、移动、删除脚本,以及编译反馈);当用户要编写或编辑 C# 代码、跨脚本搜索、重构文件布局、或检查编译错误时使用。

3k tokens
Ss Lint
by bitjaru

Quick automated lint — detects common design system violations in seconds

874 tokens
MD Slides
by borghei

> Convert markdown into a self-contained HTML slide deck with layouts, speaker notes, keyboard navigation, and a content-density linter. Use when building a deck from markdown, cutting an overloaded deck, or timing a talk.

20k tokens scripts
HTML Artifact
by notque

| Generate rich self-contained HTML artifacts instead of markdown. Auto-detects artifact shape (spec, code-review, prototype, report, editor, data-viz, diagram, deck) and loads shape-specific patterns. Bundles Birchline design system with 4 theme presets. Use for "make HTML", "as HTML", "HTML artifact", or auto-injected by router when output benefits from rich visualization.

93k tokens scripts

How to use it

Copy the folder

Take comeonoliver/top-design from the repository into ~/.claude/skills for personal use, or into .claude/skills inside a project.

Check the name does not clash

The agent identifies a skill by the name field in its header. Two skills with the same name cannot sit side by side — one of them will be ignored.