Agent-Skills.md

Agent Skills: InKCre UI Web

Use @inkcre/ui-web Vue components for forms, feedback, overlays, media, navigation, JSON editing, styling, router adapters, and i18n integration.

UncategorizedID: InKCre/design/ui-web

Repository

InKCre/design
InKCre

Install this agent skill to your local

pnpm dlx add-skill https://github.com/InKCre/ui/tree/HEAD/packages/web/skills/ui-web

Skill Files

Browse the full folder contents for ui-web.

Download Skill

Loading file tree…

packages/web/skills/ui-web/SKILL.md

Skill Metadata

Name
ui-web
Description
Use @inkcre/ui-web Vue components for forms, feedback, overlays, media, navigation, JSON editing, styling, router adapters, and i18n integration.
<!-- Generated by scripts/build-agent-skills.ts. Do not edit directly. -->

InKCre UI Web

Use When

Use this skill when building or reviewing Vue application UI with @inkcre/ui-web, or when deciding which InKCre component composition matches a product task.

Workflow

  1. Identify the product intent and interaction state.
  2. 从 DESIGN.md 的总纲按当前任务读取设计正文；无需加载全部文件，再用 references/component-map.md 选择组件。
  3. For multi-component work, read references/composition-recipes.md.
  4. Load only the selected files under references/components/.
  5. Check integration, styling, and common-mistake references only when relevant.
  6. Implement through public package imports; do not depend on repository source paths.

Quick Selection

  • Application navigation and branding: InkHeader
  • Single action: InkButton
  • Structured form: InkForm layout="col" 搭配有 label/error 的内置控件；自定义字段才使用 InkField
  • Schema-driven configuration form: InkAutoForm
  • Controlled tabs and route-backed tab links: InkTabs
  • JSON configuration editing: InkJsonEditor
  • Destructive confirmation: InkDoubleCheck 提供确认弹层；InkDialog 支持异步等待和较复杂决策
  • Custom or positioned overlay: InkPopup; add InkScrim only when the composition does not already own one
  • Loading state: InkLoading；已知结构首次读取使用 InkSkeleton
  • Empty or error state: InkPlaceholder
  • Expandable media: InkImage
  • Paged collection: InkPagination

Import And Registration

Use named imports for locally registered components:

import { InkButton, InkForm, InkInput } from "@inkcre/ui-web";

Use the plugin when the application intentionally registers every public component:

import InKCreUiWeb from "@inkcre/ui-web";
import "@inkcre/ui-web/styles";

app.use(InKCreUiWeb);

Rules

  • Choose components by product intent and interaction semantics, not only visual resemblance.
  • Prefer package components over local substitutes when the public component contract fits.
  • Use public package exports and documented subpaths; never import src/components files.
  • 普通表单从 InkForm layout="col" 和内置 label/error 开始，页面布局由宿主 CSS 负责。
  • Distinguish loading, empty, error, and confirmation states instead of using one generic feedback surface.
  • Read only the component references needed for the current task.

References

  • DESIGN.md: 设计总纲与按任务阅读的路径；正文分别说明立场、视觉、组合和判断依据。
  • references/component-map.md: intent-to-component routing.
  • references/composition-recipes.md: reviewed multi-component workflows.
  • references/integration.md: installation, router, and i18n boundaries.
  • references/styling-and-themes.md: CSS, Sass, tokens, and themes.
  • references/common-mistakes.md: package-specific failure modes.
  • references/components/Ink*.md: generated public API facts plus reviewed guidance.

Avoid

  • Do not invent props or events from conventions used by another UI library.
  • Do not treat low-level InkPopup or InkScrim as a replacement for InkDialog when the standard dialog workflow fits.
  • Do not expose repository paths, generated implementation files, or internal prop helpers to consumers.
  • Do not edit this generated skill tree directly; update skill.seed.json or public component facts and regenerate it.