agentmods.dev

popular-web-designs

popular-web-designs is a skill for Claude Code, Codex from perasyudha/Nyxora. It costs 23 tokens per session (2,456 once invoked), scanned A, a copy of popular-web-designs, MIT.

A collection of 54 real website design systems, including examples associated with Stripe, Linear, and Vercel, written as HTML and CSS guidance. A design system is a set of rules for colors, fonts, spacing, components, and responsive layouts.

In plain words
What is it for?
Use it when creating HTML/CSS pages, selecting a known visual style, or combining a design reference with a separate design process or widget-building skill.
Why use it?
It gives an agent concrete visual references when a generated webpage needs a consistent style instead of arbitrary design choices.

Skill for Claude CodeCodex

Written for no agent in particular: nothing here depends on one. Also seen: mentions OpenCode.

not rated 5repo 11d ago A scan 23 tokens copy · 100% MIT

Good fit Use it when creating HTML/CSS pages, selecting a known visual style, or combining a design reference with a separate design process or widget-building skill.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/perasyudha/nyxora/popular-web-designs
View source ↗ perasyudha/Nyxora nyxoraai.github.io
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 perasyudha/Nyxora --skill popular-web-designs
Clone the repo
git clone --depth 1 https://github.com/perasyudha/Nyxora

Made for: Claude Code, Codex.

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 popular-web-designs

README.md
[![agentmods](https://agentmods.dev/badge/skills/perasyudha/nyxora/popular-web-designs/github.svg)](https://agentmods.dev/skills/perasyudha/nyxora/popular-web-designs)
Your own site
<a href="https://agentmods.dev/skills/perasyudha/nyxora/popular-web-designs"><img src="https://agentmods.dev/badge/skills/perasyudha/nyxora/popular-web-designs/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 popular-web-designs

Your own site · 80×15
<a href="https://agentmods.dev/skills/perasyudha/nyxora/popular-web-designs"><img src="https://agentmods.dev/badge/skills/perasyudha/nyxora/popular-web-designs.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 23 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 2,456 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.
Origin 100% copy Near-identical to another mod 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.00023 $0.02456
Opus 5 $0.00012 $0.01228
Sonnet 5 $0.00005 $0.00491
Haiku 4.5 $0.00002 $0.00246

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

Security

Grade A, and why

popular-web-designs 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 11d 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.

Origin

This is a copy

100% identical to popular-web-designs — 8 lines differ, which has more behind it and is treated as the original. This page carries a canonical link to it rather than competing with it.

packages/core/playbooks/creative/popular-web-designs/SKILL.md · 214 lines

How it starts

The opening of the file, as written. The whole thing — 214 lines — stays where its author put it; the contents beside it link to each section on GitHub.

54 real-world design systems ready for use when generating HTML/CSS. Each template captures a site's complete visual language: color palette, typography hierarchy, component styles, spacing system, shadows, responsive behavior, and practical agent prompts with exact CSS values.

  • claude-design — use for the design process and taste (scoping a brief, producing variants, verifying a local HTML artifact, avoiding AI-design slop). Pair it with this skill when the user wants a thoughtfully-designed page styled after a known brand: claude-design drives the workflow, this skill supplies the visual vocabulary.
  • design-md — use when the deliverable is a formal DESIGN.md token spec file, not a rendered artifact.

How to Use

  1. Pick a design from the catalog below
  2. Load it: skill_view(name="popular-web-designs", file_path="templates/<site>.md")
  3. Use the design tokens and component specs when generating HTML
  4. Pair with the generative-widgets skill to serve the result via cloudflared tunnel

Each template includes a Nyxora Implementation Notes block at the top with:

  • CDN font substitute and Google Fonts <link> tag (ready to paste)
  • CSS font-family stacks for primary and monospace
  • Reminders to use write_file for HTML creation and browser_vision for verification

HTML Generation Pattern

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Page Title</title>
  <!-- Paste the Google Fonts <link> from the template's Nyxora notes -->
  <link href="https://fonts.googleapis.com/css2?family=..." rel="stylesheet">
  <style>
    /* Apply the template's color palette as CSS custom properties */
    :root {
      --color-bg: #ffffff;
      --color-text: #171717;
      --color-accent: #533afd;
      /* ... more from template Section 2 */
    }
    /* Apply typography from template Section 3 */
    body {
      font-family: 'Inter', system-ui, sans-serif;
      color: var(--color-text);
      background: var(--color-bg);
    }
    /* Apply component styles from template Section 4 */
    /* Apply layout from template Section 5 */
    /* Apply shadows from template Section 6 */
  </style>
</head>
<body>
  <!-- Build using component specs from the template -->
</body>
</html>

Read the full file on GitHub · 214 lines

Files

What ships with it

54 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.

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. 11d ago First seen · 214 lines · 23 tokens per session scan A c8308bd0e325

Subscribe to this mod's changes

popular-web-designs is a skill published in the GitHub repository perasyudha/Nyxora (5 stars, last pushed 11d ago), licensed MIT. It adds 23 tokens to every session and 2,456 once invoked, about $0.0001 per session on Opus 5. A static security scan graded it A with 0 findings. It is 100% identical to popular-web-designs, differing in 8 lines, and is treated as a copy.

CSS and stylingDesign and UXFrontendagent-web3ai-agentautomationawesome-listcryptocurrencycssdesign-systemshtmltemplatesuiweb-development
Related

Other skills, from other repositories

popular-web-designs

54 production-quality design systems extracted from real websites. Load a template to generate HTML/CSS that matches the visual identity of sites like Stripe, Linear, Vercel, Notion, Airbnb, and more. Each template includes colors, typography, components, layout rules, and ready-to-use CSS values.

NeoLabs-Systems/NeoAgent · 66 tokens

popular-web-designs

54 real design systems (Stripe, Linear, Vercel) as HTML/CSS.

davidtoby/agent-skills · 23 tokens

popular-web-designs

54 real design systems (Stripe, Linear, Vercel) as HTML/CSS.

NousResearch/hermes-agent · 23 tokens

popular-web-designs

54 real design systems (Stripe, Linear, Vercel) as HTML/CSS.

aivrar/portable-hermes-agent · 23 tokens

popular-web-designs

54 production-quality design systems extracted from real websites. Load a template to generate HTML/CSS that matches the visual identity of sites like Stripe, Linear, Vercel, Notion, Airbnb, and more. Each template includes colors, typography, components, layout rules, and ready-to-use CSS values.

graniet/kheish · 61 tokens

popular-web-designs

54 real design systems (Stripe, Linear, Vercel) as HTML/CSS.

ariffazil/AAA · 23 tokens