Agent skill
components
Use @inkcre/web-design Vue 3 components. Includes all 22 components with props, events, and usage examples.
Install this agent skill to your Project
npx add-skill https://github.com/InKCre/design/tree/main/packages/web-design/agent-skills/components
SKILL.md
@inkcre/web-design Components
Use this skill when working with the @inkcre/web-design Vue 3 component library.
Overview
@inkcre/web-design provides 21 UI components for Vue 3 applications:
- inkAutoForm
- inkButton
- inkDatetimePickerView
- inkDialog
- inkDoubleCheck
- inkDropdown
- inkField
- inkForm
- inkHeader
- inkImage
- inkInput
- inkJsonEditor
- inkLoading
- inkPagination
- inkPicker
- inkPlaceholder
- inkPopup
- inkScrim
- inkSwitch
- inkTextarea
- inkTooltip
Installation
npm install @inkcre/web-design
# or
pnpm add @inkcre/web-design
Setup
// main.ts
import { createApp } from 'vue'
import InKCreWebDesign from '@inkcre/web-design'
import "@inkcre/web-design/styles"
const app = createApp(App)
app.use(InKCreWebDesign)
Component References
Each component has detailed documentation in the references/ directory:
inkAutoForm- Component with props, events, and examplesinkButton- Component with props, events, and examplesinkDatetimePickerView- Component with props, events, and examplesinkDialog- Component with props, events, and examplesinkDoubleCheck- Component with props, events, and examplesinkDropdown- Component with props, events, and examplesinkField- Component with props, events, and examplesinkForm- Component with props, events, and examplesinkHeader- Component with props, events, and examplesinkImage- Component with props, events, and examplesinkInput- Component with props, events, and examplesinkJsonEditor- Component with props, events, and examplesinkLoading- Component with props, events, and examplesinkOverlay- Component with props, events, and examplesinkPagination- Component with props, events, and examplesinkPicker- Component with props, events, and examplesinkPlaceholder- Component with props, events, and examplesinkPopup- Component with props, events, and examplesinkScrim- Component with props, events, and examplesinkSwitch- Component with props, events, and examplesinkTextarea- Component with props, events, and examplesinkTooltip- Component with props, events, and examples
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
i18n
Integrate @inkcre/web-design with vue-i18n for internationalization.
styling
Use @inkcre/web-design styling system with design tokens, SCSS mixins, and theming.
best-practices
Best practices for developing with @inkcre/web-design including coding guidelines and accessibility.
router
Integrate @inkcre/web-design with Vue Router using the adapter pattern.
clean-sync-conflicts
Use when git status shows .sync-conflict-* files, when starting a conversation with untracked sync conflict files, or when the user mentions Syncthing conflicts in the repo
openclaw-skill
Didn't find tool you were looking for?