菜单
Hangar's Nuxt/Vue design system and frontend conventions — which component to reach for, UnoCSS tokens, theming, SSR and i18n rules, browser support. Use when writing or reviewing anything under frontend/.
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/HangarMC/Hangar --skill hangar-frontend命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
Conventions for Hangar's Spring Boot backend — controller/service/DAO layering, validation annotations, Flyway migrations, config, caching, and Java style. Use when writing or reviewing anything under backend/.
How to write entries for Hangar's user-facing changelog in frontend/shared/changelog.ts. Use when adding a changelog entry or turning commits and closed issues into one.
Hangar's authorization model — which annotation guards which endpoint, permission types, and the input/output rules that must hold. Use when adding or reviewing any endpoint, permission check, or user-supplied content path.
基于 SOC 职业分类
正在显示 SKILL.md
| name | hangar-frontend |
| description | Hangar's Nuxt/Vue design system and frontend conventions — which component to reach for, UnoCSS tokens, theming, SSR and i18n rules, browser support. Use when writing or reviewing anything under frontend/. |
Nuxt 4 / Vue 3.5 / TypeScript / UnoCSS / Pinia, SSR-first. Components and composables are auto-imported — no import statements for anything in app/components/ or app/composables/.
Dev server, if not already running: pnpm dev (needs a local backend) or pnpm devStaging (proxies staging) → http://localhost:3333, hot reloads.
Reaching for a raw <div>/<button> where one of these exists is the most common consistency defect.
| Need | Use |
|---|---|
| Any button or link-styled-as-button | Button (renders NuxtLink/a/button from to/href) |
| Text link | Link |
| Panel / section container | Card (accent, alternateBackground, flat, padding; header + footer slots) |
| Page wrapper, page heading | Container, PageTitle |
| Dialog | Modal (native <dialog>; activator and footer slots) |
| Banner / callout | Alert (success / info / warning / danger / neutral) |
| Status pill, count badge | Chip (neutral/amber/green/red/primary); Tag for role & channel colors |
| Tab bar | Tabs (vertical, router, compact, divided) |
| Segmented pill row | SegmentedControl — not raw <button>s |
| Labelled form row | FormSection; ProjectSettingsSection inside project settings |
| Label/value line, metric tile | InfoRow, StatTile |
| Wizard | Steps · Table → Table · Paging → Pagination / PaginationButtons |
| Any input | ui/Input* — all wrap InputWrapper (floating label, counter, ErrorTooltip) |
| Async search-and-pick | SearchSelect (debounce, stale-response guard, keyboard nav) |
| Loading | Skeleton for content shape, Spinner for actions, Delayed for Suspense fallbacks |
Validation is vuelidate via useValidation and the rule helpers (required(), maxLength()(n), pattern(), validUrl()).
variant (solid | outline | ghost) × tone (primary | neutral | danger) × size (sm 32px | md 36px default | lg 44px, aligned to input height). iconOnly requires an aria-label. The gap between icon and label is on the button — icons take no mr-*/ml-*.
solid/primary, md.ghost/danger; the confirm inside the modal → solid/danger. Never danger for Back or Cancel.[Cancel ghost/neutral] [Confirm solid] row via the footer slot — no ad-hoc margins.lg is for genuine hero CTAs only.UnoCSS utilities, not raw CSS. Use the shortcuts rather than re-deriving the pairs:
background-body · background-default · background-card · shadow-default · color-primary · border-top-primary · accent-fill · text-gray · text-gray-secondary
--primary-*; hardcoding defeats it. Surface tokens live in app/assets/css/color.css (--input-surface, --surface-sunken, --placeholder).safelist in uno.config.ts or they get tree-shaken out of the build.prefers-reduced-motion for anything animated.Renders on the server first. Register lifecycle hooks before any top-level await in <script setup>, guard window/document access, and check for hydration warnings. Global middleware re-runs on the new navigation after a redirect, so the response may already be sent — guard setResponseHeader with headersSent.
useApi<T>(url, method?, data?) for the public v1 API, useInternalApi<T>(…) for internal endpoints. Route-level data (user/project/version/page) is already loaded by middleware/data.global.ts.
shared/types/backend/ is generated from the backend's Swagger spec — never edit by hand.
Every user-facing string goes through t("…"). Add keys to app/i18n/locales/en.json only; other locales are Crowdin-managed and locales/processed/ is generated.
pnpm lint:eslint && pnpm lint:prettier && pnpm lint:typecheck
Unnecessary comments are a defect, not a style preference. The exception is a non-obvious why a reader would otherwise get wrong or would have hard time parsing (planner quirk, spec constraint, long runs of code): Do not comment just to describe code, SQL, or a change you just made.