tactile-component-library — neumorphic-design tactile-component-library, TactileCSS, community, neumorphic-design, ide skills, neumorphic-ui, Claude Code, Cursor, Windsurf

v1.0.0
GitHub

关于此技能

非常适合需要高级新拟物化 UI 设计能力的前端代理，具有可自定义的阴影样式。 Maintain and expand the Tactile CSS component library across its CSS source, generated dist files, React wrappers, Vue wrappers, TypeScript declarations, and README examples. Use when adding new components, updating existing components, changing class names, extending React/Vue exports, or keeping framework wrappers and docs in sync for this repository.

# 核心主题

neumorphic-design neumorphic-ui
liliang-cn liliang-cn
[8]
[0]
更新于: 3/11/2026

Killer-Skills Review

Decision support comes first. Repository text comes second.

Reference-Only Page Review Score: 6/11

This page remains useful for operators, but Killer-Skills treats it as reference material instead of a primary organic landing page.

Original recommendation layer Concrete use-case guidance Explicit limitations and caution
Review Score
6/11
Quality Score
26
Canonical Locale
en
Detected Body Locale
en

非常适合需要高级新拟物化 UI 设计能力的前端代理，具有可自定义的阴影样式。 Maintain and expand the Tactile CSS component library across its CSS source, generated dist files, React wrappers, Vue wrappers, TypeScript declarations, and README examples. Use when adding new components, updating existing components, changing class names, extending React/Vue exports, or keeping framework wrappers and docs in sync for this repository.

核心价值

赋予代理创建具有物理材料主题的独特 UI 设计的能力，使用最小的新拟物化 CSS 库，支持可自定义的 CSS 类、React 导出和 Vue 导出，同时保持 src/index.css、src/react.mjs、src/vue.mjs、src/react.d.ts、src/vue.d.ts 和 README.md 之间的一致性。

适用 Agent 类型

非常适合需要高级新拟物化 UI 设计能力的前端代理，具有可自定义的阴影样式。

↓ 赋予的主要能力 · tactile-component-library

使用新拟物化主题自定义 UI 设计系统
在 React 和 Vue 框架中生成一致的 CSS 类
调试不同框架包装器中的 UI 不一致性

! 使用限制与门槛

  • 需要 CSS 和 UI 设计原则的知识
  • 仅限于新拟物化设计风格
  • 需要访问 src/index.css、src/react.mjs、src/vue.mjs、src/react.d.ts、src/vue.d.ts 和 README.md 文件

Why this page is reference-only

  • - Current locale does not satisfy the locale-governance contract.
  • - The underlying skill quality score is below the review floor.

Source Boundary

The section below is supporting source material from the upstream repository. Use the Killer-Skills review above as the primary decision layer.

实验室 Demo

Browser Sandbox Environment

⚡️ Ready to unleash?

Experience this Agent in a zero-setup browser environment powered by WebContainers. No installation required.

Boot Container Sandbox

常见问题与安装步骤

以下问题与步骤与页面结构化数据保持一致，便于搜索引擎理解页面内容。

? FAQ

tactile-component-library 是什么？

非常适合需要高级新拟物化 UI 设计能力的前端代理，具有可自定义的阴影样式。 Maintain and expand the Tactile CSS component library across its CSS source, generated dist files, React wrappers, Vue wrappers, TypeScript declarations, and README examples. Use when adding new components, updating existing components, changing class names, extending React/Vue exports, or keeping framework wrappers and docs in sync for this repository.

如何安装 tactile-component-library？

运行命令：npx killer-skills add liliang-cn/TactileCSS/tactile-component-library。支持 Cursor、Windsurf、VS Code、Claude Code 等 19+ IDE/Agent。

tactile-component-library 适用于哪些场景？

典型场景包括：使用新拟物化主题自定义 UI 设计系统、在 React 和 Vue 框架中生成一致的 CSS 类、调试不同框架包装器中的 UI 不一致性。

tactile-component-library 支持哪些 IDE 或 Agent？

该技能兼容 Cursor, Windsurf, VS Code, Trae, Claude Code, OpenClaw, Aider, Codex, OpenCode, Goose, Cline, Roo Code, Kiro, Augment Code, Continue, GitHub Copilot, Sourcegraph Cody, and Amazon Q Developer。可使用 Killer-Skills CLI 一条命令通用安装。

