Popular Web Designs
Tommy-yw/RunbookHermes
54 production-quality design systems extracted from real websites.
54 real-world design systems (Stripe, Linear, Vercel, Notion, Apple…) as ready-to-paste HTML/CSS — exact colors, typography, components, and spacing for styling a page after a known brand.
Install Popular Web Designs
$ npx skills add yc-software/qm --skill popular-web-designs -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install yc-software/qm popular-web-designs --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/yc-software/qm.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills-seed/popular-web-designs .claude/skills/popular-web-designs && rm -rf skills-srcUse ~/.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/
Install the "popular-web-designs" agent skill from https://github.com/yc-software/qm/tree/main/skills-seed/popular-web-designs into .claude/skills/popular-web-designs/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "popular-web-designs", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/yc-software/qm/tree/main/skills-seed/popular-web-designsType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add yc-software/qm --skill popular-web-designs -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install yc-software/qm popular-web-designs --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/yc-software/qm.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills-seed/popular-web-designs .agents/skills/popular-web-designs && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "popular-web-designs" agent skill from https://github.com/yc-software/qm/tree/main/skills-seed/popular-web-designs into .agents/skills/popular-web-designs/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "popular-web-designs", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add yc-software/qm --skill popular-web-designs -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install yc-software/qm popular-web-designs --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/yc-software/qm.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills-seed/popular-web-designs .cursor/skills/popular-web-designs && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "popular-web-designs" agent skill from https://github.com/yc-software/qm/tree/main/skills-seed/popular-web-designs into .cursor/skills/popular-web-designs/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "popular-web-designs", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/yc-software/qm.git --path skills-seed/popular-web-designs--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add yc-software/qm --skill popular-web-designs -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install yc-software/qm popular-web-designs --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/yc-software/qm.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills-seed/popular-web-designs .gemini/skills/popular-web-designs && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "popular-web-designs" agent skill from https://github.com/yc-software/qm/tree/main/skills-seed/popular-web-designs into .gemini/skills/popular-web-designs/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "popular-web-designs", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install yc-software/qm popular-web-designsInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add yc-software/qm --skill popular-web-designs -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/yc-software/qm.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills-seed/popular-web-designs .github/skills/popular-web-designs && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "popular-web-designs" agent skill from https://github.com/yc-software/qm/tree/main/skills-seed/popular-web-designs into .github/skills/popular-web-designs/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "popular-web-designs", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add yc-software/qm --skill popular-web-designs -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install yc-software/qm popular-web-designs --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/yc-software/qm.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills-seed/popular-web-designs .opencode/skills/popular-web-designs && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "popular-web-designs" agent skill from https://github.com/yc-software/qm/tree/main/skills-seed/popular-web-designs into .opencode/skills/popular-web-designs/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "popular-web-designs", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
popular-web-designs- GitHub stars
- 15k
- Token cost
- ~2.9k tokens
- SKILL.md length
- 992 words
- Files
- 55
- Skills in repo
- 29
- Repo updated
- First seen
- Licence
- MIT
At a glance
54 real-world design systems (Stripe, Linear, Vercel, Notion, Apple…) as ready-to-paste HTML/CSS — exact colors, typography, components, and spacing for styling a page after a known brand.
- Works in 4 steps: Pick a design from the catalog below → Read it: skills({ action: "read", name:… → Use the design tokens and component… → …
- Tasks that involve Design systems
- SKILL.md covers Default look comes first, Related design skills, How to Use and HTML Generation Pattern, plus 3 more sections
- Calls curl; reaches fonts.googleapis.com
What it does
Popular Web Designs is an agent skill from yc-software/qm. 54 real-world design systems (Stripe, Linear, Vercel, Notion, Apple…) as ready-to-paste HTML/CSS — exact colors, typography, components, and spacing for styling a page after a known brand.
Its SKILL.md is about 2.9k tokens, which your agent loads only when the skill is triggered. The skill folder holds 55 other files (for example `templates/airbnb.md`, `templates/airtable.md` and `templates/apple.md`).
It sits in Frontend & Design, covering Design systems and Typography. It works with Vercel, Notion and Stripe. The repository describes itself as: Multiplayer agent harness for work. The licence is MIT.
When your agent uses it
- Tasks that involve Design systems
- Tasks that involve Typography
Example prompts
- “/popular-web-designs”
Workflow steps
4 steps, taken from the first numbered list in SKILL.md.
- Pick a design from the catalog below
- Read it: skills({ action: "read", name: "popular-web-designs", path: "templates/.md" })
- Use the design tokens and component specs when generating HTML
- Build with files action write, then serve the result with the publish skill
What it can do on your machine
Read from SKILL.md and the folder at commit 747be10. 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
Shell commands in SKILL.md call:
curl
From the folder's file list and the shell code blocks in SKILL.md.
Network
Hosts in commands or code, which the agent is likely to contact:
fonts.googleapis.com
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
Popular Web Designs loads about 2.9k tokens when it runs. Until then it costs about 52 tokens; SKILL.md has 992 words of instructions outside code blocks.
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 yc-software/qm at commit 747be10, republished under its MIT licence (© yc-software). 992 words, ~2,912 tokens.
Download SKILL.mdSave it as
.claude/skills/popular-web-designs/SKILL.md (or your agent's skills folder). This skill also uses 54 other files; get the full folder from GitHub.- name
- popular-web-designs
- description
- 54 real-world design systems (Stripe, Linear, Vercel, Notion, Apple…) as ready-to-paste HTML/CSS — exact colors, typography, components, and spacing for styling a page after a known brand.
Popular Web Designs
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.
Default look comes first
This skill is for when the user wants a page styled after a specific known brand. If they
have not named one, use your deployment's house-style skill (a *-design skill in the
Skills index, when installed) instead of picking from this catalog.
Related design skills
- The house-style skill (
*-design, when installed) — the org's default look as ready-to-apply tokens. Use it unless the user asks for a specific brand below. taste-skill— use for the design process and taste (reading the brief, producing variants, verifying the result, avoiding AI-design slop). Pair it with this skill when the user wants a thoughtfully-designed page styled after a known brand:taste-skilldrives the workflow, this skill supplies the visual vocabulary.
How to Use
- Pick a design from the catalog below
- Read it:
skills({ action: "read", name: "popular-web-designs", path: "templates/<site>.md" }) - Use the design tokens and component specs when generating HTML
- Build with
filesactionwrite, then serve the result with thepublishskill
Each template includes an 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
filesactionwritefor HTML creation and local headless Chromium 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>
<link href="https://fonts.googleapis.com/css2?family=..." rel="stylesheet" />
<style>
:root {
--color-bg: #ffffff;
--color-text: #171717;
--color-accent: #533afd;
}
body {
font-family: "Inter", system-ui, sans-serif;
color: var(--color-text);
background: var(--color-bg);
}
</style>
</head>
<body></body>
</html>Write the file with files action write, verify the result locally (curl -fsS http://localhost:<port>,
then chromium --headless --no-sandbox --disable-gpu --screenshot=/tmp/page.png http://localhost:<port>
when a render check matters), and serve it with the publish skill to confirm visual
accuracy and hand over a stable link.
Font Substitution Reference
Most sites use proprietary fonts unavailable via CDN. Each template maps to a Google Fonts substitute that preserves the design's character. Common mappings:
| Proprietary Font | CDN Substitute | Character |
|---|---|---|
| Geist / Geist Sans | Geist (on Google Fonts) | Geometric, compressed tracking |
| Geist Mono | Geist Mono (on Google Fonts) | Clean monospace, ligatures |
| sohne-var (Stripe) | Source Sans 3 | Light weight elegance |
| Berkeley Mono | JetBrains Mono | Technical monospace |
| Airbnb Cereal VF | DM Sans | Rounded, friendly geometric |
| Circular (Spotify) | DM Sans | Geometric, warm |
| figmaSans | Inter | Clean humanist |
| Pin Sans (Pinterest) | DM Sans | Friendly, rounded |
| NVIDIA-EMEA | Inter (or Arial system) | Industrial, clean |
| CoinbaseDisplay/Sans | DM Sans | Geometric, trustworthy |
| UberMove | DM Sans | Bold, tight |
| HashiCorp Sans | Inter | Enterprise, neutral |
| waldenburgNormal (Sanity) | Space Grotesk | Geometric, slightly condensed |
| IBM Plex Sans/Mono | IBM Plex Sans/Mono | Available on Google Fonts |
| Rubik (Sentry) | Rubik | Available on Google Fonts |
When a template's CDN font matches the original (Inter, IBM Plex, Rubik, Geist), no substitution loss occurs. When a substitute is used (DM Sans for Circular, Source Sans 3 for sohne-var), follow the template's weight, size, and letter-spacing values closely — those carry more visual identity than the specific font face.
Design Catalog
AI & Machine Learning
| Template | Site | Style |
|---|---|---|
claude.md | Anthropic Claude | Warm terracotta accent, clean editorial layout |
cohere.md | Cohere | Vibrant gradients, data-rich dashboard aesthetic |
elevenlabs.md | ElevenLabs | Dark cinematic UI, audio-waveform aesthetics |
minimax.md | Minimax | Bold dark interface with neon accents |
mistral.ai.md | Mistral AI | French-engineered minimalism, purple-toned |
ollama.md | Ollama | Terminal-first, monochrome simplicity |
opencode.ai.md | OpenCode AI | Developer-centric dark theme, full monospace |
replicate.md | Replicate | Clean white canvas, code-forward |
runwayml.md | RunwayML | Cinematic dark UI, media-rich layout |
together.ai.md | Together AI | Technical, blueprint-style design |
voltagent.md | VoltAgent | Void-black canvas, emerald accent, terminal-native |
x.ai.md | xAI | Stark monochrome, futuristic minimalism, full monospace |
Show full SKILL.md (419 more words)Show less
Developer Tools & Platforms
| Template | Site | Style |
|---|---|---|
cursor.md | Cursor | Sleek dark interface, gradient accents |
expo.md | Expo | Dark theme, tight letter-spacing, code-centric |
linear.app.md | Linear | Ultra-minimal dark-mode, precise, purple accent |
lovable.md | Lovable | Playful gradients, friendly dev aesthetic |
mintlify.md | Mintlify | Clean, green-accented, reading-optimized |
posthog.md | PostHog | Playful branding, developer-friendly dark UI |
raycast.md | Raycast | Sleek dark chrome, vibrant gradient accents |
resend.md | Resend | Minimal dark theme, monospace accents |
sentry.md | Sentry | Dark dashboard, data-dense, pink-purple accent |
supabase.md | Supabase | Dark emerald theme, code-first developer tool |
superhuman.md | Superhuman | Premium dark UI, keyboard-first, purple glow |
vercel.md | Vercel | Black and white precision, Geist font system |
warp.md | Warp | Dark IDE-like interface, block-based command UI |
zapier.md | Zapier | Warm orange, friendly illustration-driven |
Infrastructure & Cloud
| Template | Site | Style |
|---|---|---|
clickhouse.md | ClickHouse | Yellow-accented, technical documentation style |
composio.md | Composio | Modern dark with colorful integration icons |
hashicorp.md | HashiCorp | Enterprise-clean, black and white |
mongodb.md | MongoDB | Green leaf branding, developer documentation focus |
sanity.md | Sanity | Red accent, content-first editorial layout |
stripe.md | Stripe | Signature purple gradients, weight-300 elegance |
Design & Productivity
| Template | Site | Style |
|---|---|---|
airtable.md | Airtable | Colorful, friendly, structured data aesthetic |
cal.md | Cal.com | Clean neutral UI, developer-oriented simplicity |
clay.md | Clay | Organic shapes, soft gradients, art-directed layout |
figma.md | Figma | Vibrant multi-color, playful yet professional |
framer.md | Framer | Bold black and blue, motion-first, design-forward |
intercom.md | Intercom | Friendly blue palette, conversational UI patterns |
miro.md | Miro | Bright yellow accent, infinite canvas aesthetic |
notion.md | Notion | Warm minimalism, serif headings, soft surfaces |
pinterest.md | Red accent, masonry grid, image-first layout | |
webflow.md | Webflow | Blue-accented, polished marketing site aesthetic |
Fintech & Crypto
| Template | Site | Style |
|---|---|---|
coinbase.md | Coinbase | Clean blue identity, trust-focused, institutional feel |
kraken.md | Kraken | Purple-accented dark UI, data-dense dashboards |
revolut.md | Revolut | Sleek dark interface, gradient cards, fintech precision |
wise.md | Wise | Bright green accent, friendly and clear |
Enterprise & Consumer
| Template | Site | Style |
|---|---|---|
airbnb.md | Airbnb | Warm coral accent, photography-driven, rounded UI |
apple.md | Apple | Premium white space, SF Pro, cinematic imagery |
bmw.md | BMW | Dark premium surfaces, precise engineering aesthetic |
ibm.md | IBM | Carbon design system, structured blue palette |
nvidia.md | NVIDIA | Green-black energy, technical power aesthetic |
spacex.md | SpaceX | Stark black and white, full-bleed imagery, futuristic |
spotify.md | Spotify | Vibrant green on dark, bold type, album-art-driven |
uber.md | Uber | Bold black and white, tight type, urban energy |
Choosing a Design
Match the design to the content:
- Developer tools / dashboards: Linear, Vercel, Supabase, Raycast, Sentry
- Documentation / content sites: Mintlify, Notion, Sanity, MongoDB
- Marketing / landing pages: Stripe, Framer, Apple, SpaceX
- Dark mode UIs: Linear, Cursor, ElevenLabs, Warp, Superhuman
- Light / clean UIs: Vercel, Stripe, Notion, Cal.com, Replicate
- Playful / friendly: PostHog, Figma, Lovable, Zapier, Miro
- Premium / luxury: Apple, BMW, Stripe, Superhuman, Revolut
- Data-dense / dashboards: Sentry, Kraken, Cohere, ClickHouse
- Monospace / terminal aesthetic: Ollama, OpenCode, x.ai, VoltAgent
© yc-software, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 54 other files in skills-seed/popular-web-designs of yc-software/qm.
- SKILL.md
- templates/airbnb.md
- templates/airtable.md
- templates/apple.md
- templates/bmw.md
- templates/cal.md
- templates/claude.md
- templates/clay.md
- templates/clickhouse.md
- templates/cohere.md
- templates/coinbase.md
- templates/composio.md
- templates/cursor.md
- templates/elevenlabs.md
- templates/expo.md
- templates/figma.md
- templates/framer.md
- templates/hashicorp.md
- templates/ibm.md
- templates/intercom.md
- … and 35 more
Open the folder on GitHubat commit 747be10
Compare with similar skills
Popular Web Designs 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.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Popular Web Designs this skillyc-software/qm | 15k | — | ~2.9k | Automated safety check: Pass | MIT | |
| Popular Web DesignsTommy-yw/RunbookHermes | 546 | 1 repos | ~2.4k | Automated safety check: Pass | MIT | |
| SkilluiCraftOS-dev/CraftBot | 392 | — | ~1.2k | Automated safety check: Pass | MIT | |
| Design Craftkipperacademy/skillpper | 144 | — | ~3.8k | Automated safety check: Pass | None | |
| Prismer Popular Web DesignsPrismer-AI/PrismerCloud | 1.6k | 3 repos | ~2.5k | Automated safety check: Pass | MIT | |
| Awesome Design Mdinfometa/workbuddyskills | 346 | — | ~2.4k | Automated safety check: Notes | None |
Similar skills
Skillui
CraftOS-dev/CraftBot
Reverse-engineer any website's, repo's, or local project's design system into a Claude-ready skill via the SkillUI CLI.
Design Craft
kipperacademy/skillpper
Opinionated product-design skill for building, reviewing, polishing, and iterating on landing pages, apps, dashboards, AI products, design systems, and brand touchpoints.
Prismer Popular Web Designs
Prismer-AI/PrismerCloud
54 real design systems (Stripe, Linear, Vercel) as HTML/CSS.
Awesome Design Md
infometa/workbuddyskills
Curated collection of 54 DESIGN.md files extracted from real developer-focused websites (Vercel, Stripe, Linear, Notion, Figma, etc.).
UI Designer
AFK-surf/OpenBridge
Design or restyle user interfaces using vendored DESIGN.md references from popular product and brand-inspired visual systems.
More from yc-software/qm
All 29 skills in this repoAdmin
yc-software/qm
Act for an org admin — the admin API (scope directory, per-scope config & SOUL, any scope's memory, transcripts & captured prompts, files, user roster & external users, audit/errors/metrics/egress)…
Browse
yc-software/qm
Drive a real stealth browser from your shell — act on websites (order food, file an expense, pull data behind a login), with per-person persistent sign-ins via the provider's managed auth (Kernel…
Composio
yc-software/qm
Show the app connection picker or setup widget when users ask to connect apps, reopen setup, or need an app that isn't connected yet.
Dev Instance
yc-software/qm
Run the current worktree as a production-shaped local dev instance with web, Slack, or both, on a real LLM + Postgres.
GitHub GitLab
yc-software/qm
Work with GitHub and GitLab repositories through resident gh/glab/git auth on the agent computer.
Google Workspace
yc-software/qm
Read and act on the user's Gmail, Google Calendar, and Google Tasks through per-user OAuth.
Related
Categories
Questions about Popular Web Designs
What does Popular Web Designs do?
54 real-world design systems (Stripe, Linear, Vercel, Notion, Apple…) as ready-to-paste HTML/CSS — exact colors, typography, components, and spacing for styling a page after a known brand. Popular Web Designs is an agent skill from yc-software/qm. 54 real-world design systems (Stripe, Linear, Vercel, Notion, Apple…) as ready-to-paste HTML/CSS — exact colors, typography, components, and spacing for styling a page after a known brand.
When should I use Popular Web Designs?
Popular Web Designs fits situations like: tasks that involve Design systems; tasks that involve Typography.
How do I install Popular Web Designs in Claude Code?
Run `npx skills add yc-software/qm --skill popular-web-designs -a claude-code`. Or copy the skill folder (skills-seed/popular-web-designs in yc-software/qm) into .claude/skills/popular-web-designs in your project. Claude Code loads it when a task matches its description.
How do I install Popular Web Designs in Codex?
Run `npx skills add yc-software/qm --skill popular-web-designs -a codex`. Or copy the skill folder (skills-seed/popular-web-designs in yc-software/qm) into .agents/skills/popular-web-designs in your project. Codex loads it when a task matches its description.
Can I use Popular Web Designs 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 yc-software/qm --skill popular-web-designs -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/popular-web-designs, .gemini/skills/popular-web-designs, .github/skills/popular-web-designs and .opencode/skills/popular-web-designs in your project.
What does Popular Web Designs need to run?
Going by SKILL.md and its folder, Popular Web Designs needs the command-line tools its instructions call (curl).
Does Popular Web Designs access the network?
SKILL.md names 1 domain. In commands or code: fonts.googleapis.com; the agent is likely to contact it when it follows the instructions. This is read from the text; nothing was executed.
Is Popular Web Designs 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 Popular Web Designs use?
Popular Web Designs 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 Popular Web Designs 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 Popular Web Designs?
Skills that share tags, products or a category with Popular Web Designs: Popular Web Designs (Tommy-yw/RunbookHermes, 546 stars), Skillui (CraftOS-dev/CraftBot, 392 stars), Design Craft (kipperacademy/skillpper, 144 stars) and Prismer Popular Web Designs (Prismer-AI/PrismerCloud, 1.6k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Popular Web Designs?
yc-software (a GitHub organization) maintains it in yc-software/qm, which has 15,368 GitHub stars. The repository holds 29 skills in this directory. The repository was last updated on October 9, 2026.
Source: yc-software/qm on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.