{"id":"2b664f6d-069d-42f8-a8c4-70e5f3256b32","shortId":"pzFrEg","kind":"skill","title":"design-md-voltagent","tagline":"Design system reference for design md voltagent.","description":"# Design System: VoltAgent\n\n## 1. Visual Theme & Atmosphere\n\nVoltAgent's interface is a deep-space command terminal for the AI age  a developer-facing darkness built on near-pure-black surfaces (`#050507`) where the only interruption is the electric pulse of emerald green energy. The entire experience evokes the feeling of staring into a high-powered IDE at 2am: dark, focused, and alive with purpose. This is not a friendly SaaS landing page  it's an engineering platform that announces itself through code snippets, architectural diagrams, and raw technical confidence.\n\nThe green accent (`#00d992`) is used with surgical precision  it glows from headlines, borders, and interactive elements like a circuit board carrying a signal. Against the carbon-black canvas, this green reads as \"power on\"  a deliberate visual metaphor for an AI agent engineering platform. The supporting palette is built entirely from warm-neutral grays (`#3d3a39`, `#8b949e`, `#b8b3b0`) that soften the darkness without introducing color noise, creating a cockpit-like warmth that pure blue-grays would lack.\n\nTypography leans on the system font stack for headings  achieving maximum rendering speed and native-feeling authority  while Inter carries the body and UI text with geometric precision. Code blocks use SFMono-Regular, the same font developers see in their terminals, reinforcing the tool's credibility at every scroll.\n\n**Key Characteristics:**\n- Carbon-black canvas (`#050507`) with warm-gray border containment (`#3d3a39`)  not cold or sterile\n- Single-accent identity: Emerald Signal Green (`#00d992`) as the sole chromatic energy source\n- Dual-typography system: system-ui for authoritative headings, Inter for precise UI/body text, SFMono for code credibility\n- Ultra-tight heading line-heights (1.01.11) creating dense, compressed power blocks\n- Warm neutral palette (`#3d3a39`, `#8b949e`, `#b8b3b0`) that prevents the dark theme from feeling clinical\n- Developer-terminal aesthetic where code snippets ARE the hero content\n- Green glow effects (`drop-shadow`, border accents) that make UI elements feel electrically alive\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Emerald Signal Green** (`#00d992`): The core brand energy  used for accent borders, glow effects, and the highest-signal interactive moments. This is the \"power-on\" indicator of the entire interface.\n- **VoltAgent Mint** (`#2fd6a1`): The button-text variant of the brand green  slightly warmer and more readable than pure Signal Green, used specifically for CTA text on dark surfaces.\n- **Tailwind Emerald** (`#10b981`): The ecosystem-standard green used at low opacity (30%) for subtle background tints and link defaults. Bridges VoltAgent's custom palette with Tailwind's utility classes.\n\n### Secondary & Accent\n- **Soft Purple** (`#818cf8`): A cool indigo-violet used sparingly for secondary categorization, code syntax highlights, and visual variety without competing with green.\n- **Cobalt Primary** (`#306cce`): Docusaurus primary dark  used in documentation contexts for links and interactive focus states.\n- **Deep Cobalt** (`#2554a0`): The darkest primary shade, reserved for pressed/active states in documentation UI.\n- **Ring Blue** (`#3b82f6`): Tailwind's ring color at 50% opacity  visible only during keyboard focus for accessibility compliance.\n\n### Surface & Background\n- **Abyss Black** (`#050507`): The landing page canvas  a near-pure black with the faintest warm undertone, darker than most \"dark themes\" for maximum contrast with green accents.\n- **Carbon Surface** (`#101010`): The primary card and button background  one shade lighter than Abyss, creating a barely perceptible elevation layer. Used across all contained surfaces.\n- **Warm Charcoal Border** (`#3d3a39`): The signature containment color  not a cold gray but a warm, almost brownish dark tone that prevents borders from feeling harsh against the black canvas.\n\n### Neutrals & Text\n- **Snow White** (`#f2f2f2`): The primary text color on dark surfaces  not pure white (`#ffffff`) but a softened, eye-friendly off-white. The most-used color on the site (1008 instances).\n- **Pure White** (`#ffffff`): Reserved for the highest-emphasis moments  ghost button text and maximum-contrast headings. Used at low opacity (5%) for subtle overlay effects.\n- **Warm Parchment** (`#b8b3b0`): Secondary body text  a warm light gray with a slight pinkish undertone that reads as \"paper\" against the dark canvas.\n- **Steel Slate** (`#8b949e`): Tertiary text, metadata, timestamps, and de-emphasized content. A cool blue-gray that provides clear hierarchy below Warm Parchment.\n- **Fog Gray** (`#bdbdbd`): Footer links and supporting navigation text  brightens on hover to Pure White.\n- **Mist Gray** (`#dcdcdc`): Slightly brighter than Fog, used for secondary link text that transitions to bright green on hover.\n- **Near White** (`#eeeeee`): Highest-contrast secondary text, one step below Snow White.\n\n### Semantic & Accent\n- **Success Emerald** (`#008b00`): Deep green for success states and positive confirmations in documentation contexts.\n- **Success Light** (`#80d280`): Soft pastel green for success backgrounds and subtle positive indicators.\n- **Warning Amber** (`#ffba00`): Bright amber for warning alerts and caution states.\n- **Warning Pale** (`#ffdd80`): Softened amber for warning background fills.\n- **Danger Coral** (`#fb565b`): Vivid red for error states and destructive action warnings.\n- **Danger Rose** (`#fd9c9f`): Softened coral-pink for error backgrounds.\n- **Info Teal** (`#4cb3d4`): Cool teal-blue for informational callouts and tip admonitions.\n- **Dashed Border Slate** (`#4f5d75` at 40%): A muted blue-gray used exclusively for decorative dashed borders in workflow diagrams.\n\n### Gradient System\n- **Green Signal Glow**: `drop-shadow(0 0 2px #00d992)` animating to `drop-shadow(0 0 8px #00d992)`  creates a pulsing \"electric charge\" effect on the VoltAgent bolt logo and interactive elements. The glow expands and contracts like a heartbeat.\n- **Warm Ambient Haze**: `rgba(92, 88, 85, 0.2) 0px 0px 15px`  a warm-toned diffused shadow that creates a soft atmospheric glow around elevated cards, visible at the edges without sharp boundaries.\n- **Deep Dramatic Elevation**: `rgba(0, 0, 0, 0.7) 0px 20px 60px` with `rgba(148, 163, 184, 0.1) 0px 0px 0px 1px inset`  a heavy, dramatic downward shadow paired with a faint inset slate ring for the most prominent floating elements.\n\n## 3. Typography Rules\n\n### Font Family\n- **Primary (Headings)**: `system-ui`, with fallbacks: `-apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol`\n- **Secondary (Body/UI)**: `Inter`, with fallbacks inheriting from system-ui stack. OpenType features: `\"calt\", \"rlig\"` (contextual alternates and required ligatures)\n- **Monospace (Code)**: `SFMono-Regular`, with fallbacks: `Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace`\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Display / Hero | system-ui | 60px (3.75rem) | 400 | 1.00 (tight) | -0.65px | Maximum impact, compressed blocks |\n| Section Heading | system-ui | 36px (2.25rem) | 400 | 1.11 (tight) | -0.9px | Tightest letter-spacing in the system |\n| Sub-heading | system-ui | 24px (1.50rem) | 700 | 1.33 | -0.6px | Bold weight for emphasis at this size |\n| Sub-heading Light | system-ui / Inter | 24px (1.50rem) | 300400 | 1.33 | -0.6px | Light weight variant for softer hierarchy |\n| Overline | system-ui | 20px (1.25rem) | 600 | 1.40 | 0.5px | Uppercase transform, positive letter-spacing |\n| Feature Title | Inter | 20px (1.25rem) | 500600 | 1.40 | normal | Card headings, feature names |\n| Overline Small | Inter | 18px (1.13rem) | 600 | 1.56 | 0.45px | Uppercase section labels |\n| Body / Button | Inter | 16px (1.00rem) | 400600 | 1.501.65 | normal | Standard text, nav links, buttons |\n| Nav Link | Inter | 14.45px (0.90rem) | 500 | 1.65 | normal | Navigation-specific sizing |\n| Caption / Label | Inter | 14px (0.88rem) | 400600 | 1.431.65 | normal | Descriptions, metadata, badge text |\n| Tag / Overline Tiny | system-ui | 14px (0.88rem) | 600 | 1.43 | 2.52px | Widest letter-spacing  reserved for uppercase tags |\n| Micro | Inter | 12px (0.75rem) | 400500 | 1.33 | normal | Smallest sans-serif text |\n| Code Body | SFMono-Regular | 1314px | 400686 | 1.231.43 | normal | Inline code, terminal output, variable weight for syntax |\n| Code Small | SFMono-Regular | 1112px | 400 | 1.331.45 | normal | Tiny code references, line numbers |\n| Code Button | monospace | 13px (0.81rem) | 700 | 1.65 | normal | Copy-to-clipboard button labels |\n\n### Principles\n- **System-native authority**: Display headings use system-ui rather than a custom web font  this means the largest text renders instantly (no FOIT/FOUT) and inherits the operating system's native personality. On macOS it's SF Pro, on Windows it's Segoe UI. The design accepts this variability as a feature, not a bug.\n- **Tight compression creates density**: Hero line-heights are extremely compressed (1.0) with negative letter-spacing (-0.65px to -0.9px), creating text blocks that feel like dense technical specifications rather than airy marketing copy.\n- **Weight gradient, not weight contrast**: The system uses a gentle 300400500600700 weight progression. Bold (700) is reserved for sub-headings and code-button emphasis. Most body text lives at 400500, creating subtle rather than dramatic hierarchy.\n- **Uppercase is earned and wide**: When uppercase appears, it's always paired with generous letter-spacing (0.45px2.52px), transforming dense words into spaced-out overline labels. This treatment is never applied to headings.\n- **OpenType by default**: Both system-ui and Inter enable `\"calt\"` and `\"rlig\"` features, ensuring contextual character adjustments and ligature rendering throughout.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Ghost / Outline (Standard)**\n- Background: transparent\n- Text: Pure White (`#ffffff`)\n- Padding: comfortable (12px 16px)\n- Border: thin solid Warm Charcoal (`1px solid #3d3a39`)\n- Radius: comfortably rounded (6px)\n- Hover: background darkens to `rgba(0, 0, 0, 0.2)`, opacity drops to 0.4\n- Outline: subtle green tint (`rgba(33, 196, 93, 0.5)`)\n- The default interactive element  unassuming but clearly clickable\n\n**Primary Green CTA**\n- Background: Carbon Surface (`#101010`)\n- Text: VoltAgent Mint (`#2fd6a1`)\n- Padding: comfortable (12px 16px)\n- Border: none visible (outline-based focus indicator)\n- Outline: VoltAgent Mint (`rgb(47, 214, 161)`)\n- Hover: same darkening behavior as Ghost\n- The \"powered on\" button  green text on dark surface reads as an active terminal command\n\n**Tertiary / Emphasized Container Button**\n- Background: Carbon Surface (`#101010`)\n- Text: Snow White (`#f2f2f2`)\n- Padding: generous (20px all sides)\n- Border: thick solid Warm Charcoal (`3px solid #3d3a39`)\n- Radius: comfortably rounded (8px)\n- A card-like button treatment for larger interactive surfaces (code copy blocks, feature CTAs)\n\n### Cards & Containers\n- Background: Carbon Surface (`#101010`)  one shade lighter than the page canvas\n- Border: `1px solid #3d3a39` (Warm Charcoal) for standard containment; `2px solid #00d992` for highlighted/active cards\n- Radius: comfortably rounded (8px) for content cards; subtly rounded (46px) for smaller inline containers\n- Shadow Level 1: Warm Ambient Haze (`rgba(92, 88, 85, 0.2) 0px 0px 15px`) for standard elevation\n- Shadow Level 2: Deep Dramatic (`rgba(0, 0, 0, 0.7) 0px 20px 60px` + `rgba(148, 163, 184, 0.1) 0px 0px 0px 1px inset`) for hero/feature showcase cards\n- Hover behavior: likely border color shift toward green accent or subtle opacity increase\n- Dashed variant: `1px dashed rgba(79, 93, 117, 0.4)` for workflow/diagram containers  visually distinct from solid-border content cards\n\n### Inputs & Forms\n- No explicit input token data extracted  the site is landing-page focused with minimal form UI\n- The npm install command (`npm create voltagent-app@latest`) is presented as a code block rather than an input field\n- Inferred style: Carbon Surface background, Warm Charcoal border, VoltAgent Mint focus ring, Snow White text\n\n### Navigation\n- Sticky top nav bar on Abyss Black canvas\n- Logo: VoltAgent bolt icon with animated green glow (`drop-shadow` cycling 2px8px)\n- Nav structure: Logo  Product dropdown  Use Cases dropdown  Resources dropdown  GitHub stars badge  Docs CTA\n- Link text: Snow White (`#f2f2f2`) at 1416px Inter, weight 500\n- Hover: links transition to green variants (`#00c182` or `#00ffaa`)\n- GitHub badge: social proof element integrated directly into nav\n- Mobile: collapses to hamburger menu, single-column vertical layout\n\n### Image Treatment\n- Dark-themed product screenshots and architectural diagrams dominate\n- Code blocks are treated as primary visual content  syntax-highlighted with SFMono-Regular\n- Agent workflow visualizations appear as interactive node graphs with green connection lines\n- Decorative dot-pattern backgrounds appear behind hero sections\n- Full-bleed within card containers, respecting 8px radius rounding\n\n### Distinctive Components\n\n**npm Install Command Block**\n- A prominent code snippet (`npm create voltagent-app@latest`) styled as a copyable command\n- SFMono-Regular on Carbon Surface with a copy-to-clipboard button\n- Functions as the primary CTA  \"install first, read later\" developer psychology\n\n**Company Logo Marquee**\n- Horizontal scrolling strip of developer/company logos\n- Infinite animation (`scrollLeft`/`scrollRight`, 2580s durations)\n- Pauses on hover and for users with reduced-motion preferences\n- Demonstrates ecosystem adoption without cluttering the layout\n\n**Feature Section Cards**\n- Large cards combining code examples with descriptive text\n- Left: code snippet with syntax highlighting; Right: feature description\n- Green accent border (`2px solid #00d992`) on highlighted/active features\n- Internal padding: generous (2432px estimated)\n\n**Agent Flow Diagrams**\n- Interactive node-graph visualizations showing agent coordination\n- Connection lines use VoltAgent green variants\n- Nodes styled as mini-cards within the Warm Charcoal border system\n\n**Community / GitHub Section**\n- Large GitHub icon as the visual anchor\n- Star count and contributor metrics prominently displayed\n- Warm social proof: Discord, X, Reddit, LinkedIn, YouTube links in footer\n\n## 5. Layout Principles\n\n### Spacing System\n- Base unit: 8px\n- Scale: 2px, 4px, 5px, 6px, 6.4px, 8px, 12px, 16px, 20px, 24px, 28px, 32px, 40px, 48px, 64px\n- Button padding: 12px 16px (standard), 20px (container-button)\n- Card internal padding: approximately 2432px\n- Section vertical spacing: generous (estimated 6496px between major sections)\n- Component gap: 1624px between sibling cards/elements\n\n### Grid & Container\n- Max container width: approximately 12801440px, centered\n- Hero: centered single-column with maximum breathing room\n- Feature sections: alternating asymmetric layouts (code left / text right, then reversed)\n- Logo marquee: full-width horizontal scroll, breaking the container constraint\n- Card grids: 23 column for feature showcases\n- Integration grid: responsive multi-column for partner/integration icons\n\n### Whitespace Philosophy\n- **Cinematic breathing room between sections**: Massive vertical gaps create a \"scroll-through-chapters\" experience  each section feels like a new scene.\n- **Dense within components**: Cards and code blocks are internally compact, with tight line-heights and controlled padding. Information is concentrated, not spread thin.\n- **Border-defined separation**: Rather than relying solely on whitespace, VoltAgent uses the Warm Charcoal border system (`#3d3a39`) to delineate content zones. The border IS the whitespace signal.\n- **Hero-first hierarchy**: The top of the page commands the most space  the \"AI Agent Engineering Platform\" headline and npm command get maximum vertical runway before the first content section appears.\n\n### Border Radius Scale\n- Nearly squared (4px): Small inline elements, SVG containers, code spans  the sharpest treatment, conveying technical precision\n- Subtly rounded (6px): Buttons, links, clipboard actions  the workhorse radius for interactive elements\n- Code-specific (6.4px): Code blocks, `pre` elements, clipboard copy targets  a deliberate micro-distinction from standard 6px\n- Comfortably rounded (8px): Content cards, feature containers, emphasized buttons  the standard containment radius\n- Pill-shaped (9999px): Tags, badges, status indicators, pill-shaped navigation elements  the roundest treatment for small categorical labels\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Flat (Level 0) | No shadow, no border | Page background (`#050507`), inline text |\n| Contained (Level 1) | `1px solid #3d3a39`, no shadow | Standard cards, nav bar, code blocks |\n| Emphasized (Level 2) | `3px solid #3d3a39`, no shadow | Large interactive buttons, emphasized containers |\n| Accent (Level 3) | `2px solid #00d992`, no shadow | Active/highlighted feature cards, selected states |\n| Ambient Glow (Level 4) | `rgba(92, 88, 85, 0.2) 0px 0px 15px` | Elevated cards, hover states, soft atmospheric lift |\n| Dramatic Float (Level 5) | `rgba(0, 0, 0, 0.7) 0px 20px 60px` + `rgba(148, 163, 184, 0.1) 1px inset` | Hero feature showcase, modals, maximum-elevation content |\n\n**Shadow Philosophy**: VoltAgent communicates depth primarily through **border weight and color**, not shadows. The standard `1px solid #3d3a39` border IS the elevation  adding a `3px` border weight or switching to green (`#00d992`) communicates importance more than adding shadow does. When shadows do appear, they're either warm and diffused (Level 4) or cinematic and dramatic (Level 5)  never medium or generic.\n\n### Decorative Depth\n- **Green Signal Glow**: The VoltAgent bolt logo pulses with a `drop-shadow` animation cycling between 2px and 8px blur radius in Emerald Signal Green. This is the most distinctive decorative element  it makes the logo feel \"powered on.\"\n- **Warm Charcoal Containment Lines**: The warm tone of `#3d3a39` borders creates a subtle visual warmth against the cool black, as if the cards are faintly heated from within.\n- **Dashed Workflow Lines**: `1px dashed rgba(79, 93, 117, 0.4)` creates a blueprint-like aesthetic for architecture diagrams, visually distinct from solid content borders.\n\n## 7. Do's and Don'ts\n\n### Do\n- Use Abyss Black (`#050507`) as the landing page background and Carbon Surface (`#101010`) for all contained elements  the two-shade dark system is essential\n- Reserve Emerald Signal Green (`#00d992`) exclusively for high-signal moments: active borders, glow effects, and the most important interactive accents\n- Use VoltAgent Mint (`#2fd6a1`) for button text on dark surfaces  it's more readable than pure Signal Green\n- Keep heading line-heights compressed (1.01.11) with negative letter-spacing for dense, authoritative text blocks\n- Use the warm gray palette (`#3d3a39`, `#8b949e`, `#b8b3b0`) for borders and secondary text  warmth prevents the dark theme from feeling sterile\n- Present code snippets as primary content  they're hero elements, not supporting illustrations\n- Use border weight (1px  2px  3px) and color shifts (`#3d3a39`  `#00d992`) to communicate depth and importance, rather than relying on shadows\n- Pair system-ui for headings with Inter for body text  the speed/authority of native fonts combined with the precision of a geometric sans\n- Use SFMono-Regular for all code content  it's the developer credibility signal\n- Apply `\"calt\"` and `\"rlig\"` OpenType features across all text\n\n### Don't\n- Don't use bright or light backgrounds as primary surfaces  the entire identity lives on near-black\n- Don't introduce warm colors (orange, red, yellow) as decorative accents  the palette is strictly green + warm neutrals on black. Warm colors are reserved for semantic states (warning, error) only\n- Don't use Emerald Signal Green (`#00d992`) on large surfaces or as background fills  it's an accent, never a surface\n- Don't increase heading line-heights beyond 1.33  the compressed density is core to the engineering-platform identity\n- Don't use heavy shadows generously  depth comes from border treatment, not box-shadow. Shadows are reserved for Level 45 elevation only\n- Don't use pure white (`#ffffff`) as default body text  Snow White (`#f2f2f2`) is the standard. Pure white is reserved for maximum-emphasis headings and button text\n- Don't mix in serif or decorative fonts  the entire system is geometric sans + monospace\n- Don't use border-radius larger than 8px on content cards  9999px (pill) is only for small tags and badges\n- Don't skip the warm-gray border system  cards without `#3d3a39` borders lose their containment and float ambiguously on the dark canvas\n- Don't animate aggressively  animations are slow and subtle (25100s durations for marquee, gentle glow pulses). Fast motion contradicts the \"engineering precision\" atmosphere\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Small Mobile | <420px | Minimum layout, stacked everything, reduced hero text to ~24px |\n| Mobile | 420767px | Single column, hamburger nav, full-width cards, hero text ~36px |\n| Tablet | 7681024px | 2-column grids begin, condensed nav, medium hero text |\n| Desktop | 10251440px | Full multi-column layout, expanded nav with dropdowns, large hero (60px) |\n| Large Desktop | >1440px | Max-width container centered (est. 12801440px), generous horizontal margins |\n\n*23 breakpoints detected in total, ranging from 360px to 1992px  indicating a fluid, heavily responsive grid system rather than fixed breakpoint snapping.*\n\n### Touch Targets\n- Buttons use comfortable padding (12px 16px minimum) ensuring adequate touch area\n- Navigation links spaced with sufficient gap for thumb navigation\n- Interactive card surfaces are large enough to serve as full touch targets\n- Minimum recommended touch target: 44x44px\n\n### Collapsing Strategy\n- **Navigation**: Full horizontal nav with dropdowns collapses to hamburger menu on mobile\n- **Feature grids**: 3-column  2-column  single-column vertical stacking\n- **Hero text**: 60px  36px  24px progressive scaling with maintained compression ratios\n- **Logo marquee**: Adjusts scroll speed and item sizing; maintains infinite loop\n- **Code blocks**: Horizontal scroll on smaller viewports rather than wrapping  preserving code readability\n- **Section padding**: Reduces proportionally but maintains generous vertical rhythm between chapters\n- **Cards**: Stack vertically on mobile with full-width treatment and maintained internal padding\n\n### Image Behavior\n- Dark-themed screenshots and diagrams scale proportionally within containers\n- Agent flow diagrams simplify or scroll horizontally on narrow viewports\n- Dot-pattern decorative backgrounds scale with viewport\n- No visible art direction changes between breakpoints  same crops, proportional scaling\n- Lazy loading for below-fold images (Docusaurus default behavior)\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Brand Accent: \"Emerald Signal Green (#00d992)\"\n- Button Text: \"VoltAgent Mint (#2fd6a1)\"\n- Page Background: \"Abyss Black (#050507)\"\n- Card Surface: \"Carbon Surface (#101010)\"\n- Border / Containment: \"Warm Charcoal (#3d3a39)\"\n- Primary Text: \"Snow White (#f2f2f2)\"\n- Secondary Text: \"Warm Parchment (#b8b3b0)\"\n- Tertiary Text: \"Steel Slate (#8b949e)\"\n\n### Example Component Prompts\n- \"Create a feature card on Carbon Surface (#101010) with a 1px solid Warm Charcoal (#3d3a39) border, comfortably rounded corners (8px). Use Snow White (#f2f2f2) for the title in system-ui at 24px weight 700, and Warm Parchment (#b8b3b0) for the description in Inter at 16px. Add a subtle Warm Ambient shadow (rgba(92, 88, 85, 0.2) 0px 0px 15px).\"\n- \"Design a ghost button with transparent background, Snow White (#f2f2f2) text in Inter at 16px, a 1px solid Warm Charcoal (#3d3a39) border, and subtly rounded corners (6px). Padding: 12px vertical, 16px horizontal. On hover, background shifts to rgba(0, 0, 0, 0.2).\"\n- \"Build a hero section on Abyss Black (#050507) with a massive heading at 60px system-ui, line-height 1.0, letter-spacing -0.65px. The word 'Platform' should be colored in Emerald Signal Green (#00d992). Below the heading, place a code block showing 'npm create voltagent-app@latest' in SFMono-Regular at 14px on Carbon Surface (#101010) with a copy button.\"\n- \"Create a highlighted feature card using a 2px solid Emerald Signal Green (#00d992) border instead of the standard Warm Charcoal. Keep Carbon Surface background, comfortably rounded corners (8px), and include a code snippet on the left with feature description text on the right.\"\n- \"Design a navigation bar on Abyss Black (#050507) with the VoltAgent logo (bolt icon with animated green glow) on the left, nav links in Inter at 14px weight 500 in Snow White, and a green CTA button (Carbon Surface bg, VoltAgent Mint text) on the right. Add a 1px solid Warm Charcoal bottom border.\"\n\n### Iteration Guide\nWhen refining existing screens generated with this design system:\n1. Focus on ONE component at a time\n2. Reference specific color names and hex codes  \"use Warm Parchment (#b8b3b0)\" not \"make it lighter\"\n3. Use border treatment to communicate elevation: \"change the border to 2px solid Emerald Signal Green (#00d992)\" for emphasis\n4. Describe the desired \"feel\" alongside measurements  \"compressed and authoritative heading at 36px with line-height 1.11 and -0.9px letter-spacing\"\n5. For glow effects, specify \"Emerald Signal Green (#00d992) as a drop-shadow with 28px blur radius\"\n6. Always specify which font  system-ui for headings, Inter for body/UI, SFMono-Regular for code\n7. Keep animations slow and subtle  marquee scrolls at 2580s, glow pulses gently","tags":["design","voltagent","galyarder","framework","galyarderlabs","agent-skills","agentic-framework","agents","ai-agents","automation","claude-code-plugin","codex-skills"],"capabilities":["skill","source-galyarderlabs","skill-design-md-voltagent","topic-agent-skills","topic-agentic-framework","topic-agents","topic-ai-agents","topic-automation","topic-claude-code-plugin","topic-codex-skills","topic-copilot-skills","topic-cursor-skills","topic-framework","topic-gemini-skills","topic-hermes-skill"],"categories":["galyarder-framework"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/galyarderlabs/galyarder-framework/design-md-voltagent","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add galyarderlabs/galyarder-framework","source_repo":"https://github.com/galyarderlabs/galyarder-framework","install_from":"skills.sh"}},"qualityScore":"0.455","qualityRationale":"deterministic score 0.46 from registry signals: · indexed on github topic:agent-skills · 11 github stars · SKILL.md body (25,969 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-18T19:07:49.954Z","embedding":null,"createdAt":"2026-05-10T01:06:49.041Z","updatedAt":"2026-05-18T19:07:49.954Z","lastSeenAt":"2026-05-18T19:07:49.954Z","tsv":"'-0.6':1096,1118 '-0.65':1059,1364,3527 '-0.9':1076,1367,3738 '0':862,863,871,872,934,935,936,1512,1513,1514,1697,1698,1699,2417,2491,2492,2493,3499,3500,3501 '0.1':946,1708,2502 '0.2':904,1515,1684,2475,3457,3502 '0.4':1519,1739,2652 '0.45':1164,1438 '0.5':1135,1528 '0.7':937,1700,2494 '0.75':1234 '0.81':1279 '0.88':1201,1217 '0.90':1188 '008b00':754 '00c182':1859 '00d992':108,262,349,865,874,1656,2041,2459,2544,2704,2800,2914,3362,3539,3580,3716,3751 '00ffaa':1861 '050507':45,243,514,2424,2678,3372,3510,3618 '0px':905,906,938,947,948,949,1685,1686,1701,1709,1710,1711,2476,2477,2495,3458,3459 '1':15,1676,2429,3676 '1.0':1358,3523 '1.00':1057,1173 '1.01.11':295,2745 '1.11':1074,3736 '1.13':1160 '1.231.43':1251 '1.25':1131,1147 '1.33':1095,1117,1237,2937 '1.331.45':1268 '1.40':1134,1150 '1.43':1220 '1.431.65':1204 '1.50':1092,1114 '1.501.65':1176 '1.56':1163 '1.65':1191,1282 '1008':627 '101010':542,1543,1595,1637,2687,3377,3408,3563 '10251440px':3127 '10b981':409 '1112px':1266 '117':1738,2651 '12801440px':2167,3149 '12px':1233,1493,1550,2123,2134,3181,3489 '1314px':1249 '13px':1278 '14.45':1186 '1416px':1849 '1440px':3142 '148':943,1705,2499 '14px':1200,1216,3559,3637 '15px':907,1687,2478,3460 '161':1566 '1624px':2157 '163':944,1706,2500 '16px':1172,1494,1551,2124,2135,3182,3446,3475,3491 '184':945,1707,2501 '18px':1159 '196':1526 '1992px':3162 '1px':950,1500,1646,1712,1733,2430,2503,2528,2646,2793,3411,3477,3659 '2':341,1693,2443,3117,3232,3684 '2.25':1071 '2.52':1221 '20px':939,1130,1146,1602,1702,2125,2137,2496 '214':1565 '23':2202,3153 '2432px':2048,2145 '24px':1091,1113,2126,3101,3243,3433 '25100s':3068 '2554a0':480 '2580s':1996,3788 '28px':2127,3758 '2am':73 '2fd6a1':380,1547,2724,3367 '2px':864,1654,2039,2116,2457,2592,2794,3575,3711 '2px8px':1827 '3':970,2456,3230,3700 '3.75':1054 '30':419 '300400':1116 '300400500600700':1393 '306cce':464 '32px':2128 '33':1525 '360px':3160 '36px':1070,3114,3242,3731 '3b82f6':494 '3d3a39':162,250,304,568,1502,1612,1648,2281,2432,2446,2530,2623,2761,2799,3047,3382,3415,3481 '3px':1610,2444,2537,2795 '4':1478,2470,2563,3719 '40':839 '400':1056,1073,1267 '400500':1236,1414 '400600':1175,1203 '400686':1250 '40px':2129 '420767px':3103 '420px':3092 '44x44px':3213 '45':2969 '46px':1669 '47':1564 '48px':2130 '4cb3d4':823 '4f5d75':837 '4px':2117,2329 '5':651,2107,2489,2569,3743 '50':500 '500':1190,1852,3639 '500600':1149 '5px':2118 '6':2409,3761 '6.4':2120,2359 '600':1133,1162,1219 '60px':940,1053,1703,2497,3139,3241,3516 '6496px':2151 '64px':2131 '6px':1506,2119,2345,2375,3487 '7':2668,3779 '700':1094,1281,1397,3435 '7681024px':3116 '79':1736,2649 '8':3082 '80d280':768 '818cf8':441 '85':903,1683,2474,3456 '88':902,1682,2473,3455 '8b949e':163,305,681,2762,3397 '8px':873,1616,1663,1935,2114,2122,2378,2594,3023,3420,3595 '9':3350 '92':901,1681,2472,3454 '93':1527,1737,2650 '9999px':2392,3027 'abyss':512,553,1812,2676,3370,3508,3616 'accent':107,257,333,356,438,539,751,1726,2037,2454,2720,2888,2925,3358 'accept':1338 'access':508 'achiev':195 'across':561,2855 'action':809,2349 'activ':1585,2711 'active/highlighted':2462 'ad':2535,2549 'add':3447,3657 'adequ':3185 'adjust':1473,3252 'admonit':833 'adopt':2011 'aesthet':318,2658 'age':32 'agent':148,1907,2050,2059,2307,3311,3351 'aggress':3062 'ai':31,147,2306 'airi':1380 'alert':786 'aliv':77,340 'almost':580 'alongsid':3724 'altern':1019,2180 'alway':1431,3762 'amber':780,783,794 'ambient':898,1678,2467,3451 'ambigu':3054 'anchor':2088 'anim':866,1820,1993,2589,3061,3063,3626,3781 'announc':94 'app':1778,1952,3552 'appear':1428,1910,1924,2323,2555 'appl':983,994 'apple-system':982 'appli':1453,2849 'approxim':2144,2166 'architectur':99,1889,2660 'area':3187 'arial':993 'around':920 'art':3331 'asymmetr':2181 'atmospher':18,918,2484,3081 'author':203,1294 'authorit':277,2753,3728 'b8b3b0':164,306,658,2763,3392,3439,3695 'background':422,511,548,774,797,820,1485,1508,1540,1592,1634,1795,1923,2423,2683,2866,2920,3325,3369,3467,3495,3591 'badg':1208,1840,1863,2394,3035 'bar':1810,2438,3614 'bare':556 'base':1557,2112 'bdbdbd':705 'begin':3120 'behavior':1570,1719,3084,3300,3349 'behind':1925 'below-fold':3343 'beyond':2936 'bg':3650 'black':43,133,241,513,523,592,1813,2633,2677,2877,2897,3371,3509,3617 'bleed':1930 'block':216,300,1064,1371,1629,1785,1893,1943,2246,2362,2440,2755,3262,3546 'blue':182,493,694,827,843 'blue-gray':181,693,842 'blueprint':2656 'blueprint-lik':2655 'blur':2595,3759 'board':125 'bodi':208,660,1169,1245,1410,2820,2980 'body/ui':1004,3773 'bold':1098,1396 'bolt':884,1817,2581,3623 'border':118,248,332,357,567,586,835,850,1495,1552,1605,1645,1721,1748,1798,2038,2077,2265,2279,2287,2324,2421,2520,2531,2538,2624,2667,2712,2765,2791,2958,3019,3043,3048,3378,3416,3482,3581,3664,3702,3709 'border-defin':2264 'border-radius':3018 'bottom':3663 'boundari':929 'box':2962 'box-shadow':2961 'brand':352,388,3357 'break':2196 'breakpoint':3085,3154,3173,3335 'breath':2176,2219 'bridg':427 'bright':733,782,2863 'brighten':712 'brighter':722 'brownish':581 'bug':1346 'build':3503 'built':38,155 'button':383,547,640,1170,1182,1276,1288,1407,1481,1576,1591,1621,1971,2132,2140,2346,2384,2451,2726,2998,3177,3363,3464,3567,3647 'button-text':382 'callout':830 'calt':1016,1466,2850 'cantarel':989 'canva':134,242,518,593,678,1644,1814,3058 'caption':1197 'carbon':132,240,540,1541,1593,1635,1793,1963,2685,3375,3406,3561,3589,3648 'carbon-black':131,239 'card':545,922,1152,1619,1632,1659,1666,1717,1750,1932,2018,2020,2072,2141,2200,2243,2380,2436,2464,2480,2637,3026,3045,3111,3198,3285,3373,3404,3572 'card-lik':1618 'cards/elements':2160 'carri':126,206 'case':1834 'categor':451,2407 'caution':788 'center':2168,2170,3147 'chang':3089,3333,3707 'chapter':2231,3284 'charact':1472 'characterist':238 'charcoal':566,1499,1609,1650,1797,2076,2278,2616,3381,3414,3480,3587,3662 'charg':879 'chromat':266 'cinemat':2218,2565 'circuit':124 'class':436 'clear':698,1535 'clickabl':1536 'clinic':314 'clipboard':1287,1970,2348,2365 'clutter':2013 'cobalt':462,479 'cockpit':176 'cockpit-lik':175 'code':97,215,286,320,452,1024,1244,1254,1261,1271,1275,1406,1627,1784,1892,1946,2022,2028,2183,2245,2335,2357,2361,2439,2778,2841,3261,3272,3545,3599,3691,3778 'code-button':1405 'code-specif':2356 'cold':252,575 'collaps':1872,3214,3222 'color':171,342,498,572,602,623,995,1722,2523,2797,2882,2899,3355,3534,3687 'column':1878,2173,2203,2212,3105,3118,3131,3231,3233,3236 'combin':2021,2827 'come':2956 'comfort':1492,1504,1549,1614,1661,2376,3179,3417,3592 'command':27,1587,1773,1942,1958,2301,2313 'communic':2516,2545,2802,3705 'communiti':2079 'compact':2249 'compani':1983 'compet':459 'complianc':509 'compon':1479,1939,2155,2242,3399,3680 'compress':298,1063,1348,1357,2744,2939,3248,3726 'concentr':2260 'condens':3121 'confid':104 'confirm':762 'connect':1917,2061 'consola':1032 'constraint':2199 'contain':249,563,571,1590,1633,1653,1673,1742,1933,2139,2162,2164,2198,2334,2382,2387,2427,2453,2617,2690,3051,3146,3310,3379 'container-button':2138 'content':325,690,1665,1749,1899,2284,2321,2379,2512,2666,2782,2842,3025 'context':471,765 'contextu':1018,1471 'contract':893 'contradict':3077 'contrast':536,645,742,1387 'contributor':2092 'control':2256 'convey':2340 'cool':443,692,824,2632 'coordin':2060 'copi':1285,1382,1628,1968,2366,3566 'copy-to-clipboard':1284,1967 'copyabl':1957 'coral':800,816 'coral-pink':815 'core':351,2942 'corner':3419,3486,3594 'count':2090 'courier':1035 'creat':173,296,554,875,915,1349,1369,1415,1775,1949,2226,2625,2653,3401,3549,3568 'credibl':233,287,2847 'crop':3337 'cta':402,1539,1842,1976,3646 'ctas':1631 'custom':430,1304 'cycl':1826,2590 'danger':799,811 'dark':37,74,168,310,405,467,532,582,604,677,1580,1884,2696,2729,2772,3057,3302 'dark-them':1883,3301 'darken':1509,1569 'darker':529 'darkest':482 'dash':834,849,1731,1734,2643,2647 'data':1757 'dcdcdc':720 'de':688 'de-emphas':687 'decor':848,1919,2574,2606,2887,3006,3324 'deep':25,478,755,930,1694 'deep-spac':24 'default':426,1458,1530,2979,3348 'defin':2266 'deliber':142,2369 'delin':2283 'demonstr':2009 'dens':297,1375,1441,2240,2752 'densiti':1350,2940 'depth':2410,2517,2575,2803,2955 'describ':3720 'descript':1206,2025,2035,3442,3606 'design':2,5,9,12,1337,3461,3611,3674 'design-md-voltag':1 'desir':3722 'desktop':3126,3141 'destruct':808 'detect':3155 'develop':35,224,316,1981,2846 'developer-fac':34 'developer-termin':315 'developer/company':1990 'diagram':100,853,1890,2052,2661,3306,3313 'diffus':912,2561 'direct':1868,3332 'discord':2099 'display':1048,1295,2095 'distinct':1744,1938,2372,2605,2663 'doc':1841 'document':470,490,764 'docusaurus':465,3347 'domin':1891 'dot':1921,3322 'dot-pattern':1920,3321 'downward':955 'dramat':931,954,1419,1695,2486,2567 'drop':330,860,869,1517,1824,2587,3755 'drop-shadow':329,859,868,1823,2586,3754 'dropdown':1832,1835,1837,3136,3221 'dual':270 'dual-typographi':269 'durat':1997,3069 'earn':1423 'ecosystem':412,2010 'ecosystem-standard':411 'edg':926 'eeeeee':739 'effect':328,359,655,880,2714,3746 'either':2558 'electr':52,339,878 'element':121,337,888,969,1532,1866,2332,2355,2364,2401,2607,2691,2786 'elev':558,921,932,1690,2411,2479,2511,2534,2970,3706 'emerald':55,259,346,408,753,2598,2701,2911,3359,3536,3577,3713,3748 'emoji':996,999 'emphas':689,1589,2383,2441,2452 'emphasi':637,1101,1408,2995,3718 'enabl':1465 'energi':57,267,353 'engin':91,149,2308,2946,3079 'engineering-platform':2945 'enough':3202 'ensur':1470,3184 'entir':59,156,376,2871,3009 'error':805,819,2906 'essenti':2699 'est':3148 'estim':2049,2150 'everi':235 'everyth':3096 'evok':61 'exampl':2023,3398 'exclus':846,2705 'exist':3669 'expand':891,3133 'experi':60,2232 'explicit':1754 'extract':1758 'extrem':1356 'eye':614 'eye-friend':613 'f2f2f2':598,1599,1847,2984,3387,3424,3470 'face':36 'faint':960,2639 'faintest':526 'fallback':981,1007,1029 'famili':974 'fast':3075 'fb565b':801 'fd9c9f':813 'featur':1015,1143,1154,1343,1469,1630,2016,2034,2044,2178,2205,2381,2463,2506,2854,3228,3403,3571,3605 'feel':63,202,313,338,588,1373,2235,2612,2775,3723 'ffba00':781 'ffdd80':792 'ffffff':609,631,1490,2977 'field':1790 'fill':798,2921 'first':1978,2294,2320 'fix':3172 'flat':2415 'float':968,2487,3053 'flow':2051,3312 'fluid':3165 'focus':75,476,506,1558,1765,1801,3677 'fog':703,724 'foit/fout':1315 'fold':3345 'font':191,223,973,1040,1306,2826,3007,3765 'footer':706,2106 'form':1752,1768 'friend':84,615 'full':1929,2192,3109,3128,3206,3217,3292 'full-ble':1928 'full-width':2191,3108,3291 'function':1972 'gap':2156,2225,3193 'generat':3671 'generic':2573 'generous':1434,1601,2047,2149,2954,3150,3280 'gentl':1392,3072,3791 'geometr':213,2833,3012 'get':2314 'ghost':639,1482,1572,3463 'github':1838,1862,2080,2083 'glow':115,327,358,858,890,919,1822,2468,2578,2713,3073,3628,3745,3789 'gradient':854,1384 'graph':1914,2056 'gray':161,183,247,576,665,695,704,719,844,2759,3042 'green':56,106,136,261,326,348,389,398,414,461,538,734,756,771,856,1522,1538,1577,1725,1821,1857,1916,2036,2065,2543,2576,2600,2703,2738,2893,2913,3361,3538,3579,3627,3645,3715,3750 'grid':2161,2201,2208,3119,3168,3229 'guid':3353,3666 'hamburg':1874,3106,3224 'harsh':589 'haze':899,1679 'head':194,278,291,646,976,1066,1087,1107,1153,1296,1403,1455,2740,2816,2932,2996,3514,3542,3729,3770 'headlin':117,2310 'heartbeat':896 'heat':2640 'heavi':953,2952 'heavili':3166 'height':294,1044,1354,2254,2743,2935,3522,3735 'helvetica':992 'hero':324,1049,1351,1926,2169,2293,2505,2785,3098,3112,3124,3138,3239,3505 'hero-first':2292 'hero/feature':1715 'hex':3690 'hierarchi':699,1038,1125,1420,2295 'high':69,2708 'high-pow':68 'high-sign':2707 'highest':363,636,741 'highest-contrast':740 'highest-emphasi':635 'highest-sign':362 'highlight':454,1902,2032,3570 'highlighted/active':1658,2043 'horizont':1986,2194,3151,3218,3263,3317,3492 'hover':714,736,1507,1567,1718,1853,2000,2481,3494 'icon':1818,2084,2215,3624 'ide':71 'ident':258,2872,2948 'illustr':2789 'imag':1881,3299,3346 'impact':1062 'import':2546,2718,2805 'includ':3597 'increas':1730,2931 'indic':373,778,1559,2396,3163 'indigo':445 'indigo-violet':444 'infer':1791 'infinit':1992,3259 'info':821 'inform':829,2258 'inherit':1008,1317 'inlin':1253,1672,2331,2425 'input':1751,1755,1789 'inset':951,961,1713,2504 'instal':1772,1941,1977 'instanc':628 'instant':1313 'instead':3582 'integr':1867,2207 'inter':205,279,1005,1112,1145,1158,1171,1185,1199,1232,1464,1850,2818,3444,3473,3635,3771 'interact':120,365,475,887,1531,1625,1912,2053,2354,2450,2719,3197 'interfac':21,377 'intern':2045,2142,2248,3297 'interrupt':49 'introduc':170,2880 'item':3256 'iter':3665 'keep':2739,3588,3780 'key':237,3088 'keyboard':505 'label':1168,1198,1289,1448,2408 'lack':185 'land':86,516,1763,2681 'landing-pag':1762 'larg':2019,2082,2449,2916,3137,3140,3201 'larger':1624,3021 'largest':1310 'later':1980 'latest':1779,1953,3553 'layer':559 'layout':1880,2015,2108,2182,3094,3132 'lazi':3340 'lean':187 'left':2027,2184,3603,3631 'letter':1045,1080,1141,1225,1362,1436,2749,3525,3741 'letter-spac':1079,1140,1224,1361,1435,2748,3524,3740 'level':1675,1692,2412,2416,2428,2442,2455,2469,2488,2562,2568,2968 'liber':1033 'lift':2485 'ligatur':1022,1475 'light':664,767,1108,1120,2865 'lighter':551,1640,3699 'like':122,177,894,1374,1620,1720,2236,2657 'line':293,1043,1273,1353,1918,2062,2253,2618,2645,2742,2934,3521,3734 'line-height':292,1352,2252,2741,2933,3520,3733 'link':425,473,707,728,1181,1184,1843,1854,2104,2347,3189,3633 'linkedin':2102 'live':1412,2873 'load':3341 'logo':885,1815,1830,1984,1991,2189,2582,2611,3250,3622 'loop':3260 'lose':3049 'low':417,649 'maco':1325 'maintain':3247,3258,3279,3296 'major':2153 'make':335,2609,3697 'margin':3152 'market':1381 'marque':1985,2190,3071,3251,3785 'massiv':2223,3513 'max':2163,3144 'max-width':3143 'maximum':196,535,644,1061,2175,2315,2510,2994 'maximum-contrast':643 'maximum-elev':2509 'maximum-emphasi':2993 'md':3,10 'mean':1308 'measur':3725 'medium':2571,3123 'menlo':1030 'menu':1875,3225 'metadata':684,1207 'metaphor':144 'metric':2093 'micro':1231,2371 'micro-distinct':2370 'mini':2071 'mini-card':2070 'minim':1767 'minimum':3093,3183,3209 'mint':379,1546,1562,1800,2723,3366,3652 'mist':718 'mix':3002 'mobil':1871,3091,3102,3227,3289 'modal':2508 'moment':366,638,2710 'monaco':1031 'mono':1034 'monospac':1023,1037,1277,3014 'most-us':620 'motion':2007,3076 'multi':2211,3130 'multi-column':2210,3129 'mute':841 'name':1155,3086,3688 'narrow':3319 'nativ':201,1293,1322,2825 'native-feel':200 'nav':1180,1183,1809,1828,1870,2437,3107,3122,3134,3219,3632 'navig':710,1194,1806,2400,3188,3196,3216,3613 'navigation-specif':1193 'near':41,521,737,2327,2876 'near-black':2875 'near-pur':520 'near-pure-black':40 'negat':1360,2747 'neutral':160,302,594,2895 'never':1452,2570,2926 'new':1036,2238 'node':1913,2055,2067 'node-graph':2054 'nois':172 'none':1553 'normal':1151,1177,1192,1205,1238,1252,1269,1283 'note':1047 'noto':990 'npm':1771,1774,1940,1948,2312,3548 'number':1274 'off-whit':616 'one':549,745,1638,3679 'opac':418,501,650,1516,1729 'opentyp':1014,1456,2853 'oper':1319 'orang':2883 'outlin':1483,1520,1556,1560 'outline-bas':1555 'output':1256 'overlay':654 'overlin':1126,1156,1211,1447 'pad':1491,1548,1600,2046,2133,2143,2257,3180,3275,3298,3488 'page':87,517,1643,1764,2300,2422,2682,3368 'pair':957,1432,2811 'pale':791 'palett':153,303,343,431,2760,2890 'paper':674 'parchment':657,702,3391,3438,3694 'partner/integration':2214 'pastel':770 'pattern':1922,3323 'paus':1998 'percept':557 'person':1323 'philosophi':2217,2514 'pill':2390,2398,3028 'pill-shap':2389,2397 'pink':817 'pinkish':669 'place':3543 'platform':92,150,2309,2947,3531 'posit':761,777,1139 'power':70,139,299,371,1574,2613 'power-on':370 'pre':2363 'precis':113,214,281,2342,2830,3080 'prefer':2008 'present':1781,2777 'preserv':3271 'pressed/active':487 'prevent':308,585,2770 'primari':345,463,466,483,544,600,975,1537,1897,1975,2781,2868,3383 'primarili':2518 'principl':1290,2109 'pro':1329 'product':1831,1886 'progress':1395,3244 'promin':967,1945,2094 'prompt':3352,3400 'proof':1865,2098 'proport':3277,3308,3338 'provid':697 'psycholog':1982 'puls':53,877,2583,3074,3790 'pure':42,180,396,522,607,629,716,1488,2736,2975,2988 'purpl':440 'purpos':79 'px':1060,1077,1097,1119,1136,1165,1187,1222,1365,1368,2121,2360,3528,3739 'px2.52px':1439 'quick':3354 'radius':1503,1613,1660,1936,2325,2352,2388,2596,3020,3760 'rang':3158 'rather':1301,1378,1417,1786,2268,2806,3170,3268 'ratio':3249 'raw':102 're':2557,2784 'read':137,672,1582,1979 'readabl':394,2734,3273 'recommend':3210 'red':803,2884 'reddit':2101 'reduc':2006,3097,3276 'reduced-mot':2005 'refer':7,1272,3356,3685 'refin':3668 'regular':220,1027,1248,1265,1906,1961,2838,3557,3776 'reinforc':229 'reli':2270,2808 'rem':1055,1072,1093,1115,1132,1148,1161,1174,1189,1202,1218,1235,1280 'render':197,1312,1476 'requir':1021 'reserv':485,632,1227,1399,2700,2901,2966,2991 'resourc':1836 'respect':1934 'respons':2209,3083,3167 'revers':2188 'rgb':1563 'rgba':900,933,942,1511,1524,1680,1696,1704,1735,2471,2490,2498,2648,3453,3498 'rhythm':3282 'right':2033,2186,3610,3656 'ring':492,497,963,1802 'rlig':1017,1468,2852 'roboto':987 'role':344,1039 'room':2177,2220 'rose':812 'round':1505,1615,1662,1668,1937,2344,2377,3418,3485,3593 'roundest':2403 'rule':972 'runway':2317 'saa':85 'san':991,1241,2834,3013 'sans-serif':1240 'scale':2115,2326,3245,3307,3326,3339 'scene':2239 'screen':3670 'screenshot':1887,3304 'scroll':236,1987,2195,2229,3253,3264,3316,3786 'scroll-through-chapt':2228 'scrollleft':1994 'scrollright':1995 'secondari':437,450,659,727,743,1003,2767,3388 'section':1065,1167,1927,2017,2081,2146,2154,2179,2222,2234,2322,3274,3506 'see':225 'sego':985,997,1000,1334 'select':2465 'semant':750,2903 'separ':2267 'serif':1242,3004 'serv':3204 'sf':1328 'sfmono':219,284,1026,1247,1264,1905,1960,2837,3556,3775 'sfmono-regular':218,1025,1246,1263,1904,1959,2836,3555,3774 'shade':484,550,1639,2695 'shadow':331,861,870,913,956,1674,1691,1825,2419,2434,2448,2461,2513,2525,2550,2553,2588,2810,2953,2963,2964,3452,3756 'shape':2391,2399 'sharp':928 'sharpest':2338 'shift':1723,2798,3496 'show':2058,3547 'showcas':1716,2206,2507 'sibl':2159 'side':1604 'signal':128,260,347,364,397,857,2291,2577,2599,2702,2709,2737,2848,2912,3360,3537,3578,3714,3749 'signatur':570 'simplifi':3314 'singl':256,1877,2172,3104,3235 'single-acc':255 'single-column':1876,2171,3234 'site':626,1760 'size':1041,1104,1196,3257 'skill' 'skill-design-md-voltagent' 'skip':3038 'slate':680,836,962,3396 'slight':390,668,721 'slow':3065,3782 'small':1157,1262,2330,2406,3032,3090 'smaller':1671,3266 'smallest':1239 'snap':3174 'snippet':98,321,1947,2029,2779,3600 'snow':596,748,1597,1803,1845,2982,3385,3422,3468,3641 'social':1864,2097 'soft':439,769,917,2483 'soften':166,612,793,814 'softer':1124 'sole':265,2271 'solid':1497,1501,1607,1611,1647,1655,1747,2040,2431,2445,2458,2529,2665,3412,3478,3576,3660,3712 'solid-bord':1746 'sourc':268 'source-galyarderlabs' 'space':26,1046,1081,1142,1226,1363,1437,1445,2110,2148,2304,2750,3190,3526,3742 'spaced-out':1444 'span':2336 'spare':448 'specif':400,1195,1377,2358,3686 'specifi':3747,3763 'speed':198,3254 'speed/authority':2823 'spread':2262 'squar':2328 'stack':192,1013,3095,3238,3286 'standard':413,1178,1484,1652,1689,2136,2374,2386,2435,2527,2987,3585 'star':1839,2089 'stare':65 'state':477,488,759,789,806,2466,2482,2904 'status':2395 'steel':679,3395 'step':746 'steril':254,2776 'sticki':1807 'strategi':3215 'strict':2892 'strip':1988 'structur':1829 'style':1480,1792,1954,2068 'sub':1086,1106,1402 'sub-head':1085,1105,1401 'subt':1667,2343,3484 'subtl':421,653,776,1416,1521,1728,2627,3067,3449,3784 'success':752,758,766,773 'suffici':3192 'support':152,709,2788 'surfac':44,406,510,541,564,605,1542,1581,1594,1626,1636,1794,1964,2686,2730,2869,2917,2928,3199,3374,3376,3407,3562,3590,3649 'surgic':112 'svg':2333 'switch':2541 'symbol':1002 'syntax':453,1260,1901,2031 'syntax-highlight':1900 'system':6,13,190,272,274,855,978,984,1011,1051,1068,1084,1089,1110,1128,1214,1292,1299,1320,1389,1461,2078,2111,2280,2697,2813,3010,3044,3169,3430,3518,3675,3767 'system-n':1291 'system-ui':273,977,1010,1050,1067,1088,1109,1127,1213,1298,1460,2812,3429,3517,3766 'tablet':3115 'tag':1210,1230,2393,3033 'tailwind':407,433,495 'target':2367,3176,3208,3212 'teal':822,826 'teal-blu':825 'technic':103,1376,2341 'termin':28,228,317,1255,1586 'tertiari':682,1588,3393 'text':211,283,384,403,595,601,641,661,683,711,729,744,1179,1209,1243,1311,1370,1411,1487,1544,1578,1596,1805,1844,2026,2185,2426,2727,2754,2768,2821,2857,2981,2999,3099,3113,3125,3240,3364,3384,3389,3394,3471,3607,3653 'theme':17,311,533,1885,2773,3303 'thick':1606 'thin':1496,2263 'throughout':1477 'thumb':3195 'tight':290,1058,1075,1347,2251 'tightest':1078 'time':3683 'timestamp':685 'tini':1212,1270 'tint':423,1523 'tip':832 'titl':1144,3427 'token':1756 'tone':583,911,2621 'tool':231 'top':1808,2297 'topic-agent-skills' 'topic-agentic-framework' 'topic-agents' 'topic-ai-agents' 'topic-automation' 'topic-claude-code-plugin' 'topic-codex-skills' 'topic-copilot-skills' 'topic-cursor-skills' 'topic-framework' 'topic-gemini-skills' 'topic-hermes-skill' 'total':3157 'touch':3175,3186,3207,3211 'toward':1724 'transform':1138,1440 'transit':731,1855 'transpar':1486,3466 'treat':1895 'treatment':1450,1622,1882,2339,2404,2413,2959,3294,3703 'ts':2673 'two':2694 'two-shad':2693 'typographi':186,271,971 'ubuntu':988 'ui':210,275,336,491,979,986,998,1001,1012,1052,1069,1090,1111,1129,1215,1300,1335,1462,1769,2814,3431,3519,3768 'ui/body':282 'ultra':289 'ultra-tight':288 'unassum':1533 'underton':528,670 'unit':2113 'uppercas':1137,1166,1229,1421,1427 'use':110,217,354,399,415,447,468,560,622,647,725,845,1297,1390,1833,2063,2275,2414,2675,2721,2756,2790,2835,2862,2910,2951,2974,3017,3178,3421,3573,3692,3701 'user':2003 'util':435 'variabl':1257,1340 'variant':385,1122,1732,1858,2066 'varieti':457 'vertic':1879,2147,2224,2316,3237,3281,3287,3490 'viewport':3267,3320,3328 'violet':446 'visibl':502,923,1554,3330 'visual':16,143,456,1743,1898,1909,2057,2087,2628,2662 'vivid':802 'voltag':4,11,14,19,378,428,883,1545,1561,1777,1799,1816,1951,2064,2274,2515,2580,2722,3365,3551,3621,3651 'voltagent-app':1776,1950,3550 'warm':159,246,301,527,565,579,656,663,701,897,910,1498,1608,1649,1677,1796,2075,2096,2277,2559,2615,2620,2758,2881,2894,2898,3041,3380,3390,3413,3437,3450,3479,3586,3661,3693 'warm-gray':245,3040 'warm-neutr':158 'warm-ton':909 'warmer':391 'warmth':178,2629,2769 'warn':779,785,790,796,810,2905 'web':1305 'weight':1042,1099,1121,1258,1383,1386,1394,1851,2521,2539,2792,3434,3638 'white':597,608,618,630,717,738,749,1489,1598,1804,1846,2976,2983,2989,3386,3423,3469,3642 'whitespac':2216,2273,2290 'wide':1425 'widest':1223 'width':2165,2193,3087,3110,3145,3293 'window':1331 'within':1931,2073,2241,2642,3309 'without':169,458,927,2012,3046 'word':1442,3530 'workflow':852,1908,2644 'workflow/diagram':1741 'workhors':2351 'would':184 'wrap':3270 'x':2100 'yellow':2885 'youtub':2103 'zone':2285","prices":[{"id":"711cd3b0-bd04-45e6-b736-22d83f7404dc","listingId":"2b664f6d-069d-42f8-a8c4-70e5f3256b32","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"galyarderlabs","category":"galyarder-framework","install_from":"skills.sh"},"createdAt":"2026-05-10T01:06:49.041Z"}],"sources":[{"listingId":"2b664f6d-069d-42f8-a8c4-70e5f3256b32","source":"github","sourceId":"galyarderlabs/galyarder-framework/design-md-voltagent","sourceUrl":"https://github.com/galyarderlabs/galyarder-framework/tree/main/skills/design-md-voltagent","isPrimary":false,"firstSeenAt":"2026-05-10T01:06:49.041Z","lastSeenAt":"2026-05-18T19:07:49.954Z"}],"details":{"listingId":"2b664f6d-069d-42f8-a8c4-70e5f3256b32","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"galyarderlabs","slug":"design-md-voltagent","github":{"repo":"galyarderlabs/galyarder-framework","stars":11,"topics":["agent-skills","agentic-framework","agents","ai-agents","automation","claude-code-plugin","codex-skills","copilot-skills","cursor-skills","framework","gemini-skills","hermes-skill","marketing","openclaw-skills","opencode-skills","seo","tdd"],"license":"mit","html_url":"https://github.com/galyarderlabs/galyarder-framework","pushed_at":"2026-05-17T20:44:45Z","description":"An agentic skills framework orchestration for the 1-Man Army. Implementing Autonomous Goal Integration (AGI) to transform vision into deterministic execution.","skill_md_sha":"41cde2d11cb4ed4d804f9200bded005b1154e29b","skill_md_path":"skills/design-md-voltagent/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/galyarderlabs/galyarder-framework/tree/main/skills/design-md-voltagent"},"layout":"multi","source":"github","category":"galyarder-framework","frontmatter":{"name":"design-md-voltagent","description":"Design system reference for design md voltagent."},"skills_sh_url":"https://skills.sh/galyarderlabs/galyarder-framework/design-md-voltagent"},"updatedAt":"2026-05-18T19:07:49.954Z"}}