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. Read references/component-map.md to shortlist components.
  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 with InkField and the matching form control
  • Schema-driven primitive form: InkAutoForm
  • JSON configuration editing: InkJsonEditor
  • Destructive confirmation: InkDoubleCheck for a compact guard; InkDialog for a focused modal decision
  • Custom or positioned overlay: InkPopup; add InkScrim only when the composition does not already own one
  • Loading state: InkLoading
  • 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.
  • Keep form labels, controls, and layout context explicit through InkForm and InkField.
  • 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

  • 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.