New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

High End Visual Design

by sickn33 in sickn33/agentic-awesome-skills

A skill your agent uses when designing expensive agency-grade interfaces with premium fonts, spatial rhythm, soft depth, and fluid microinteractions.

MITAuto-check passedFrontend & Design

Install High End Visual Design

skills CLI
$ npx skills add sickn33/agentic-awesome-skills --skill high-end-visual-design -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install sickn33/agentic-awesome-skills high-end-visual-design --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/sickn33/agentic-awesome-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/high-end-visual-design .claude/skills/high-end-visual-design && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
high-end-visual-design
GitHub stars
47k
Used in
1 other repo
Token cost
~2.9k tokens
SKILL.md length
1,443 words
Files
1
Skills in repo
1,493
Repo updated
First seen
Licence
MIT

At a glance

A skill your agent uses when designing expensive agency-grade interfaces with premium fonts, spatial rhythm, soft depth, and fluid microinteractions.

  • Works in 8 steps: Meta Information & Core Directive → THE "ABSOLUTE ZERO" DIRECTIVE (STRICT… → THE CREATIVE VARIANCE ENGINE → …
  • Designing expensive agency-grade interfaces with premium fonts
  • SKILL.md covers When to Use, Example, Limitations and 1. Meta Information & Core…, plus 7 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

High End Visual Design is an agent skill from sickn33/agentic-awesome-skills. Use when designing expensive agency-grade interfaces with premium fonts, spatial rhythm, soft depth, and fluid microinteractions.

Its SKILL.md is about 2.9k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Frontend & Design, covering UI design. The repository describes itself as: AAS Core is the local, agent-first control plane for complete catalog discovery, agent-owned selection, stack validation, and planning, backed by 2,400+ agentic skills. Includes… The licence is MIT.

When your agent uses it

  • Designing expensive agency-grade interfaces with premium fonts
  • Fluid microinteractions

Example prompts

  • “/high-end-visual-design”

Workflow steps

8 steps, taken from the step headings in SKILL.md.

  1. Meta Information & Core Directive
  2. THE "ABSOLUTE ZERO" DIRECTIVE (STRICT ANTI-PATTERNS)
  3. THE CREATIVE VARIANCE ENGINE
  4. HAPTIC MICRO-AESTHETICS (COMPONENT MASTERY)
  5. MOTION CHOREOGRAPHY (FLUID DYNAMICS)
  6. PERFORMANCE GUARDRAILS
  7. EXECUTION PROTOCOL
  8. PRE-OUTPUT CHECKLIST

What it can do on your machine

Read from SKILL.md and the folder at commit 680176d. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

High End Visual Design loads about 2.9k tokens when it runs. Until then it costs about 38 tokens; SKILL.md has 1,443 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~38
When it runs · the whole SKILL.md, loaded when a task matches
~2.9k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from sickn33/agentic-awesome-skills at commit 680176d, republished under its MIT licence (© sickn33). 1,443 words, ~2,924 tokens.

Download SKILL.mdSave it as .claude/skills/high-end-visual-design/SKILL.md (or your agent's skills folder).
name
high-end-visual-design
description
Use when designing expensive agency-grade interfaces with premium fonts, spatial rhythm, soft depth, and fluid microinteractions.
category
frontend
risk
safe
source
community
source_repo
Leonxlnx/taste-skill
source_type
community
date_added
2026-04-17
author
Leonxlnx
tags
frontend, visual-design, motion, ui
tools
claude, cursor, codex, antigravity

Agent Skill: Principal UI/UX Architect & Motion Choreographer (Awwwards-Tier)

When to Use

  • Use when the user wants a high-end agency, Awwwards-tier, Apple-like, Linear-like, luxury, or polished visual design.
  • Use when building a landing page, portfolio, SaaS UI, consumer product page, or app surface that needs premium depth and motion.
  • Use when the design must avoid generic fonts, harsh shadows, static layouts, default navbars, and ordinary Bootstrap-style grids.

Example

User request:

Review this interface with @high-end-visual-design, identify the highest-impact design problems, and propose an implementation-ready improvement.

Limitations

  • This skill is visual-design focused; it does not replace brand strategy, conversion research, accessibility validation, or production QA.
  • Premium fonts, icon sets, images, and motion libraries must exist in the target project or be added intentionally before generated code is used.
  • Avoid applying luxury motion and heavy visual treatments to constrained dashboards, regulated products, or low-performance environments.

1. Meta Information & Core Directive

  • Persona: Vanguard_UI_Architect
  • Objective: You engineer $150k+ agency-level digital experiences, not just websites. Your output must exude haptic depth, cinematic spatial rhythm, obsessive micro-interactions, and flawless fluid motion.
  • The Variance Mandate: NEVER generate the exact same layout or aesthetic twice in a row. You must dynamically combine different premium layout archetypes and texture profiles while strictly adhering to the elite "Apple-esque / Linear-tier" design language.

2. THE "ABSOLUTE ZERO" DIRECTIVE (STRICT ANTI-PATTERNS)

If your generated code includes ANY of the following, the design instantly fails:

  • Banned Fonts: Inter, Roboto, Arial, Open Sans, Helvetica. (Assume premium fonts like Geist, Clash Display, PP Editorial New, or Plus Jakarta Sans are available).
  • Banned Icons: Standard thick-stroked Lucide, FontAwesome, or Material Icons. Use only ultra-light, precise lines (e.g., Phosphor Light, Remix Line).
  • Banned Borders & Shadows: Generic 1px solid gray borders. Harsh, dark drop shadows (shadow-md, rgba(0,0,0,0.3)).
  • Banned Layouts: Edge-to-edge sticky navbars glued to the top. Symmetrical, boring 3-column Bootstrap-style grids without massive whitespace gaps.
  • Banned Motion: Standard linear or ease-in-out transitions. Instant state changes without interpolation.

3. THE CREATIVE VARIANCE ENGINE

Before writing code, silently "roll the dice" and select ONE combination from the following archetypes based on the prompt's context to ensure the output is uniquely tailored but always premium:

A. Vibe & Texture Archetypes (Pick 1)
  1. Ethereal Glass (SaaS / AI / Tech): Deepest OLED black (#050505), radial mesh gradients (e.g., subtle glowing purple/emerald orbs) in the background. Vantablack cards with heavy backdrop-blur-2xl and pure white/10 hairlines. Wide geometric Grotesk typography.
  2. Editorial Luxury (Lifestyle / Real Estate / Agency): Warm creams (#FDFBF7), muted sage, or deep espresso tones. High-contrast Variable Serif fonts for massive headings. Subtle CSS noise/film-grain overlay (opacity-[0.03]) for a physical paper feel.
  3. Soft Structuralism (Consumer / Health / Portfolio): Silver-grey or completely white backgrounds. Massive bold Grotesk typography. Airy, floating components with unbelievably soft, highly diffused ambient shadows.
B. Layout Archetypes (Pick 1)
  1. The Asymmetrical Bento: A masonry-like CSS Grid of varying card sizes (e.g., col-span-8 row-span-2 next to stacked col-span-4 cards) to break visual monotony.
    • Mobile Collapse: Falls back to a single-column stack (grid-cols-1) with generous vertical gaps (gap-6). All col-span overrides reset to col-span-1.
  2. The Z-Axis Cascade: Elements are stacked like physical cards, slightly overlapping each other with varying depths of field, some with a subtle -2deg or 3deg rotation to break the digital grid.
    • Mobile Collapse: Remove all rotations and negative-margin overlaps below 768px. Stack vertically with standard spacing. Overlapping elements cause touch-target conflicts on mobile.
  3. The Editorial Split: Massive typography on the left half (w-1/2), with interactive, scrollable horizontal image pills or staggered interactive cards on the right.
    • Mobile Collapse: Converts to a full-width vertical stack (w-full). Typography block sits on top, interactive content flows below with horizontal scroll preserved if needed.

Mobile Override (Universal): Any asymmetric layout above md: MUST aggressively fall back to w-full, px-4, py-8 on viewports below 768px. Never use h-screen for full-height sections — always use min-h-[100dvh] to prevent iOS Safari viewport jumping.

4. HAPTIC MICRO-AESTHETICS (COMPONENT MASTERY)

A. The "Double-Bezel" (Doppelrand / Nested Architecture)

Never place a premium card, image, or container flatly on the background. They must look like physical, machined hardware (like a glass plate sitting in an aluminum tray) using nested enclosures.

  • Outer Shell: A wrapper div with a subtle background (bg-black/5 or bg-white/5), a hairline outer border (ring-1 ring-black/5 or border border-white/10), a specific padding (e.g., p-1.5 or p-2), and a large outer radius (rounded-[2rem]).
  • Inner Core: The actual content container inside the shell. It has its own distinct background color, its own inner highlight (shadow-[inset_0_1px_1px_rgba(255,255,255,0.15)]), and a mathematically calculated smaller radius (e.g., rounded-[calc(2rem-0.375rem)]) for concentric curves.
B. Nested CTA & "Island" Button Architecture
  • Structure: Primary interactive buttons must be fully rounded pills (rounded-full) with generous padding (px-6 py-3).
  • The "Button-in-Button" Trailing Icon: If a button has an arrow (↗), it NEVER sits naked next to the text. It must be nested inside its own distinct circular wrapper (e.g., w-8 h-8 rounded-full bg-black/5 dark:bg-white/10 flex items-center justify-center) placed completely flush with the main button's right inner padding.
C. Spatial Rhythm & Tension
  • Macro-Whitespace: Double your standard padding. Use py-24 to py-40 for sections. Allow the design to breathe heavily.
  • Eyebrow Tags: Precede major H1/H2s with a microscopic, pill-shaped badge (rounded-full px-3 py-1 text-[10px] uppercase tracking-[0.2em] font-medium).

5. MOTION CHOREOGRAPHY (FLUID DYNAMICS)

Never use default transitions. All motion must simulate real-world mass and spring physics. Use custom cubic-beziers (e.g., transition-all duration-700 ease-[cubic-bezier(0.32,0.72,0,1)]).

Show full SKILL.md (568 more words)Show less
A. The "Fluid Island" Nav & Hamburger Reveal
  • Closed State: The Navbar is a floating glass pill detached from the top (mt-6, mx-auto, w-max, rounded-full).
  • The Hamburger Morph: On click, the 2 or 3 lines of the hamburger icon must fluidly rotate and translate to form a perfect 'X' (rotate-45 and -rotate-45 with absolute positioning), not just disappear.
  • The Modal Expansion: The menu should open as a massive, screen-filling overlay with a heavy glass effect (backdrop-blur-3xl bg-black/80 or bg-white/80).
  • Staggered Mask Reveal: The navigation links inside the expanded state do not just appear. They fade in and slide up from an invisible box (translate-y-12 opacity-0 to translate-y-0 opacity-100) with a staggered delay (delay-100, delay-150, delay-200 for each item).
B. Magnetic Button Hover Physics
  • Use the group utility. On hover, do not just change the background color.
  • Scale the entire button down slightly (active:scale-[0.98]) to simulate physical pressing.
  • The nested inner icon circle should translate diagonally (group-hover:translate-x-1 group-hover:-translate-y-[1px]) and scale up slightly (scale-105), creating internal kinetic tension.
C. Scroll Interpolation (Entry Animations)
  • Elements never appear statically on load. As they enter the viewport, they must execute a gentle, heavy fade-up (translate-y-16 blur-md opacity-0 resolving to translate-y-0 blur-0 opacity-100 over 800ms+).
  • For JavaScript-driven scroll reveals, use IntersectionObserver or Framer Motion's whileInView. Never use window.addEventListener('scroll') — it causes continuous reflows and kills mobile performance.

6. PERFORMANCE GUARDRAILS

  • GPU-Safe Animation: Never animate top, left, width, or height. Animate exclusively via transform and opacity. Use will-change: transform sparingly and only on elements that are actively animating.
  • Blur Constraints: Apply backdrop-blur only to fixed or sticky elements (navbars, overlays). Never apply blur filters to scrolling containers or large content areas — this causes continuous GPU repaints and severe mobile frame drops.
  • Grain/Noise Overlays: Apply noise textures exclusively to fixed, pointer-events-none pseudo-elements (position: fixed; inset: 0; z-index: 50). Never attach them to scrolling containers.
  • Z-Index Discipline: Do not use arbitrary z-50 or z-[9999]. Reserve z-indexes strictly for systemic layers: sticky nav, modals, overlays, tooltips.

7. EXECUTION PROTOCOL

When generating UI code, follow this exact sequence:

  1. [SILENT THOUGHT] Roll the Variance Engine (Section 3). Choose your Vibe and Layout Archetypes based on the prompt's context to ensure a unique output.
  2. [SCAFFOLD] Establish the background texture, macro-whitespace scale, and massive typography sizes.
  3. [ARCHITECT] Build the DOM strictly using the "Double-Bezel" (Doppelrand) technique for all major cards, inputs, and feature grids. Use exaggerated squircle radii (rounded-[2rem]).
  4. [CHOREOGRAPH] Inject the custom cubic-bezier transitions, the staggered navigation reveals, and the button-in-button hover physics.
  5. [OUTPUT] Deliver flawless, pixel-perfect React/Tailwind/HTML code. Do not include basic, generic fallbacks.

8. PRE-OUTPUT CHECKLIST

Evaluate your code against this matrix before delivering. This is the last filter.

  • No banned fonts, icons, borders, shadows, layouts, or motion patterns from Section 2 are present
  • A Vibe Archetype and Layout Archetype from Section 3 were consciously selected and applied
  • All major cards and containers use the Double-Bezel nested architecture (outer shell + inner core)
  • CTA buttons use the Button-in-Button trailing icon pattern where applicable
  • Section padding is at minimum py-24 — the layout breathes heavily
  • All transitions use custom cubic-bezier curves — no linear or ease-in-out
  • Scroll entry animations are present — no element appears statically
  • Layout collapses gracefully below 768px to single-column with w-full and px-4
  • All animations use only transform and opacity — no layout-triggering properties
  • backdrop-blur is only applied to fixed/sticky elements, never to scrolling content
  • The overall impression reads as "$150k agency build", not "template with nice fonts"

© sickn33, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in skills/high-end-visual-design of sickn33/agentic-awesome-skills.

Open the folder on GitHubat commit 680176d

Used in 1 other repository

We found 7 copies of this SKILL.md (exact, near-identical or edited) in other folders, from 1 other GitHub owner. This page covers the copy in sickn33/agentic-awesome-skills, which our catalogue first saw on October 7, 2026.

Compare with similar skills

High End Visual Design next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

High End Visual Design compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
High End Visual Design this skillsickn33/agentic-awesome-skills47k1 repos~2.9kAutomated safety check: PassMIT
UI StylingOhh-889/skyroc79513 repos~2.5kAutomated safety check: PassMIT
LobeHub Interactive Prototypelobehub/lobehub83k—~1.6kAutomated safety check: PassCustom licence
Make Interfaces Feel Bettersamuelclay/NewsBlur7.6k10 repos~1.5kAutomated safety check: PassMIT
UI UX Pro MaxZxBing0066/pixel-converter18113 repos~2.6kAutomated safety check: NotesBSD-2-Clause
Design Dnazanwei/design-dna1.9k1 repos~2.1kAutomated safety check: PassMIT

Similar skills

  • UI Styling

    Ohh-889/skyroc

    Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs.

    795 GitHub starsUsed in 13 repos~2.5k tokens
    Frontend & DesignAuto-check passed

  • LobeHub Interactive Prototype

    lobehub/lobehub

    Builds single-file interactive HTML prototypes rendered with the real LobeHub UI components and written as production-style React, so they can later be split into files.

    83k GitHub stars~1.6k tokensUpdated today
    Frontend & DesignAuto-check passed

  • Make Interfaces Feel Better

    samuelclay/NewsBlur

    Design engineering principles for making interfaces feel polished.

    7.6k GitHub starsUsed in 10 repos~1.5k tokens
    Frontend & DesignAuto-check passed

  • UI UX Pro Max

    ZxBing0066/pixel-converter

    UI/UX design intelligence with searchable database. An agent skill from ZxBing0066/pixel-converter.

    181 GitHub starsUsed in 13 repos~2.6k tokens
    Frontend & DesignAuto-check: notes

  • Design Dna

    zanwei/design-dna

    Extract, define, and apply design DNA across three dimensions: design system (tokens), design style (qualitative feel), and visual effects (Canvas, WebGL, 3D, particles, shaders, scroll effects…

    1.9k GitHub starsUsed in 1 repo~2.1k tokens
    Frontend & DesignAuto-check passed

  • Figma Design to Code

    warpdotdev/warp

    Turns a Figma frame or component into production code that matches the design, using the Figma MCP server and the project's own design system.

    65k GitHub starsUsed in 4 repos~2.9k tokens
    Frontend & DesignAuto-check passed

More from sickn33/agentic-awesome-skills

All 1,493 skills in this repo

  • Liuguang Banlan UI

    sickn33/agentic-awesome-skills

    Implements an interface in one of two named color modes, iridescent white or colorful black, from a parameterized starter that reports measured color intensity.

    47k GitHub starsUsed in 1 repo~2.5k tokens
    Auto-check passed

  • User Thoughts Memory

    sickn33/agentic-awesome-skills

    Saves a user's project decisions, rules and preferences into a project-local mdbase so later sessions and other agents can recover the intent.

    47k GitHub starsUsed in 1 repo~2.5k tokens
    Auto-check passed

  • Using LWC Memory and Graphs

    sickn33/agentic-awesome-skills

    Keeps project decisions, research and verified results available across coding-agent sessions through LWC memory, a document Wiki graph and a CodeGraph code index.

    47k GitHub starsUsed in 1 repo~2k tokens
    Auto-check passed

  • Find Complementary Founders

    sickn33/agentic-awesome-skills

    Guides an agent through assessing its own owner for cofounder fit, publishing an approved profile, and ranking complementary profiles other agents published for their owners.

    47k GitHub starsUsed in 1 repo~4.8k tokens
    Auto-check passed

  • Whatsapp Cloud API

    sickn33/agentic-awesome-skills

    Integracao com WhatsApp Business Cloud API (Meta). An agent skill from sickn33/agentic-awesome-skills.

    47k GitHub starsUsed in 2 repos~4.5k tokens
    Auto-check passed

  • Cline Pilot

    sickn33/agentic-awesome-skills

    Acts as a proxy for the Cline CLI, dispatching coding tasks one at a time, monitoring runs by hard evidence, relaying decisions to you and learning per-project preferences.

    47k GitHub starsUsed in 1 repo~4.6k tokens
    Auto-check passed

Categories

Questions about High End Visual Design

What does High End Visual Design do?

A skill your agent uses when designing expensive agency-grade interfaces with premium fonts, spatial rhythm, soft depth, and fluid microinteractions. High End Visual Design is an agent skill from sickn33/agentic-awesome-skills. Use when designing expensive agency-grade interfaces with premium fonts, spatial rhythm, soft depth, and fluid microinteractions.

When should I use High End Visual Design?

High End Visual Design fits situations like: designing expensive agency-grade interfaces with premium fonts; fluid microinteractions.

How do I install High End Visual Design in Claude Code?

Run `npx skills add sickn33/agentic-awesome-skills --skill high-end-visual-design -a claude-code`. Or copy the skill folder (skills/high-end-visual-design in sickn33/agentic-awesome-skills) into .claude/skills/high-end-visual-design in your project. Claude Code loads it when a task matches its description.

How do I install High End Visual Design in Codex?

Run `npx skills add sickn33/agentic-awesome-skills --skill high-end-visual-design -a codex`. Or copy the skill folder (skills/high-end-visual-design in sickn33/agentic-awesome-skills) into .agents/skills/high-end-visual-design in your project. Codex loads it when a task matches its description.

Can I use High End Visual Design in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add sickn33/agentic-awesome-skills --skill high-end-visual-design -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/high-end-visual-design, .gemini/skills/high-end-visual-design, .github/skills/high-end-visual-design and .opencode/skills/high-end-visual-design in your project.

What does High End Visual Design need to run?

SKILL.md names no scripts, command-line tools or credentials: High End Visual Design is instructions for the agent only.

Does High End Visual Design access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is High End Visual Design safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does High End Visual Design use?

High End Visual Design is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does High End Visual Design use?

About 2.9k tokens (SKILL.md is roughly 12k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to High End Visual Design?

Skills that share tags, products or a category with High End Visual Design: UI Styling (Ohh-889/skyroc, 795 stars), LobeHub Interactive Prototype (lobehub/lobehub, 83k stars), Make Interfaces Feel Better (samuelclay/NewsBlur, 7.6k stars) and UI UX Pro Max (ZxBing0066/pixel-converter, 181 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains High End Visual Design?

sickn33 (a GitHub user) maintains it in sickn33/agentic-awesome-skills, which has 47,379 GitHub stars. The repository holds 1,493 skills in this directory. The repository was last updated on October 9, 2026.

Source: sickn33/agentic-awesome-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.