Here's a sample README.md file for your Strive UI VS Code snippet extension:
# 🌟 Strive UI Snippets for VS Code
Strive UI provides a set of Tailwind-inspired utility class snippets to streamline your UI development workflow directly in Visual Studio Code.
## ✨ Features
Boost your productivity with quick access to utility class snippets:
| Utility | Prefix | Example |
|----------------|-------------|--------------------------|
| Padding | `p-` | `p-4`, `p-8`, ... |
| Margin | `m-` | `m-2`, `m-6`, ... |
| Width | `w-` | `w-full`, `w-64`, ... |
| Height | `h-` | `h-screen`, `h-20`, ... |
| Flexbox | `flex` | `flex`, `flex-row`, ... |
| Grid | `grid` | `grid-cols-3`, ... |
| Font Size | `text-` | `text-xl`, `text-3xl` |
| Font Weight | `font-` | `font-bold`, `font-light` |
| Border Radius | `rounded-` | `rounded-full`, `rounded-md` |
| Shadow | `shadow-` | `shadow-lg`, `shadow-sm` |
| Position | `pos-` | `relative`, `absolute`, ... |
| Z-Index | `z-` | `z-10`, `z-auto`, ... |
## 🚀 How to Use
1. Install the extension from the VS Code marketplace.
2. In a supported file, start typing any of the prefixes (e.g., `p-`, `w-`, `text-`) to trigger snippet suggestions.
3. Press `Tab` to select the desired utility class.
## 📦 Snippet Format
Each snippet uses VS Code's built-in snippet placeholders, so you can quickly choose values from a dropdown.
Example:
```json
"Padding": {
"prefix": "p-",
"body": "p-${1|0,1,2,3,4,5,6,8,10,12,16,20,24,28,32,36,40,44,48,52,56,60,64,72,80,96|}",
"description": "📏 Padding utility"
}
👨💻 Creator
Strive UI is developed and maintained by Syed Abdullah Ali.
Passionate about design systems and developer experience.
📜 License
This extension is released under the MIT License.
Happy Coding! 🎯
