tiny-vue-skill_skill

Overview

This skill generates and guides implementation of TinyVue component library code with strict API constraints, docs lookup flows, and coding norms. It helps create components, fetch matching API docs and examples, and configures project-level settings like i18n and themes. The focus is on producing compliant, production-ready Vue code that follows TinyVue conventions.

How this skill works

The skill inspects a component name, then follows a defined lookup sequence: menus → apis → demos to collect the authoritative API, props, events, slots, types, and example usages. It enforces repository rules and project settings, applies code conventions, and can generate component scaffolding, usage snippets, and configuration steps for installation, theming, and internationalization. Generation always references the canonical docs and example source to avoid guessing.

When to use it

• When scaffolding a new TinyVue component or wrapper
• When implementing UI consistent with TinyVue API and conventions
• When you need authoritative API docs, props, events, slots, and types
• When configuring project-level settings: install, i18n, themes, dark mode
• When searching for example implementations or demo code to copy or adapt

Best practices

• Always follow the ordered lookup: component name → API doc → example demo source
• Do not infer behavior from other libraries; use only TinyVue docs and demos
• Keep generated components small and typed; map props and events to explicit interfaces
• Include concise usage examples and link to the exact demo source used
• Run linting and formatting rules from the project-setting guide before PRs

Example use cases

• Generate a reusable DatePicker wrapper using TinyVue API and provide example usage and tests
• Add a theme switcher and dark-mode support configured via the project-setting docs
• Translate component labels and messages using the i18n setup from webdoc
• Refactor an existing form to use TinyVue inputs by mapping props and events to your app interfaces
• Produce a demo file that demonstrates component composition exactly matching the library examples