SEO Geo
ReScienceLab/opc-skills
SEO & GEO (Generative Engine Optimization) for websites. An agent skill from ReScienceLab/opc-skills.
Refactor a Vue page or component from Vuetify to semantic HTML5 + Schema.org microdata + Stylus element selectors.
Install Vuetify To Semantic
$ npx skills add scott-fryxell/brayness --skill vuetify-to-semantic -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install scott-fryxell/brayness vuetify-to-semantic --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/scott-fryxell/brayness.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/vuetify-to-semantic .claude/skills/vuetify-to-semantic && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "vuetify-to-semantic" agent skill from https://github.com/scott-fryxell/brayness/tree/main/skills/vuetify-to-semantic into .claude/skills/vuetify-to-semantic/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "vuetify-to-semantic", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/scott-fryxell/brayness/tree/main/skills/vuetify-to-semanticType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add scott-fryxell/brayness --skill vuetify-to-semantic -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install scott-fryxell/brayness vuetify-to-semantic --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/scott-fryxell/brayness.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/vuetify-to-semantic .agents/skills/vuetify-to-semantic && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "vuetify-to-semantic" agent skill from https://github.com/scott-fryxell/brayness/tree/main/skills/vuetify-to-semantic into .agents/skills/vuetify-to-semantic/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "vuetify-to-semantic", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add scott-fryxell/brayness --skill vuetify-to-semantic -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install scott-fryxell/brayness vuetify-to-semantic --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/scott-fryxell/brayness.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/vuetify-to-semantic .cursor/skills/vuetify-to-semantic && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "vuetify-to-semantic" agent skill from https://github.com/scott-fryxell/brayness/tree/main/skills/vuetify-to-semantic into .cursor/skills/vuetify-to-semantic/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "vuetify-to-semantic", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/scott-fryxell/brayness.git --path skills/vuetify-to-semantic--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add scott-fryxell/brayness --skill vuetify-to-semantic -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install scott-fryxell/brayness vuetify-to-semantic --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/scott-fryxell/brayness.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/vuetify-to-semantic .gemini/skills/vuetify-to-semantic && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "vuetify-to-semantic" agent skill from https://github.com/scott-fryxell/brayness/tree/main/skills/vuetify-to-semantic into .gemini/skills/vuetify-to-semantic/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "vuetify-to-semantic", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install scott-fryxell/brayness vuetify-to-semanticInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add scott-fryxell/brayness --skill vuetify-to-semantic -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/scott-fryxell/brayness.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/vuetify-to-semantic .github/skills/vuetify-to-semantic && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "vuetify-to-semantic" agent skill from https://github.com/scott-fryxell/brayness/tree/main/skills/vuetify-to-semantic into .github/skills/vuetify-to-semantic/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "vuetify-to-semantic", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add scott-fryxell/brayness --skill vuetify-to-semantic -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install scott-fryxell/brayness vuetify-to-semantic --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/scott-fryxell/brayness.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/vuetify-to-semantic .opencode/skills/vuetify-to-semantic && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "vuetify-to-semantic" agent skill from https://github.com/scott-fryxell/brayness/tree/main/skills/vuetify-to-semantic into .opencode/skills/vuetify-to-semantic/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "vuetify-to-semantic", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
vuetify-to-semantic- GitHub stars
- 125
- Token cost
- ~1.2k tokens
- SKILL.md length
- 492 words
- Files
- 6 (incl. references)
- Skills in repo
- 27
- Repo updated
- First seen
- Licence
- MIT
At a glance
Refactor a Vue page or component from Vuetify to semantic HTML5 + Schema.org microdata + Stylus element selectors.
- Works in 7 steps: Read the target file → Map components to semantic elements → Add Schema.org microdata → …
- Converting a seeq-app view
- SKILL.md covers Process and Output format
- Reaches schema.org
What it does
Vuetify To Semantic is an agent skill from scott-fryxell/brayness. Refactor a Vue page or component from Vuetify to semantic HTML5 + Schema.org microdata + Stylus element selectors. Use when converting a seeq-app view or component file, removing v- components, replacing utility classes with Stylus, or adding Schema.org microdata to an entity page. Triggers include "refactor this page", "convert this component", "remove vuetify from", "make this semantic".
Its SKILL.md is about 1.2k tokens, which your agent loads only when the skill is triggered. The skill folder holds 7 other files, including reference files (for example `references/component-map.md`, `references/examples/project-card.md` and `references/examples/story-status-chip.md`).
It sits in Marketing & SEO, covering Schema markup and Refactoring. It works with Vue.js. The repository describes itself as: A harness for the anxious digital mind. A safe place for creatives to keep their creative soul while exploring digital skills. The licence is MIT.
When your agent uses it
- Converting a seeq-app view
- Removing v- components
- Replacing utility classes with Stylus
- Adding Schema.org microdata to an entity page
Example prompts
- “refactor this page”
- “convert this component”
- “remove vuetify from”
- “/vuetify-to-semantic”
Workflow steps
7 steps, taken from the step headings in SKILL.md.
What it can do on your machine
Read from SKILL.md and the folder at commit 71f10e2. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md (its code samples are stylus).
From the folder's file list and the shell code blocks in SKILL.md.
Network
Hosts in commands or code, which the agent is likely to contact:
schema.org
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Vuetify To Semantic loads about 1.2k tokens when it runs, and up to ~6.4k if it reads all its reference files. Until then it costs about 103 tokens; SKILL.md has 492 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from scott-fryxell/brayness at commit 71f10e2, republished under its MIT licence (© scott-fryxell). 492 words, ~1,217 tokens.
Download SKILL.mdSave it as
.claude/skills/vuetify-to-semantic/SKILL.md (or your agent's skills folder). This skill also uses 5 other files; get the full folder from GitHub.- name
- vuetify-to-semantic
- description
- Refactor a Vue page or component from Vuetify to semantic HTML5 + Schema.org microdata + Stylus element selectors. Use when converting a seeq-app view or component file, removing v-* components, replacing utility classes with Stylus, or adding Schema.org microdata to an entity page. Triggers include "refactor this page", "convert this component", "remove vuetify from", "make this semantic".
- metadata.category
- Frontend & Refactoring
- metadata.tags
- vuetify, semantic-html, microdata, schema.org, stylus, seeq
Vuetify to Semantic
Refactor a seeq-app Vue page or component from Vuetify to semantic HTML5, Schema.org microdata, and Stylus element selectors. Follows the work/realness pattern: no utility classes, no replacement component library, styles applied via element and attribute selectors only.
Process
1. Read the target file
Read the full .vue file. Identify:
- Every
v-*component used - Every Vuetify utility class (
pa-*,ma-*,d-flex,text-h*,elevation-*, etc.) - Every
useTheme/useDisplayimport from'vuetify' - What real-world entities the page represents (projects, stories, people, organizations)
2. Map components to semantic elements
Use references/component-map.md for the full mapping.
Key decisions:
v-row/v-col-> remove both; apply CSS Grid to the parent element directlyv-card-><article>with the correct Schema.orgitemtypefor the entityv-sheet-><section>or<aside>based on rolev-list/v-list-item-><ul>/<li>only when content is truly a list; use<article>per item when each stands alonev-btnwithto=-><a>; withoutto=-><button>v-icon-><svg class="icon"><use href="/icons.svg#name" /></svg>v-dialog-><dialog>v-navigation-drawer-><nav>v-app-bar-><header>
3. Add Schema.org microdata
Use references/microdata-entities.md for Seeq entity types.
Rules:
- Add
itemscope itemtype="https://schema.org/X"to the container element - Add
itempropto child elements that carry data fields - Use
<time datetime="...">for dates - Use
<data value="...">for machine-readable values not in visible text - Do not add microdata to layout-only elements
4. Rewrite the template
Output a clean <template> block:
- No
v-*components - No Vuetify utility classes on any element
- Semantic elements with correct hierarchy
- Schema.org attributes on entity containers and their fields
data-*attributes for JS state hooks where needed- ARIA only where native HTML cannot express the needed behavior
- Keep all Vue directives (
v-if,v-for,v-model,@click,:src, etc.) intact
5. Replace Vuetify composables
useDisplay->use_displaycomposable (createsrc/use/display.js, matching realness'ssrc/use/layout) usingmatchMediauseTheme->use_themecomposable (createsrc/use/theme.js) readingprefers-color-scheme
Update the <script setup> import accordingly.
Show full SKILL.md (192 more words)Show less
6. Write the Stylus
Follow references/stylus-patterns.md.
Rules:
- One
<style lang="stylus" scoped>block per component for component-specific layout - Shared element styles live in
src/style/elements/ - Never use class selectors for styling - use element, attribute, and microdata selectors
- Use
base-lineas the spacing unit - Use CSS custom properties for colors (
var(--color-primary), etc.) - Use
standard-border,standard-button,standard-gridmixins where applicable - Dark mode via
@media (prefers-color-scheme: dark)blocks, not JS
Selector patterns:
// entity type
article[itemtype*="ResearchProject"]
...
// state via data attribute
button[data-status="active"]
...
// structural position
nav > ul > li > a
...
// ARIA state
button[aria-expanded="true"]
...7. Review
Before outputting, verify:
- No
v-*components remain - No Vuetify utility classes remain
- No
class=attributes used for styling (only for JS hooks if unavoidable) - Every entity container has correct Schema.org
itemtype - Every data field has
itemprop - All interactive elements are correct (
buttonvsa) - Images have
alt,loading="lazy", anditemprop="image"where appropriate - Forms have explicit
<label>for every input - CSS Grid replaces all grid row/column wrapper elements
- Stylus uses element/attribute selectors only
Output format
Return three blocks in order:
<template>- the full refactored template<script setup>- updated script (only if imports changed)<style lang="stylus" scoped>- component-scoped Stylus for layout specific to this component
If shared element styles need to be added to src/style/elements/, note them separately after the component output.
© scott-fryxell, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 5 other files (references) in skills/vuetify-to-semantic of scott-fryxell/brayness.
- SKILL.md
- references/component-map.md
- references/examples/project-card.md
- references/examples/story-status-chip.md
- references/microdata-entities.md
- references/stylus-patterns.md
Open the folder on GitHubat commit 71f10e2
Compare with similar skills
Vuetify To Semantic next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Vuetify To Semantic this skillscott-fryxell/brayness | 125 | — | ~1.2k | Automated safety check: Pass | MIT | |
| SEO GeoReScienceLab/opc-skills | 1.8k | 4 repos | ~2.1k | Automated safety check: Pass | Apache-2.0 | |
| GEO-First SEO Audit Toolzubair-trabzada/geo-seo-claude | 11k | — | ~2.8k | Automated safety check: Notes | MIT | |
| SEO Optimizerailabs-393/ai-labs-claude-skills | 455 | 1 repos | ~3.2k | Automated safety check: Pass | MIT | |
| Portaljs Add Dcatdatopian/portaljs | 2.4k | 1 repos | ~1.8k | Automated safety check: Pass | MIT | |
| Schema Markupfreekmurze/dotfiles | 1k | 15 repos | ~1.2k | Automated safety check: Pass | None |
Similar skills
GEO-First SEO Audit Tool
zubair-trabzada/geo-seo-claude
Audits a website for AI search visibility across ChatGPT, Claude, Perplexity and Google AI Overviews while checking traditional SEO, schema and E-E-A-T content quality.
SEO Optimizer
ailabs-393/ai-labs-claude-skills
This skill should be used when analyzing HTML/CSS websites for SEO optimization, fixing SEO issues, generating SEO reports, or implementing SEO best practices.
Portaljs Add Dcat
datopian/portaljs
Make a PortalJS portal harvestable by national/EU/US open-data portals — emit standards-compliant DCAT catalog feeds (DCAT 2/3, DCAT-AP, DCAT-US, national profiles) in JSON-LD, Turtle, and RDF/XML…
Schema Markup
freekmurze/dotfiles
When the user wants to add, fix, or optimize schema markup and structured data on their site.
Geo
liangdabiao/GEO-Content-Optimizer-Skill
完整的 GEO（生成式引擎优化）服务流水线：给一个产品官网 URL 和介绍材料， 做站点诊断与 AI 答案采样、生成带验收标准的执行工单、产出可直接部署的资产 （llms.txt / JSON-LD / 定义块 / FAQ / 内容大纲与初稿）、自动验收工单是否闭环、 并打包成可直接发给客户的交付物。可按周期复跑，做长期 GEO 运营与月报。
More from scott-fryxell/brayness
All 27 skills in this repoLogo Finder
scott-fryxell/brayness
Find and install brand SVG logos via SVGL (https://svgl.app/) and Wikimedia Commons fallbacks into any project's static asset folder.
Test Coverage
scott-fryxell/brayness
Write Vitest specs for Vue 3 JavaScript (Vite Plus, happy-dom, @vue/test-utils) and analyze V8 coverage + Fallow health to prioritize test-first refactors.
Flexible Visual System
scott-fryxell/brayness
Derive a project's visual rules from its existing tokens, palette, type scale, logo, and icons (Intake), then generate raw SVG vector graphics from those rules as a small composable set (module…
Hyperframes
scott-fryxell/brayness
Create video compositions, animations, title cards, overlays, captions, voiceovers, audio-reactive visuals, and scene transitions in HyperFrames HTML.
Motion Systems
scott-fryxell/brayness
A skill your agent uses when designing or implementing motion for web interfaces, including CSS transitions and keyframes, linear() easing design, transform strategy (translate/rotate vs…
Vue Inspect
scott-fryxell/brayness
Inspect live Vue 3 component state via agent-browser eval - no Devtools extension, no console.log.
Related
Works with
Categories
Questions about Vuetify To Semantic
What does Vuetify To Semantic do?
Refactor a Vue page or component from Vuetify to semantic HTML5 + Schema.org microdata + Stylus element selectors. Vuetify To Semantic is an agent skill from scott-fryxell/brayness.org microdata + Stylus element selectors.
When should I use Vuetify To Semantic?
Vuetify To Semantic fits situations like: converting a seeq-app view; removing v- components; replacing utility classes with Stylus; adding Schema.org microdata to an entity page.
How do I install Vuetify To Semantic in Claude Code?
Run `npx skills add scott-fryxell/brayness --skill vuetify-to-semantic -a claude-code`. Or copy the skill folder (skills/vuetify-to-semantic in scott-fryxell/brayness) into .claude/skills/vuetify-to-semantic in your project. Claude Code loads it when a task matches its description.
How do I install Vuetify To Semantic in Codex?
Run `npx skills add scott-fryxell/brayness --skill vuetify-to-semantic -a codex`. Or copy the skill folder (skills/vuetify-to-semantic in scott-fryxell/brayness) into .agents/skills/vuetify-to-semantic in your project. Codex loads it when a task matches its description.
Can I use Vuetify To Semantic in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add scott-fryxell/brayness --skill vuetify-to-semantic -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/vuetify-to-semantic, .gemini/skills/vuetify-to-semantic, .github/skills/vuetify-to-semantic and .opencode/skills/vuetify-to-semantic in your project.
What does Vuetify To Semantic need to run?
SKILL.md names no scripts, command-line tools or credentials: Vuetify To Semantic is instructions for the agent only.
Does Vuetify To Semantic access the network?
SKILL.md names 1 domain. In commands or code: schema.org; the agent is likely to contact it when it follows the instructions. This is read from the text; nothing was executed.
Is Vuetify To Semantic safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Vuetify To Semantic use?
Vuetify To Semantic is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Vuetify To Semantic use?
About 1.2k tokens (SKILL.md is roughly 4.9k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 5.2k tokens, read only when the agent opens those files.
What are the alternatives to Vuetify To Semantic?
Skills that share tags, products or a category with Vuetify To Semantic: SEO Geo (ReScienceLab/opc-skills, 1.8k stars), GEO-First SEO Audit Tool (zubair-trabzada/geo-seo-claude, 11k stars), SEO Optimizer (ailabs-393/ai-labs-claude-skills, 455 stars) and Portaljs Add Dcat (datopian/portaljs, 2.4k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Vuetify To Semantic?
scott-fryxell (a GitHub user) maintains it in scott-fryxell/brayness, which has 125 GitHub stars. The repository holds 27 skills in this directory. The repository was last updated on September 28, 2026.
Source: scott-fryxell/brayness on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.