YS-Agent Frontend Engineering Guidelines
Paste the following prompt into your AI chat to install this skill:
Please follow https://skillhub.cn/install/skillhub.md to install @user_fbf2a1f5/ys-agent.
About this skill
Problem to solve
In ys-agent frontend work, small deviations accumulate: components import axios directly, styles hard-code hex values, menus are hand-written in views, API types are missing, Element Plus icons fail silently, and user-facing text is hard-coded. Individually these issues look minor, but they make multi-agent iteration, mock integration, and maintenance fragile.
How the skill works
The skill turns docs/frontend-engineering-plan.md from rationale into executable rules. It starts by matching the task to a workflow in references/workflows.md, from W1 to W10, then runs locate, type-first, template reuse, and self-check.
Key constraints include:
- Directory as contract: check references/conventions.md before adding files.
- API layering: views call Pinia store actions, modules call src/api/modules/, and axios exists only in src/api/client.ts.
- Types first: define interface, Props, Emits, and store state shapes before implementation.
- Mandatory i18n: visible text uses $t('key'); hard-coded user strings are not allowed.
- Mock first: add MSW handlers before real API integration so npm run dev:mock can run independently.
Before delivery, the skill also checks placeholder leftovers, console.log, TODO, style variables, icon imports, and locale coverage.
Boundaries
It applies to frontend/, frontend docs, and templates. It does not cover Java backend, CLI, MCP server, new heavy dependencies, or core architecture changes. Stop and confirm when the task crosses those boundaries.
Use Cases
- When adding a Skill/MCP square page under frontend/src, use route meta, i18n, mock handlers, and directory rules to wire up the page and menu correctly.
- Before integrating backend APIs, add typed API modules, store actions, service clients, and MSW mocks while keeping components away from direct axios calls.
- When adjusting Element Plus themes, icons, or styles, follow SCSS variables, element-overrides, and icon import rules to avoid hard-coded colors and invisible icons.
- When refactoring views or extracting shared components, reuse templates, remove placeholders, console.log, and hard-coded text, then verify i18n coverage before delivery.
Best For
- Vue frontend engineers maintaining ys-agent frontend, who need consistent directory, API, Pinia, and i18n rules while making changes.
- Developers working on S13 square, detail, or Playground pages, who need menus, routes, translations, and mocks done correctly in one pass.
- Frontend code reviewers, who need to check PRs against the core rules and anti-patterns for axios, types, styles, and user-facing text.
- Engineering leads using agents to write frontend code, who need agents to choose a workflow, reuse templates, and complete delivery checks.
Related Skills
A systematic code error fixing skill that follows a five-step workflow: Reproduce, Isolate, Understand, Fix, Verify, to help developers resolve code errors.
Supports inline SVG/HTML rendering and Mermaid code output, covering common technical diagram creation like architecture and flow diagrams.
Publish HTML, static assets, or build output as a public link, with account management, update, deletion, and AI safety review.
A comprehensive browser automation guide covering navigation, interaction, multi-tab management, and data collection, tailored for domestic web ecosystems and tools like Playwright/Selenium.