tactile-component-library 有哪些限制？

需要 CSS 和 UI 设计原则的知识；仅限于新拟物化设计风格；需要访问 src/index.css、src/react.mjs、src/vue.mjs、src/react.d.ts、src/vue.d.ts 和 README.md 文件。

↓ 安装步骤

  1. 1. 打开终端

    在你的项目目录中打开终端或命令行。

  2. 2. 执行安装命令

    运行：npx killer-skills add liliang-cn/TactileCSS/tactile-component-library。CLI 会自动识别 IDE 或 AI Agent 并完成配置。

  3. 3. 开始使用技能

    tactile-component-library 已启用，可立即在当前项目中调用。

! 参考页模式

此页面仍可作为安装与查阅参考，但 Killer-Skills 不再把它视为主要可索引落地页。请优先阅读上方评审结论，再决定是否继续查看上游仓库说明。

Imported Repository Instructions

The section below is supporting source material from the upstream repository. Use the Killer-Skills review above as the primary decision layer.

Supporting Evidence

tactile-component-library

安装 tactile-component-library，这是一款面向AI agent workflows and automation的 AI Agent Skill。支持 Claude Code、Cursor、Windsurf，一键安装。

SKILL.md
Readonly
Imported Repository Instructions
The section below is supporting source material from the upstream repository. Use the Killer-Skills review above as the primary decision layer.
Supporting Evidence

Tactile Component Library

Use this skill when changing the design-system surface of this repository.

Workflow

  1. Read references/component-map.md before editing.
  2. Identify the source-of-truth layer first: Usually src/index.css for styles, then src/react.mjs and src/vue.mjs for framework wrappers, then src/react.d.ts and src/vue.d.ts, then README.md.
  3. Keep naming aligned across CSS classes, React exports, Vue exports, docs, and the consumer skill at tactile-ui-builder/.
  4. When a feature, export, theme, or usage pattern changes, update the consumer-facing skill in tactile-ui-builder/ so downstream users get current install and usage guidance.
  5. Rebuild generated CSS with fnm exec --using=22.18.0 npm run build after touching src/index.css.
  6. Validate syntax for wrapper files with: fnm exec --using=22.18.0 node --check src/react.mjs fnm exec --using=22.18.0 node --check src/vue.mjs
  7. Run npm pack --dry-run before release-facing changes.

Component Changes

  • Add CSS primitives in src/index.css first.
  • Keep component sections grouped and labeled consistently.
  • Prefer composable primitives over monolithic widgets when a pattern will be reused.
  • When adding interactive wrappers, expose a small API and keep class application deterministic.
  • Mirror React and Vue capabilities unless the platform has a strong reason not to.

Docs Expectations

  • Update the React export list when exports change.
  • Update the Vue section when Vue exports or behavior change.
  • Add or adjust the HTML example under the matching component heading when a new visual pattern is introduced.
  • Keep examples short and copyable.
  • Keep tactile-ui-builder/SKILL.md and tactile-ui-builder/references/usage-map.md aligned with the current public package surface.

Repository Rules

  • Use fnm / Node 22.18.0 for builds in this repo.
  • Treat dist/tactile.css and dist/tactile.min.css as generated outputs that must stay in sync with src/index.css.
  • Do not ship wrapper exports without matching .d.ts changes.
  • Prefer extending the existing tactile visual language instead of introducing a separate design direction.

相关技能

寻找 tactile-component-library 的替代方案 (Alternative) 或可搭配使用的同类 community Skill？探索以下相关开源技能。

查看全部

openclaw-release-maintainer

Logo of openclaw
openclaw

Your own personal AI assistant. Any OS. Any Platform. The lobster way. 🦞

★ 333.8k
⑂ 0
AI

widget-generator

Logo of f
f

为prompts.chat的信息反馈系统生成可定制的插件小部件

★ 149.6k
⑂ 0
AI

flags

Logo of vercel
vercel

React 框架

★ 138.4k
⑂ 0
浏览器

pr-review

Logo of pytorch
pytorch

Python中具有强大GPU加速的张量和动态神经网络

★ 98.6k
⑂ 0
开发者工具