congiuluc/tailwindcss-components
skills/tailwindcss-components/SKILL.md
Provide ready-to-use TailwindCSS v4 components for React 19 + TypeScript. Includes Button, Card, Input, Modal, Badge, Toast, Spinner, and DataList (with search, sorting, and pagination). Use when: building UI components, creating forms, adding modals, implementing data tables, lists with search and paging, or composing layouts with TailwindCSS.
development
Updated Apr 16, 2026
$ install --global
skillsauthnpx skillsauth add congiuluc/my-awesome-copilot tailwindcss-componentsInstall 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, 1:22 PM5.9s3 files scanned
SKILL.md
- name:
- tailwindcss-components
- description:
- >-
- (with search, sorting, and pagination). Use when:
- building UI components,
- argument-hint:
- Which component do you need? Button, Card, Input, Modal, Badge, Toast, Spinner, DataList, or custom.
TailwindCSS v4 Component Library
When to Use
- Building shared UI components with TailwindCSS v4 and React 19
- Creating buttons, cards, inputs, modals, badges, toasts, or spinners
- Implementing data lists with search, column sorting, and pagination
- Composing consistent, accessible UI across features
- Setting up TailwindCSS v4 with custom theme tokens
Official Documentation
- TailwindCSS v4
- TailwindCSS v4 Installation
- TailwindCSS Theme Configuration
- React 19
- WAI-ARIA Practices
Procedure
- Load component patterns reference
- Load TailwindCSS setup reference
- Review standard components: Button, Card, Input, Badge, Toast, Spinner
- Review Modal component for dialog pattern
- Review DataList component for search, sorting, and pagination
- Choose the component(s) needed and adapt to feature requirements
- Ensure all components follow accessibility guidelines (ARIA, keyboard navigation)
Component Inventory
| Component | File | Features |
|-----------|------|----------|
| Button | shared/Button.tsx | Variants, sizes, loading state, icons |
| Card | shared/Card.tsx | Header, body, footer, clickable variant |
| Input | shared/Input.tsx | Label, error, helper text, icons |
| Badge | shared/Badge.tsx | Color variants, removable |
| Toast | shared/Toast.tsx | Success/error/warning/info, auto-dismiss |
| Spinner | shared/Spinner.tsx | Size variants, accessible label |
| Modal | shared/Modal.tsx | Focus trap, Escape to close, portal |
| DataList | shared/DataList.tsx | Search, column sorting, pagination |
Rules
- All components must be accessible: correct ARIA roles, keyboard navigation, focus management.
- Use named exports only — no default exports.
- Props interfaces suffixed with
Props(e.g.,ButtonProps). - Use
cn()utility (clsx + twMerge) for conditional class merging. - All interactive elements must have minimum 44×44px touch targets on mobile.
- Use TailwindCSS v4
@themeinapp.cssfor design tokens — avoidtailwind.config.ts. - Components must be responsive by default (mobile-first).
Related Skills
congiuluc/vscode-extension
tools
VerifiedTrustedCommunity
Build VS Code extensions with TypeScript. Covers extension anatomy, activation events, commands, tree views, webview panels, language features, testing, and publishing. Use when: creating a new VS Code extension, adding commands/views/providers, building webview UIs, implementing language server features, testing extensions, or packaging for the marketplace.
SKILL.mdUpdated Apr 16, 2026
congiuluc/version-tracking
development
VerifiedTrustedCommunity
Track implementations, features, bugs, and releases in a versioning document. Use when: adding a commit, completing a feature, fixing a bug, or preparing a release. Automatically updates CHANGELOG.md following Keep a Changelog format and Semantic Versioning.
SKILL.mdUpdated Apr 16, 2026
congiuluc/testing-frontend
development
VerifiedTrustedCommunity
Write frontend tests using Vitest and React Testing Library. Use when: testing React components, hooks, user interactions, form submissions, accessibility assertions, or mocking API services.
SKILL.mdUpdated Apr 16, 2026
congiuluc/testing-frontend-angular
development
VerifiedTrustedCommunity
Write Angular frontend tests using Jasmine, Karma, and Angular TestBed. Use when: testing Angular components, services, pipes, directives, user interactions, form submissions, accessibility assertions, or mocking HTTP services.
SKILL.mdUpdated Apr 16, 2026