vuluu2k/vue-antdv-tailwind
skills/vue-antdv-tailwind/SKILL.md
Best practices for mixing Ant Design Vue components with Tailwind CSS utility classes. Use this skill to keep styling consistent without custom CSS files.
$ install --global
skillsauthnpx skillsauth add vuluu2k/skills vue-antdv-tailwindInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: May 8, 2026, 2:19 AM178.5s2 files scanned
SKILL.md
- name:
- vue-antdv-tailwind
- description:
- Best practices for mixing Ant Design Vue components with Tailwind CSS utility classes. Use this skill to keep styling consistent without custom CSS files.
- author:
- Vũ Lưu
- version:
- 2026.3.23
- source:
- Hand-written based on builderx_spa conventions
Ant Design Vue + Tailwind CSS
BuilderX SPA mixes Ant Design Vue's robust component library with Tailwind CSS's utility engine.
Core
| Topic | Description | Reference | |-------|-------------|-----------| | Styling Rules | How to properly mix AntD and Tailwind | styling-rules |
Quick Reference
<template>
<div class="flex items-center justify-between p-4 bg-white rounded shadow">
<h3 class="text-lg font-bold text-gray-800">Settings</h3>
<!-- Override/extend AntD with Tailwind -->
<a-button type="primary" class="bg-blue-600 hover:bg-blue-700">
Save
</a-button>
</div>
</template>
Related Skills
vuluu2k/vue
development
VerifiedTrustedCommunity
Vue 3 Composition API — <script setup>, reactivity (shallowRef/ref), props without destructure, computed, watch, provide/inject, and composables. Use when the project uses modern Vue 3 Composition API style.
1SKILL.mdUpdated May 8, 2026
vuluu2k/vue-options
development
VerifiedTrustedCommunity
Vue 3 Options API — data, props, computed, methods, watch, emits, provide/inject, lifecycle hooks, and mixins. Use when the project uses Options API style (Vue 2 legacy or explicit Vue 3 Options API preference).
1SKILL.mdUpdated May 8, 2026
vuluu2k/pinia
development
VerifiedTrustedCommunity
Pinia state management for Vue 3 using Composition API (Setup Stores) — TypeScript-first, storeToRefs for reactivity, focused stores, and API calls in composables. Use when the project uses Vue 3 Composition API / <script setup>.
1SKILL.mdUpdated May 8, 2026
vuluu2k/pinia-options
development
VerifiedTrustedCommunity
Pinia state management for Vue using Options API style — define stores with state, getters, actions, and use them in Options API components via mapState/mapWritableState/mapActions.
1SKILL.mdUpdated May 8, 2026