Avoid duplicated business logic in view components.
Keep components composable and testable.
Converted and distributed by TomeVault — claim your Tome and manage your conversions.
1---2name: erinrugas-artisan-agents-vue-component3description: UI Component Skill4---56# UI Component Skill78## When to Apply9- User asks for frontend component/page work.10- Existing UI needs refactor into reusable units.1112## Workflow131. Read UI constraints from `specs/ui-spec.md` and `specs/specs.md`.142. Detect project UI stack and conventions from repository.153. Implement component/page with:16 - clear props/contracts17 - typed state/events18 - loading/error/empty states19 - accessibility basics (labels, focus, landmarks)204. Reuse existing design system/component primitives first.2122## Quality Bar23- No `any` unless unavoidable and justified.24- Avoid duplicated business logic in view components.25- Keep components composable and testable.2627---28> Converted and distributed by [TomeVault](https://tomevault.io/claim/erinrugas) — claim your Tome and manage your conversions.29<!-- tomevault:4.0:skill_md:2026-04-13 -->
Run npx skillmds@latest add tomevault-io/erinrugas-artisan-agents-vue-component in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.
UI Component Skill It is listed under Web & Frontend on SkillMD.
This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.
This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.
Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.
tomevault-io (@tomevault-io) published this skill. Their other Agent Skills are listed on their SkillMD profile.
tomevault-io