hyperflow-design

hyperflow-design is a skill for Claude Code from jeremylongshore/tons-of-skills-marketplace. It costs 81 tokens per session (391 once invoked), scanned A, original, MIT.

A design-phase guide for creating or extending a visual system before production code is written. It covers design tokens, typography, motion, components, research references, and rules for avoiding generic interface choices.

In plain words
What is it for?
Use it when designing screens, improving visual quality, establishing a design system, researching interface references, or specifying motion and responsive behavior.
Why use it?
It gives a UI project a consistent visual direction and requires that choices be grounded in real examples from the product’s field. It also checks details such as motion behavior, mobile support, and accessibility.

Skill for Claude Code

Written for Claude Code: shipped in a Claude Code plugin.

Part of the hyperflow plugin — 28 skills, 22 agents shipped together

Good fit Use it when designing screens, improving visual quality, establishing a design system, researching interface references, or specifying motion and responsive behavior.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/jeremylongshore/tons-of-skills-marketplace/hyperflow-design
About the project

Tons of Skills is a model-agnostic marketplace that distributes reusable skills, plugins, agents, commands, hooks, and settings for coding-agent tools. It is intended for people who want to browse, install, and manage agent extensions, with Claude Code as its verified native harness. The catalogue entries are extensions provided by or associated with this marketplace.

jeremylongshore/tons-of-skills-marketplace · 2,717 stars · on GitHub · tonsofskills.com

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent
npx skills add jeremylongshore/tons-of-skills-marketplace --skill hyperflow-design
Clone the repo
git clone --depth 1 https://github.com/jeremylongshore/tons-of-skills-marketplace

Made for: Claude Code.

Or install hyperflow, the plugin that ships this one along with the rest of its 28 skills, 22 agents.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for hyperflow-design

README.md
[![agentmods](https://agentmods.dev/badge/skills/jeremylongshore/tons-of-skills-marketplace/hyperflow-design/github.svg)](https://agentmods.dev/skills/jeremylongshore/tons-of-skills-marketplace/hyperflow-design)
Your own site
<a href="https://agentmods.dev/skills/jeremylongshore/tons-of-skills-marketplace/hyperflow-design"><img src="https://agentmods.dev/badge/skills/jeremylongshore/tons-of-skills-marketplace/hyperflow-design/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

agentmods 80×15 button for hyperflow-design

Your own site · 80×15
<a href="https://agentmods.dev/skills/jeremylongshore/tons-of-skills-marketplace/hyperflow-design"><img src="https://agentmods.dev/badge/skills/jeremylongshore/tons-of-skills-marketplace/hyperflow-design.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 81 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 391 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe. Third-party audits
  • NVIDIA SkillSpector pass 7 Sept 2026
How audits are shown
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5.1 $0.00081 $0.00391
Opus 5 $0.00041 $0.00196
Sonnet 5 $0.00016 $0.00078
Haiku 4.5 $0.00008 $0.00039

Measured 13d ago against content hash 66f85b4b23eb, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-12, from the pricing page.

Security

Grade A, and why

hyperflow-design scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 13d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

plugins/ai-agency/hyperflow/templates/antigravity/skills/hyperflow-design/SKILL.md · 22 lines

What it actually says

hyperflow-design — design phase (Antigravity single-agent)

Design system and taste, not production code. Follow the hyperflow doctrine.

Steps

  1. Design system first. Ensure .hyperflow/design/system.md exists — create it if missing, extend it (never regenerate) if present: tokens, type scale, motion language, voice, component inventory, references, anti-patterns.
  2. Researched, not invented. Study ≥2 real-world references from the project's own field, combine them, then add one deliberate signature move — never copy a single source.
  3. Taste applied. Discover and apply the matching local taste skill(s); pass the anti-slop floor (no default AI gradient, no serif-by-default, one accent, locked corner-radius scale, eyebrow restraint, no duplicate-intent CTAs, hero fits the viewport, every motion communicates state).
  4. Record the bound design-system tokens and the named signature into the spec. When a motion surface is in scope, apply the Motion-language standards (compositor-only props, spring params, reduced-motion fallback); when a mobile surface is in scope, apply the mobile platform/device/accessibility matrix.

Rules

  • No production code — only the design system and the spec.
  • Defer to accessibility on any a11y conflict (the WCAG floor wins) and to security on any security conflict.
  • Every best-practice claim about a pattern cites a current source.
Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 13d ago First seen · 22 lines · 81 tokens per session scan A 66f85b4b23eb

Subscribe to this mod's changes

hyperflow-design is a skill published in the GitHub repository jeremylongshore/tons-of-skills-marketplace (2,717 stars, last pushed today), licensed MIT. It adds 81 tokens to every session and 391 once invoked, about $0.0004 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.

Related

Other skills, from other repositories

impeccable

Use when the user wants distinctive, production-grade frontend design, anti-generic AI aesthetics, UX critique, technical UI audits, or final polish through bundled Impeccable references and an optional upstream detector CLI.

Peiiii/nextclaw · 47 tokens

ui-ux-pro-max

Use when the user wants professional UI/UX design guidance, design-system generation, UX review, or stack-specific frontend guidance through a bundled local UI/UX Pro Max dataset and Python search runtime.

Peiiii/nextclaw · 45 tokens

animation-patterns

Framer Motion patterns, page transitions, skeleton loading, scroll-linked animations, and gesture-based interactions for React.

vibeeval/vibecosystem · 26 tokens

artifacts-builder

Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.

ComposioHQ/awesome-claude-skills · 63 tokens

perfect-web-clone

Reproduce a live website from its URL as a clean, deployable Vite + React project by running the complete agent-driven Perfect Web Clone harness: capture source evidence, plan the full page, author every section, implement common interactions, build, compare, repair, and hand the measured result to the user for…

ericshang98/Perfect-Web-Clone · 134 tokens

extract-design-system

Extract design primitives from a public website and generate starter token files for your project.

arvindrk/extract-design-system · 20 tokens