kaxuna1/tailwind
.claude/skills/tailwind/SKILL.md
TailwindCSS utility-first styling and dynamic theme system for Luxia e-commerce frontend. Use when: styling React components, creating responsive layouts, implementing the dynamic theme system, working with design tokens, or building admin/storefront UI.
tools
Updated Apr 16, 2026
$ install --global
skillsauthnpx skillsauth add kaxuna1/ecomsite 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: Apr 16, 2026, 12:59 PM5.9s3 files scanned
SKILL.md
- name:
- tailwind
- description:
- |
- Use when:
- styling React components, creating responsive layouts, implementing the dynamic theme system, working with design tokens, or building admin/storefront UI.
- allowed-tools:
- Read, Edit, Write, Glob, Grep, Bash
Tailwind Skill
Luxia uses Tailwind CSS with a dynamic theme system where CSS variables are injected at runtime from the backend database. This enables admin-configurable themes without redeployment. The project combines static Tailwind utilities (brand colors, fonts) with dynamic CSS custom properties for theme-aware components.
Quick Start
Static Brand Colors
// Use brand colors defined in tailwind.config.ts
<div className="bg-midnight text-champagne hover:text-jade">
Luxury brand styling
</div>
Dynamic Theme Variables
// Use CSS variables injected by ThemeContext
<div className="bg-bg-primary text-text-primary border-border-default">
Theme-aware component
</div>
Responsive Mobile-First Pattern
// Mobile-first: base → sm → md → lg → xl
<div className="flex flex-col md:flex-row gap-4 lg:gap-8 p-4 md:p-6 lg:p-8">
<main className="flex-1">Content</main>
<aside className="hidden lg:block w-64">Sidebar</aside>
</div>
Key Concepts
| Concept | Usage | Example |
|---------|-------|---------|
| Brand colors | Static theme tokens | bg-midnight, text-champagne, border-jade |
| Theme vars | Dynamic from backend | bg-bg-primary, text-text-inverse |
| Opacity modifiers | Subtle variations | bg-white/10, text-champagne/60 |
| Group hover | Parent-child interaction | group + group-hover:opacity-100 |
| Responsive hiding | Mobile-first visibility | hidden lg:flex |
| Backdrop blur | Glass morphism | backdrop-blur-xl bg-midnight/80 |
Common Patterns
Interactive Card with Group Hover
<article className="group relative overflow-hidden rounded-3xl border border-border-default/40
bg-bg-primary shadow-lg transition-shadow hover:shadow-2xl">
<button className="absolute bottom-4 opacity-0 group-hover:opacity-100 transition-opacity">
Quick Add
</button>
</article>
Responsive Navigation
<nav className="sticky top-0 z-50 bg-bg-primary/95 backdrop-blur-xl border-b border-border-default">
<div className="mx-auto max-w-7xl px-4">
<button className="lg:hidden">Mobile Menu</button>
<div className="hidden lg:flex lg:gap-8">Desktop Nav</div>
</div>
</nav>
See Also
- patterns - Utility combinations, theme integration, spacing
- workflows - Adding components, theme customization, responsive design
Related Skills
For React component patterns, see the react skill. For form styling with validation states, see the react-hook-form skill. For TypeScript interfaces for design tokens, see the typescript skill.
Related Skills
kaxuna1/zustand
tools
VerifiedTrustedCommunity
Zustand lightweight state management with persistence and middleware. Use when: managing client-side state (cart, auth, UI preferences), replacing React Context with simpler API, accessing state outside React components, implementing localStorage persistence
SKILL.mdUpdated Apr 16, 2026
kaxuna1/zod
development
VerifiedTrustedCommunity
Zod schema validation and TypeScript integration for runtime type safety. Use when: Validating API payloads, form inputs, environment variables, or any external data boundaries where TypeScript types alone cannot guarantee safety.
SKILL.mdUpdated Apr 16, 2026
kaxuna1/vite
tools
VerifiedTrustedCommunity
Configures Vite 5.x build tool, dev server, and frontend asset optimization for the Luxia e-commerce platform. Use when: configuring builds, adding environment variables, optimizing bundle size, setting up testing, debugging HMR issues, or adding Vite plugins.
SKILL.mdUpdated Apr 16, 2026
kaxuna1/typescript
development
VerifiedTrustedCommunity
Enforces strict TypeScript types across frontend and backend codebases. Use when: Writing new services, DTOs, interfaces, type guards, debugging type errors, or ensuring type safety at API boundaries.
SKILL.mdUpdated Apr 16, 2026