mirror of
https://github.com/NousResearch/hermes-agent.git
synced 2026-04-25 00:51:20 +00:00
docs(website): dedicated page per bundled + optional skill (#14929)
Generates a full dedicated Docusaurus page for every one of the 132 skills
(73 bundled + 59 optional) under website/docs/user-guide/skills/{bundled,optional}/<category>/.
Each page carries the skill's description, metadata (version, author, license,
dependencies, platform gating, tags, related skills cross-linked to their own
pages), and the complete SKILL.md body that Hermes loads at runtime.
Previously the two catalog pages just listed skills with a one-line blurb and
no way to see what the skill actually did — users had to go read the source
repo. Now every skill has a browsable, searchable, cross-linked reference in
the docs.
- website/scripts/generate-skill-docs.py — generator that reads skills/ and
optional-skills/, writes per-skill pages, regenerates both catalog indexes,
and rewrites the Skills section of sidebars.ts. Handles MDX escaping
(outside fenced code blocks: curly braces, unsafe HTML-ish tags) and
rewrites relative references/*.md links to point at the GitHub source.
- website/docs/reference/skills-catalog.md — regenerated; each row links to
the new dedicated page.
- website/docs/reference/optional-skills-catalog.md — same.
- website/sidebars.ts — Skills section now has Bundled / Optional subtrees
with one nested category per skill folder.
- .github/workflows/{docs-site-checks,deploy-site}.yml — run the generator
before docusaurus build so CI stays in sync with the source SKILL.md files.
Build verified locally with `npx docusaurus build`. Only remaining warnings
are pre-existing broken link/anchor issues in unrelated pages.
This commit is contained in:
Teknium
GitHub
parent
eb93f88e1d
commit
0f6eabb890
139 changed files with 43523 additions and 306 deletions
|
|
@ -0,0 +1,212 @@
|
|||
---
|
||||
title: "Popular Web Designs — 54 production-quality design systems extracted from real websites"
|
||||
sidebar_label: "Popular Web Designs"
|
||||
description: "54 production-quality design systems extracted from real websites"
|
||||
---
|
||||
|
||||
{/* This page is auto-generated from the skill's SKILL.md by website/scripts/generate-skill-docs.py. Edit the source SKILL.md, not this page. */}
|
||||
|
||||
# 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.
|
||||
|
||||
## Skill metadata
|
||||
|
||||
| | |
|
||||
|---|---|
|
||||
| Source | Bundled (installed by default) |
|
||||
| Path | `skills/creative/popular-web-designs` |
|
||||
| Version | `1.0.0` |
|
||||
| Author | Hermes Agent + Teknium (design systems sourced from VoltAgent/awesome-design-md) |
|
||||
| License | MIT |
|
||||
|
||||
## Reference: full SKILL.md
|
||||
|
||||
:::info
|
||||
The following is the complete skill definition that Hermes loads when this skill is triggered. This is what the agent sees as instructions when the skill is active.
|
||||
:::
|
||||
|
||||
# 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.
|
||||
|
||||
## 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 **Hermes 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
|
||||
|
||||
```html
|
||||
<!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 Hermes 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>
|
||||
```
|
||||
|
||||
Write the file with `write_file`, serve with the `generative-widgets` workflow (cloudflared tunnel),
|
||||
and verify the result with `browser_vision` to confirm visual accuracy.
|
||||
|
||||
## 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 |
|
||||
|
||||
### 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` | Pinterest | 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
|
||||
Loading…
Add table
Add a link
Reference in a new issue