[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M69A2CWHBTW3DEKEF4TCAE2C":3,"skill-same:01M69A2CWHBTW3DEKEF4TCAE2C":96},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":34,"publishedAt":39,"linkOnly":40,"markdownContent":41,"markdownBody":42,"frontMatter":43,"refName":44,"commitSha":45,"skillDirectory":46,"forksCount":47,"repositoryHtmlUrl":48,"repositoryHomepageUrl":49,"ownerHtmlUrl":50,"ownerBlogUrl":51,"ownerDescription":52,"updatedAt":53,"install":54,"resources":67},"01M69A2CWHBTW3DEKEF4TCAE2C","rvap-brand",null,"Applies the RVAP (Real Value Acceleration Program) brand identity — colors, fonts, logo, and layout patterns — consistently to any GitHub Pages website. Use this skill whenever someone asks to brand, rebrand, apply RVAP\u002FRVAS visual identity, make a site look RVAP, match the brand kit, or transform a GitHub Pages site's look and feel to match RVAP. Also trigger when the user shares an HTML\u002FCSS\u002FMkDocs site and says it should look consistent with other RVAP\u002FRVAS materials, even if they don't explicitly say \"brand\".","microsoft\u002Ffrontier-agentic-devops-rvas","microsoft","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F6154722?v=4","01M698VYDXZ6JW5WH3CRV650R8","Microsoft","01M69A1YK8KJKJ09GW92M2DX0H",10,"MIT","https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Ffrontier-agentic-devops-rvas\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Frvap-brand\u002FSKILL.md",[18,23,26,29],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000015","视觉设计",{"categoryNo":27,"categoryName":28,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",{"categoryNo":30,"categoryName":31,"taxonomyType":32,"taxonomyTypeDesc":33},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[35,36,37,38],"rvap brand","css","github","identity","2026-11-10 10:12:30",false,"---\nname: rvap-brand\ndescription: >\n  Applies the RVAP (Real Value Acceleration Program) brand identity — colors, fonts, logo,\n  and layout patterns — consistently to any GitHub Pages website. Use this skill whenever\n  someone asks to brand, rebrand, apply RVAP\u002FRVAS visual identity, make a site look RVAP,\n  match the brand kit, or transform a GitHub Pages site's look and feel to match RVAP.\n  Also trigger when the user shares an HTML\u002FCSS\u002FMkDocs site and says it should look consistent\n  with other RVAP\u002FRVAS materials, even if they don't explicitly say \"brand\".\n---\n\n# RVAP Brand Application Skill\n\nYou have access to the complete RVAP brand kit extracted from `RVAP_brand_kit.pptx`. Your job\nis to transform a GitHub Pages site (vanilla HTML\u002FCSS, MkDocs, Jekyll, or similar) so that\nit consistently uses the RVAP visual identity: colors, typography, logos, and component patterns.\n\n**Before writing a single line of CSS or HTML**, read `references\u002Fbrand-tokens.md` — it has every\nhex value, font name, logo filename, and component recipe you will need. Then come back here for\nthe transformation workflow.\n\n---\n\n## Brand kit at a glance\n\n| Element   | Value |\n|-----------|-------|\n| Primary   | RVAP Blue `#1A77E3` |\n| Headings  | Deep Navy `#032254` |\n| Body text | Charcoal `#47494E` |\n| Accents   | Teal `#14868A` (Scale) · Purple `#504092` (Innovate) · MS Blue `#0078D4` (Build) |\n| Surface   | White `#FFFFFF` · Light Neutral `#E3E6ED` · Surface `#F5F8FE` |\n| Fonts     | Aptos Display (headings) \u002F Aptos (body) — Inter\u002FOutfit as web fallback |\n| Logo dir  | `assets\u002Flogos\u002F` relative to this SKILL.md |\n\n---\n\n## Step 1 — Understand the site\n\nBefore touching anything, map what you're working with:\n\n1. **Identify the site generator**: Look for `mkdocs.yml` (MkDocs), `_config.yml` (Jekyll),\n   or standalone HTML files. The transformation approach differs per type — see the sections below.\n2. **Locate CSS entry points**: Find where fonts, colors, and layout are defined.\n   In MkDocs Material sites this is `docs\u002Fstylesheets\u002Fextra.css` and `mkdocs.yml` `palette:` block.\n   In custom HTML it is usually `assets\u002Fcss\u002Fstyles.css` or inline `\u003Cstyle>` blocks.\n3. **Note the navigation structure**: You will need to add the RVAP logo to the header.\n4. **Check for existing color values**: Quick-grep for any hardcoded hex colors so you know\n   what needs replacing.\n\n---\n\n## Step 2 — Choose a transformation strategy\n\n### Option A: Inject `brand.css` (fastest, non-destructive)\n\nCopy `assets\u002Fbrand.css` (next to this SKILL.md) into the site's assets, then add\n`\u003Clink rel=\"stylesheet\" href=\"\u003Cpath>\u002Fbrand.css\">` as the **last** stylesheet in every HTML page.\nThe CSS custom properties and utility classes will overlay the existing theme.\n\nUse this when:\n- The existing CSS already uses CSS custom properties (`--color-*`, `--font-*`)\n- You want a quick branded skin without restructuring\n\nAfter injecting, you still need to manually fix elements that use hardcoded hex values or\n`font-family` declarations that aren't reading from vars.\n\n### Option B: Replace the token layer in-place (cleaner, recommended)\n\nOpen the main CSS file and replace the `:root { }` \u002F token block with the RVAP tokens from\n`assets\u002Fbrand.css`. Then rename variables throughout if the site used a different naming scheme.\n\nUse this when:\n- The site already has a clean CSS variable system\n- Variable names just need to be remapped to RVAP values\n\n### Option C: Full restyle (MkDocs Material)\n\nEdit `mkdocs.yml` to point at a new `extra.css`, then override the Material theme variables\nwith RVAP values. See the MkDocs section below.\n\n---\n\n## Step 3 — Apply brand colors\n\nReplace the site's color scheme with the RVAP palette. The most common mappings:\n\n| Old role              | RVAP replacement     | Hex       |\n|-----------------------|----------------------|-----------|\n| primary \u002F accent      | RVAP Blue            | `#1A77E3` |\n| secondary accent      | Microsoft Blue       | `#0078D4` |\n| page background       | White                | `#FFFFFF` |\n| card \u002F panel surface  | Surface              | `#F5F8FE` |\n| heading text          | Deep Navy            | `#032254` |\n| body \u002F paragraph text | Charcoal             | `#47494E` |\n| muted \u002F caption text  | Muted                | `#6B7280` |\n| borders \u002F dividers    | Light Neutral        | `#E3E6ED` |\n| links                 | RVAP Blue            | `#1A77E3` |\n| link hover            | Microsoft Blue       | `#0078D4` |\n| hero background       | Gradient (Navy→Blue) | see `brand.css` `.rvap-hero` |\n\nDo a global search-replace pass, then read through the result with fresh eyes to catch\nanything you missed. Pay particular attention to `background-color`, `border-color`,\n`color`, and SVG `fill`\u002F`stroke` attributes.\n\n**For MkDocs Material**, override these CSS variables in `extra.css`:\n```css\n:root {\n  --md-primary-fg-color:         #1A77E3;\n  --md-primary-fg-color--light:  #5B9BD5;\n  --md-primary-fg-color--dark:   #032254;\n  --md-accent-fg-color:          #0078D4;\n  --md-default-fg-color:         #111827;\n  --md-default-bg-color:         #FFFFFF;\n  --md-typeset-color:            #47494E;\n  --md-typeset-a-color:          #1A77E3;\n  --md-code-bg-color:            #F5F8FE;\n}\n```\n\n---\n\n## Step 4 — Apply typography\n\n### Web font loading\n\nAdd to the `\u003Chead>` of every HTML page (or to `extra_css` \u002F `extra_javascript` in MkDocs):\n```html\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Inter:wght@400;500;600;700&family=Outfit:wght@500;600;700;800&display=swap\" rel=\"stylesheet\">\n```\n\nThen declare the font stacks:\n```css\n:root {\n  --font-display: \"Aptos Display\", \"Outfit\", \"Segoe UI\", system-ui, sans-serif;\n  --font-body:    \"Aptos\", \"Inter\", \"Segoe UI\", system-ui, sans-serif;\n}\n\nbody  { font-family: var(--font-body); }\nh1, h2, h3, h4, h5 { font-family: var(--font-display); }\n```\n\n> Aptos is a Microsoft Office font (available on Windows\u002FM365 machines as a system font).\n> Outfit + Inter serve as the visual stand-in on other platforms. The result is visually\n> identical on most user machines.\n\n**For MkDocs Material** add to `mkdocs.yml`:\n```yaml\nextra_css:\n  - stylesheets\u002Fbrand.css   # your brand override file\ntheme:\n  font:\n    text: Inter\n    code: JetBrains Mono\n```\n\n---\n\n## Step 5 — Add the RVAP logo\n\nCopy the appropriate logo file from the skill's `assets\u002Flogos\u002F` directory into the site's\nown assets folder (e.g., `docs\u002Fassets\u002F` for MkDocs, `assets\u002Fimg\u002F` for custom HTML).\n\n| Context                              | Logo file              | Background |\n|--------------------------------------|------------------------|------------|\n| Navigation bar \u002F site header         | `logo-full.png`        | transparent — works on white\u002Flight nav |\n| Hero section \u002F landing page feature  | `logo-full.png`        | transparent — works on dark gradient hero |\n| On white backgrounds (print, slides) | `logo-full-white.png`  | white bg baked in |\n| Favicon \u002F social preview image       | `logo-mark-white.png`  | white bg baked in |\n| Watermark \u002F transparent mark         | `logo-mark.png`        | transparent |\n\n### In custom HTML — replace nav brand:\n```html\n\u003C!-- Replace existing brand\u002Flogo element with: -->\n\u003Ca class=\"brand\" href=\"index.html\" aria-label=\"Real Value Acceleration Program — Home\">\n  \u003Cimg src=\"assets\u002Fimg\u002Flogo-full.png\" alt=\"RVAP\" class=\"rvap-nav-logo\" height=\"32\">\n\u003C\u002Fa>\n```\n\n### In MkDocs (`mkdocs.yml`):\n```yaml\ntheme:\n  name: material\n  logo: assets\u002Flogos\u002Flogo-full.png\n  favicon: assets\u002Flogos\u002Flogo-mark-white.png\n```\n\n---\n\n## Step 6 — Component patterns\n\nApply these recurring RVAP components where the site has matching structures:\n\n### Three-pillar layout (Build \u002F Innovate \u002F Scale)\n\nIf the site has any three-column or three-card feature section, map the columns to the\nRVAP pillars with their accent colors. See `references\u002Fbrand-tokens.md` → \"Component patterns\"\nfor the exact color values per pillar.\n\n### Badge\u002Fpill labels\nWhen tagging content with Build \u002F Innovate \u002F Scale, use the badge recipe from `brand.css`\n(`.rvap-badge.build`, `.rvap-badge.innovate`, `.rvap-badge.scale`).\n\n### Hero \u002F banner\nReplace any existing hero gradient with the RVAP navy-to-blue gradient\n(`linear-gradient(135deg, #032254 0%, #0F3A7A 60%, #1A77E3 100%)`).\n\n### Cards\nUse `border-top: 3px solid \u003Cpillar color>` on content cards to signal which pillar they\nbelong to, with a light tinted surface behind (values in `brand-tokens.md`).\n\n---\n\n## Site-type playbooks\n\n### MkDocs Material site\n\n1. Copy brand assets into `docs\u002Fassets\u002Flogos\u002F` and `docs\u002Fstylesheets\u002F`\n2. Update `mkdocs.yml`: logo, favicon, font, palette primary color\n3. Create \u002F update `docs\u002Fstylesheets\u002Fextra.css` with the token overrides from Step 3\n4. Run `mkdocs build --strict` to validate. Fix any broken asset references.\n\n### Custom HTML\u002FCSS site (like `docs\u002F` in this repo)\n\n1. Copy `brand.css` into `docs\u002Fassets\u002Fcss\u002Fbrand.css`\n2. Copy logo files into `docs\u002Fassets\u002Fimg\u002F`\n3. Add `\u003Clink rel=\"stylesheet\" href=\"assets\u002Fcss\u002Fbrand.css\">` to the `\u003Chead>` of every page\n4. Replace the `:root` variable block in the existing `styles.css` with RVAP tokens\n5. Update the `\u003Cheader>` to use the abbreviated logo image instead of any SVG\u002Ftext mark\n6. Search for hardcoded colors (`#`, `rgb(`, `hsl(`) in `.html` and `.css` files and replace\n   with RVAP equivalents (see color table in Step 3)\n7. Open in browser; visually check: nav, hero, cards, typography, links\n\n### Jekyll \u002F other static generators\n\nFollow the same approach as custom HTML — locate the `_includes\u002F` or `_layouts\u002F` templates\nfor the header and edit those, then update the main SCSS\u002FCSS file.\n\n---\n\n## Quality checklist\n\nBefore calling the transformation done, verify:\n\n- [ ] All primary interactive elements (buttons, links) use RVAP Blue or Navy\n- [ ] All headings use Deep Navy and the display font\n- [ ] Body copy uses Charcoal and the body font\n- [ ] The RVAP logo appears in the navigation header (abbreviated) and optionally hero (full)\n- [ ] No legacy brand colors remain (no orange, green, yellow, or unrelated palettes)\n- [ ] White\u002Flight-neutral backgrounds — no dark mode unless the user asked for it\n- [ ] Cards and feature sections match the pillar accent colors if Build\u002FInnovate\u002FScale content exists\n- [ ] Contrast is maintained: dark text on light backgrounds, white text on navy\u002Fblue backgrounds\n- [ ] Site still builds without errors\n\n---\n\n## What NOT to do\n\n- Don't recolor the logo images — use them as-is (transparent PNGs)\n- Don't use colors outside the RVAP palette unless the user explicitly asks (no random oranges, purples, etc. — Purple is specifically `#504092` for Innovate only)\n- Don't place the chevron\u002Fblue logo over a saturated blue background\n- Don't use the full logo in the navigation bar — abbreviated only\n\n---\n\n## Reference files in this skill\n\n- `references\u002Fbrand-tokens.md` — full color table, font stacks, logo specs, component recipes\n- `assets\u002Fbrand.css` — ready-to-inject CSS with all tokens + utility classes + components\n- `assets\u002Flogos\u002Flogo-full.png` — full horizontal logo, transparent background (1058 × 376, RGBA)\n- `assets\u002Flogos\u002Flogo-full-white.png` — full horizontal logo, white background (1254 × 406)\n- `assets\u002Flogos\u002Flogo-mark-white.png` — square chevron mark, white background (1254 × 1254)\n- `assets\u002Flogos\u002Flogo-mark.png` — standalone chevron mark, transparent background (1047 × 1015, RGBA)\n","# RVAP Brand Application Skill\n\nYou have access to the complete RVAP brand kit extracted from `RVAP_brand_kit.pptx`. Your job\nis to transform a GitHub Pages site (vanilla HTML\u002FCSS, MkDocs, Jekyll, or similar) so that\nit consistently uses the RVAP visual identity: colors, typography, logos, and component patterns.\n\n**Before writing a single line of CSS or HTML**, read `references\u002Fbrand-tokens.md` — it has every\nhex value, font name, logo filename, and component recipe you will need. Then come back here for\nthe transformation workflow.\n\n---\n\n## Brand kit at a glance\n\n| Element   | Value |\n|-----------|-------|\n| Primary   | RVAP Blue `#1A77E3` |\n| Headings  | Deep Navy `#032254` |\n| Body text | Charcoal `#47494E` |\n| Accents   | Teal `#14868A` (Scale) · Purple `#504092` (Innovate) · MS Blue `#0078D4` (Build) |\n| Surface   | White `#FFFFFF` · Light Neutral `#E3E6ED` · Surface `#F5F8FE` |\n| Fonts     | Aptos Display (headings) \u002F Aptos (body) — Inter\u002FOutfit as web fallback |\n| Logo dir  | `assets\u002Flogos\u002F` relative to this SKILL.md |\n\n---\n\n## Step 1 — Understand the site\n\nBefore touching anything, map what you're working with:\n\n1. **Identify the site generator**: Look for `mkdocs.yml` (MkDocs), `_config.yml` (Jekyll),\n   or standalone HTML files. The transformation approach differs per type — see the sections below.\n2. **Locate CSS entry points**: Find where fonts, colors, and layout are defined.\n   In MkDocs Material sites this is `docs\u002Fstylesheets\u002Fextra.css` and `mkdocs.yml` `palette:` block.\n   In custom HTML it is usually `assets\u002Fcss\u002Fstyles.css` or inline `\u003Cstyle>` blocks.\n3. **Note the navigation structure**: You will need to add the RVAP logo to the header.\n4. **Check for existing color values**: Quick-grep for any hardcoded hex colors so you know\n   what needs replacing.\n\n---\n\n## Step 2 — Choose a transformation strategy\n\n### Option A: Inject `brand.css` (fastest, non-destructive)\n\nCopy `assets\u002Fbrand.css` (next to this SKILL.md) into the site's assets, then add\n`\u003Clink rel=\"stylesheet\" href=\"\u003Cpath>\u002Fbrand.css\">` as the **last** stylesheet in every HTML page.\nThe CSS custom properties and utility classes will overlay the existing theme.\n\nUse this when:\n- The existing CSS already uses CSS custom properties (`--color-*`, `--font-*`)\n- You want a quick branded skin without restructuring\n\nAfter injecting, you still need to manually fix elements that use hardcoded hex values or\n`font-family` declarations that aren't reading from vars.\n\n### Option B: Replace the token layer in-place (cleaner, recommended)\n\nOpen the main CSS file and replace the `:root { }` \u002F token block with the RVAP tokens from\n`assets\u002Fbrand.css`. Then rename variables throughout if the site used a different naming scheme.\n\nUse this when:\n- The site already has a clean CSS variable system\n- Variable names just need to be remapped to RVAP values\n\n### Option C: Full restyle (MkDocs Material)\n\nEdit `mkdocs.yml` to point at a new `extra.css`, then override the Material theme variables\nwith RVAP values. See the MkDocs section below.\n\n---\n\n## Step 3 — Apply brand colors\n\nReplace the site's color scheme with the RVAP palette. The most common mappings:\n\n| Old role              | RVAP replacement     | Hex       |\n|-----------------------|----------------------|-----------|\n| primary \u002F accent      | RVAP Blue            | `#1A77E3` |\n| secondary accent      | Microsoft Blue       | `#0078D4` |\n| page background       | White                | `#FFFFFF` |\n| card \u002F panel surface  | Surface              | `#F5F8FE` |\n| heading text          | Deep Navy            | `#032254` |\n| body \u002F paragraph text | Charcoal             | `#47494E` |\n| muted \u002F caption text  | Muted                | `#6B7280` |\n| borders \u002F dividers    | Light Neutral        | `#E3E6ED` |\n| links                 | RVAP Blue            | `#1A77E3` |\n| link hover            | Microsoft Blue       | `#0078D4` |\n| hero background       | Gradient (Navy→Blue) | see `brand.css` `.rvap-hero` |\n\nDo a global search-replace pass, then read through the result with fresh eyes to catch\nanything you missed. Pay particular attention to `background-color`, `border-color`,\n`color`, and SVG `fill`\u002F`stroke` attributes.\n\n**For MkDocs Material**, override these CSS variables in `extra.css`:\n```css\n:root {\n  --md-primary-fg-color:         #1A77E3;\n  --md-primary-fg-color--light:  #5B9BD5;\n  --md-primary-fg-color--dark:   #032254;\n  --md-accent-fg-color:          #0078D4;\n  --md-default-fg-color:         #111827;\n  --md-default-bg-color:         #FFFFFF;\n  --md-typeset-color:            #47494E;\n  --md-typeset-a-color:          #1A77E3;\n  --md-code-bg-color:            #F5F8FE;\n}\n```\n\n---\n\n## Step 4 — Apply typography\n\n### Web font loading\n\nAdd to the `\u003Chead>` of every HTML page (or to `extra_css` \u002F `extra_javascript` in MkDocs):\n```html\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.googleapis.com\">\n\u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Ffonts.gstatic.com\" crossorigin>\n\u003Clink href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Inter:wght@400;500;600;700&family=Outfit:wght@500;600;700;800&display=swap\" rel=\"stylesheet\">\n```\n\nThen declare the font stacks:\n```css\n:root {\n  --font-display: \"Aptos Display\", \"Outfit\", \"Segoe UI\", system-ui, sans-serif;\n  --font-body:    \"Aptos\", \"Inter\", \"Segoe UI\", system-ui, sans-serif;\n}\n\nbody  { font-family: var(--font-body); }\nh1, h2, h3, h4, h5 { font-family: var(--font-display); }\n```\n\n> Aptos is a Microsoft Office font (available on Windows\u002FM365 machines as a system font).\n> Outfit + Inter serve as the visual stand-in on other platforms. The result is visually\n> identical on most user machines.\n\n**For MkDocs Material** add to `mkdocs.yml`:\n```yaml\nextra_css:\n  - stylesheets\u002Fbrand.css   # your brand override file\ntheme:\n  font:\n    text: Inter\n    code: JetBrains Mono\n```\n\n---\n\n## Step 5 — Add the RVAP logo\n\nCopy the appropriate logo file from the skill's `assets\u002Flogos\u002F` directory into the site's\nown assets folder (e.g., `docs\u002Fassets\u002F` for MkDocs, `assets\u002Fimg\u002F` for custom HTML).\n\n| Context                              | Logo file              | Background |\n|--------------------------------------|------------------------|------------|\n| Navigation bar \u002F site header         | `logo-full.png`        | transparent — works on white\u002Flight nav |\n| Hero section \u002F landing page feature  | `logo-full.png`        | transparent — works on dark gradient hero |\n| On white backgrounds (print, slides) | `logo-full-white.png`  | white bg baked in |\n| Favicon \u002F social preview image       | `logo-mark-white.png`  | white bg baked in |\n| Watermark \u002F transparent mark         | `logo-mark.png`        | transparent |\n\n### In custom HTML — replace nav brand:\n```html\n\u003C!-- Replace existing brand\u002Flogo element with: -->\n\u003Ca class=\"brand\" href=\"index.html\" aria-label=\"Real Value Acceleration Program — Home\">\n  \u003Cimg src=\"assets\u002Fimg\u002Flogo-full.png\" alt=\"RVAP\" class=\"rvap-nav-logo\" height=\"32\">\n\u003C\u002Fa>\n```\n\n### In MkDocs (`mkdocs.yml`):\n```yaml\ntheme:\n  name: material\n  logo: assets\u002Flogos\u002Flogo-full.png\n  favicon: assets\u002Flogos\u002Flogo-mark-white.png\n```\n\n---\n\n## Step 6 — Component patterns\n\nApply these recurring RVAP components where the site has matching structures:\n\n### Three-pillar layout (Build \u002F Innovate \u002F Scale)\n\nIf the site has any three-column or three-card feature section, map the columns to the\nRVAP pillars with their accent colors. See `references\u002Fbrand-tokens.md` → \"Component patterns\"\nfor the exact color values per pillar.\n\n### Badge\u002Fpill labels\nWhen tagging content with Build \u002F Innovate \u002F Scale, use the badge recipe from `brand.css`\n(`.rvap-badge.build`, `.rvap-badge.innovate`, `.rvap-badge.scale`).\n\n### Hero \u002F banner\nReplace any existing hero gradient with the RVAP navy-to-blue gradient\n(`linear-gradient(135deg, #032254 0%, #0F3A7A 60%, #1A77E3 100%)`).\n\n### Cards\nUse `border-top: 3px solid \u003Cpillar color>` on content cards to signal which pillar they\nbelong to, with a light tinted surface behind (values in `brand-tokens.md`).\n\n---\n\n## Site-type playbooks\n\n### MkDocs Material site\n\n1. Copy brand assets into `docs\u002Fassets\u002Flogos\u002F` and `docs\u002Fstylesheets\u002F`\n2. Update `mkdocs.yml`: logo, favicon, font, palette primary color\n3. Create \u002F update `docs\u002Fstylesheets\u002Fextra.css` with the token overrides from Step 3\n4. Run `mkdocs build --strict` to validate. Fix any broken asset references.\n\n### Custom HTML\u002FCSS site (like `docs\u002F` in this repo)\n\n1. Copy `brand.css` into `docs\u002Fassets\u002Fcss\u002Fbrand.css`\n2. Copy logo files into `docs\u002Fassets\u002Fimg\u002F`\n3. Add `\u003Clink rel=\"stylesheet\" href=\"assets\u002Fcss\u002Fbrand.css\">` to the `\u003Chead>` of every page\n4. Replace the `:root` variable block in the existing `styles.css` with RVAP tokens\n5. Update the `\u003Cheader>` to use the abbreviated logo image instead of any SVG\u002Ftext mark\n6. Search for hardcoded colors (`#`, `rgb(`, `hsl(`) in `.html` and `.css` files and replace\n   with RVAP equivalents (see color table in Step 3)\n7. Open in browser; visually check: nav, hero, cards, typography, links\n\n### Jekyll \u002F other static generators\n\nFollow the same approach as custom HTML — locate the `_includes\u002F` or `_layouts\u002F` templates\nfor the header and edit those, then update the main SCSS\u002FCSS file.\n\n---\n\n## Quality checklist\n\nBefore calling the transformation done, verify:\n\n- [ ] All primary interactive elements (buttons, links) use RVAP Blue or Navy\n- [ ] All headings use Deep Navy and the display font\n- [ ] Body copy uses Charcoal and the body font\n- [ ] The RVAP logo appears in the navigation header (abbreviated) and optionally hero (full)\n- [ ] No legacy brand colors remain (no orange, green, yellow, or unrelated palettes)\n- [ ] White\u002Flight-neutral backgrounds — no dark mode unless the user asked for it\n- [ ] Cards and feature sections match the pillar accent colors if Build\u002FInnovate\u002FScale content exists\n- [ ] Contrast is maintained: dark text on light backgrounds, white text on navy\u002Fblue backgrounds\n- [ ] Site still builds without errors\n\n---\n\n## What NOT to do\n\n- Don't recolor the logo images — use them as-is (transparent PNGs)\n- Don't use colors outside the RVAP palette unless the user explicitly asks (no random oranges, purples, etc. — Purple is specifically `#504092` for Innovate only)\n- Don't place the chevron\u002Fblue logo over a saturated blue background\n- Don't use the full logo in the navigation bar — abbreviated only\n\n---\n\n## Reference files in this skill\n\n- `references\u002Fbrand-tokens.md` — full color table, font stacks, logo specs, component recipes\n- `assets\u002Fbrand.css` — ready-to-inject CSS with all tokens + utility classes + components\n- `assets\u002Flogos\u002Flogo-full.png` — full horizontal logo, transparent background (1058 × 376, RGBA)\n- `assets\u002Flogos\u002Flogo-full-white.png` — full horizontal logo, white background (1254 × 406)\n- `assets\u002Flogos\u002Flogo-mark-white.png` — square chevron mark, white background (1254 × 1254)\n- `assets\u002Flogos\u002Flogo-mark.png` — standalone chevron mark, transparent background (1047 × 1015, RGBA)\n",{"name":5,"description":7},"main","5b5523d5cf94fcce617f40bc967cdf1e395a5724",".agents\u002Fskills\u002Frvap-brand",4,"https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Ffrontier-agentic-devops-rvas","https:\u002F\u002Fmicrosoft.github.io\u002Ffrontier-agentic-devops-rvas","https:\u002F\u002Fgithub.com\u002Fmicrosoft","https:\u002F\u002Fopensource.microsoft.com","Open source projects and samples from Microsoft","2026-11-13 22:39:30",{"source":8,"skillName":5,"commands":55,"prompt":65,"zipAvailable":66},[56,59,62],{"tool":57,"command":58},"npx","npx skills add microsoft\u002Ffrontier-agentic-devops-rvas --skill rvap-brand",{"tool":60,"command":61},"bunx","bunx skills add microsoft\u002Ffrontier-agentic-devops-rvas --skill rvap-brand",{"tool":63,"command":64},"pnpm","pnpm dlx skills add microsoft\u002Ffrontier-agentic-devops-rvas --skill rvap-brand","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Ffrontier-agentic-devops-rvas\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Frvap-brand\u002FSKILL.md",true,[68,74,78,82,86,90],{"path":69,"resourceType":70,"resourceTypeDesc":71,"sizeBytes":72,"sourceHtmlUrl":73},"assets\u002Fbrand.css","ASSET","资产文件",6636,"https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Ffrontier-agentic-devops-rvas\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Frvap-brand\u002Fassets\u002Fbrand.css",{"path":75,"resourceType":70,"resourceTypeDesc":71,"sizeBytes":76,"sourceHtmlUrl":77},"assets\u002Flogos\u002Flogo-full-white.png",366206,"https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Ffrontier-agentic-devops-rvas\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Frvap-brand\u002Fassets\u002Flogos\u002Flogo-full-white.png",{"path":79,"resourceType":70,"resourceTypeDesc":71,"sizeBytes":80,"sourceHtmlUrl":81},"assets\u002Flogos\u002Flogo-full.png",147425,"https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Ffrontier-agentic-devops-rvas\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Frvap-brand\u002Fassets\u002Flogos\u002Flogo-full.png",{"path":83,"resourceType":70,"resourceTypeDesc":71,"sizeBytes":84,"sourceHtmlUrl":85},"assets\u002Flogos\u002Flogo-mark-white.png",1327559,"https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Ffrontier-agentic-devops-rvas\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Frvap-brand\u002Fassets\u002Flogos\u002Flogo-mark-white.png",{"path":87,"resourceType":70,"resourceTypeDesc":71,"sizeBytes":88,"sourceHtmlUrl":89},"assets\u002Flogos\u002Flogo-mark.png",578884,"https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Ffrontier-agentic-devops-rvas\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Frvap-brand\u002Fassets\u002Flogos\u002Flogo-mark.png",{"path":91,"resourceType":92,"resourceTypeDesc":93,"sizeBytes":94,"sourceHtmlUrl":95},"references\u002Fbrand-tokens.md","REFERENCE","参考文档",5946,"https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Ffrontier-agentic-devops-rvas\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Frvap-brand\u002Freferences\u002Fbrand-tokens.md",[97,118,136,151,164,172],{"skillNo":98,"name":99,"nameZh":6,"description":100,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":101,"categories":102,"keywords":107,"publishedAt":39},"01M69A2WWTHXGFVQHCVHDZ9GXW","github-enterprise-setup","Use this skill to assess, plan, apply, or resume administrative setup for an existing GitHub Enterprise Cloud account on github.com or ghe.com. Trigger for coordinated enterprise or organization work such as organization landing zones, identity and team access, repository factories and rulesets, Actions platform policy, security rollout, Copilot seats and controls, audit, billing, or governance. Use it when the user wants live-state discovery through GitHub CLI and a reviewed multi-resource setup or alignment plan. Do not use it for standalone GitHub CLI authentication troubleshooting, personal repositories, single-repository content or configuration edits, workflow debugging, migration-only work after the target is configured, GitHub Enterprise Server administration, conceptual explanations, or application code that calls GitHub APIs.","https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Ffrontier-agentic-devops-rvas\u002Fblob\u002Fmain\u002Fplugins\u002Fgithub-enterprise-setup\u002Fskills\u002Fgithub-enterprise-setup\u002FSKILL.md",[103,104],{"categoryNo":27,"categoryName":28,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":105,"categoryName":106,"taxonomyType":32,"taxonomyTypeDesc":33},"01JBSEEDCAT000000000000038","人力资源",[108,109,37,110,111,112,38,113,114,115,116,117],"github enterprise setup","setup","github enterprise cloud","governance","copilot","workflow","policy","security","cli","personal",{"skillNo":119,"name":120,"nameZh":6,"description":121,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":122,"licenseFileUrl":6,"sourceHtmlUrl":123,"categories":124,"keywords":128,"publishedAt":39},"01M69A2P9HJE8HSFY4Y6KV17HE","impeccable","Use when the user wants to design, redesign, shape, critique, audit, polish, simplify, harden, animate, or otherwise improve a frontend interface: websites, landing pages, dashboards, product UI, components, forms, settings, onboarding, empty states, and native iOS or Android screens. Handles UX review, hierarchy, layout, typography, color, motion, UX copy, accessibility, responsive behavior, edge cases, and capturing or documenting design systems (DESIGN.md, tokens). Also for making bland UI bolder, loud UI quieter, or ambitious visual effects. Not for backend-only or non-UI tasks.","Apache-2.0","https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Ffrontier-agentic-devops-rvas\u002Fblob\u002Fmain\u002F.github\u002Fskills\u002Fimpeccable\u002FSKILL.md",[125,126,127],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":30,"categoryName":31,"taxonomyType":32,"taxonomyTypeDesc":33},[120,129,130,131,132,133,134,135],"init","components","accessibility","android","review","design","frontend",{"skillNo":137,"name":138,"nameZh":6,"description":139,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":140,"categories":141,"keywords":148,"publishedAt":39},"01M69A2KMG6KA0TH5GSJCE4M59","writing-for-agents","Writing documents for agents. Use when creating or editing skills, or modifying AGENTS.md or CLAUDE.md.","https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Ffrontier-agentic-devops-rvas\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fwriting-for-agents\u002FSKILL.md",[142,145],{"categoryNo":143,"categoryName":144,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000018","写作与文案",{"categoryNo":146,"categoryName":147,"taxonomyType":32,"taxonomyTypeDesc":33},"01JBSEEDCAT000000000000036","内容创作者",[149,150],"writing for agents","writing",{"skillNo":152,"name":153,"nameZh":6,"description":154,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":122,"licenseFileUrl":155,"sourceHtmlUrl":156,"categories":157,"keywords":159,"publishedAt":39},"01M69A2FW5P50B8EYSAKQHDPN9","skill-creator","Create new skills, modify and improve existing skills, and measure skill performance. Use when users want to create a skill from scratch, edit, or optimize an existing skill, run evals to test a skill, benchmark skill performance with variance analysis, or optimize a skill's description for better triggering accuracy.","https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Ffrontier-agentic-devops-rvas\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fskill-creator\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Ffrontier-agentic-devops-rvas\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fskill-creator\u002FSKILL.md",[158],{"categoryNo":27,"categoryName":28,"taxonomyType":21,"taxonomyTypeDesc":22},[160,161,162,163],"skill creator","test","run evals","performance",{"skillNo":165,"name":120,"nameZh":6,"description":121,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":166,"categories":167,"keywords":171,"publishedAt":39},"01M69A260VEZH452YY823DTEF0","https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Ffrontier-agentic-devops-rvas\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fimpeccable\u002FSKILL.md",[168,169,170],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":30,"categoryName":31,"taxonomyType":32,"taxonomyTypeDesc":33},[120,135,134,133,132,131,130],{"skillNo":173,"name":174,"nameZh":6,"description":175,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":176,"categories":177,"keywords":179,"publishedAt":39},"01M69A23K3DFQ5S658MZ87T9MD","humanize-content","Write or revise human-readable text in the project's saved tone of voice. Use whenever composing prose, including documentation, emails, articles, social posts, UI copy, and user-facing explanations or replies, even without an explicit humanization request or slash command. Cut filler, stale content, and needless complexity; create TONE-OF-VOICE.md on first use and reuse it on later runs.","https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Ffrontier-agentic-devops-rvas\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fhumanize-content\u002FSKILL.md",[178],{"categoryNo":146,"categoryName":147,"taxonomyType":32,"taxonomyTypeDesc":33},[180,181],"humanize content","documentation"]