| name | tactile-ui-builder |
| description | Build interfaces with tactile-css in plain HTML/CSS, React, Vue, or Tailwind. Use when a user wants to install this package, choose between raw CSS classes and framework wrappers, apply Tactile themes, or compose neumorphic UI with the library's exported components in another project. |
Tactile UI Builder
Use this skill when the task is about consuming tactile-css, not maintaining this repository.
Quick Start
- Read references/usage-map.md.
- Pick the integration path that matches the user's app:
- Plain HTML/CSS for static pages or framework-agnostic markup.
- React for JSX apps using
tactile-css/react.
- Vue for Vue 3 apps using
tactile-css/vue.
- Tailwind when the user wants Tactile shadows and tokens mixed with utility classes.
- Import the stylesheet once with
import 'tactile-css/css' unless the user is on a CDN-only setup.
- Apply a theme early with
data-theme or TactileTheme.
- Prefer the smallest surface that solves the task:
- Raw classes for existing markup.
- React/Vue wrappers for componentized apps.
- Tailwind plugin when the app is already utility-first.
Integration Rules
- Default package install:
npm install tactile-css
- React apps also need
react; Vue apps also need vue.
- Do not import the CSS multiple times across app entrypoints.
- In React and Vue, use the exported wrappers first; drop to raw classes only when the wrapper surface does not cover the needed markup.
- In Vue, prefer
v-model for supported inputs instead of manually wiring modelValue.
- For theme switches, use one of:
classic, mono, iron, paper, terminal, warm.
Component Selection
Use references/usage-map.md for concrete imports and examples.
- General UI: buttons, cards, inputs, fields, segmented controls, tabs, badges, avatars, divider, modal, toast, accordion.
- Control objects:
TactileDisplay, TactileKnob, TactileMeter.
- Input-heavy UI:
TactileInput, TactileSelect, TactileTextarea, TactileCheckbox, TactileSwitch, TactileSlider.
- AI/chat UI:
TactileAIChat, TactileAIMessage, TactileAIToolbar, TactileAISuggestions, TactileAIComposer, TactileAIStatus.
- Date/time UI:
TactileDateInput, TactileTimeInput, TactileCalendar*, TactileTimeCard*, TactileClock.
Response Pattern
When using this skill for a user request:
- State the chosen integration path.
- Provide the minimum install and import snippet.
- Compose the requested UI with Tactile components or classes.
- Mention theme choice if none was specified.
- Keep examples copyable and aligned with the package exports.
Boundaries
- This skill is for building with the library in another app.
- If the task is to add or change components inside this repository, use the maintainer workflow instead.
- If the user wants publish, release, or lockfile work, do not use this skill as the primary workflow.
