with one click
tailwind
WHEN building design systems or component libraries with Tailwind CSS; covers design tokens, CVA patterns and dark mode.
Menu
WHEN building design systems or component libraries with Tailwind CSS; covers design tokens, CVA patterns and dark mode.
WHEN scraping iOS/macOS App Store data (apps, reviews, ratings, search); NOT for installing or testing apps; retrieves structured JSON data using iTunes/App Store APIs with curl and jq formatting
Comprehensive guide for implementing on-device AI models on iOS using Foundation Models and MLX Swift frameworks. Use WHEN building iOS apps with (1) Local LLM inference, (2) Vision Language Models (VLMs), (3) Text embeddings, (4) Image generation, (5) Tool/function calling, (6) Multi-turn conversations, (7) Custom model integration, or (8) Structured generation.
WHEN building ChatGPT apps using the OpenAI Apps SDK and MCP; create conversational, composable experiences with proper UX, UI, state management, and server patterns.
WHEN building SwiftUI views, managing state, setting up shared services, or making architectural decisions; NOT for UIKit or legacy patterns; provides pure SwiftUI data flow without ViewModels using @State, @Binding, @Observable, and @Environment.
WHEN building React components/pages/apps; enforces scalable architecture, state management, API layer, performance patterns.
Evidence-based goal achievement framework using Goal, Plan, and System methodology. Use when users want to set goals, create actionable plans, build execution systems, or diagnose why they're struggling to make progress on existing goals. Triggers include requests to "set a goal", "help me achieve", "create a plan", "why am I not making progress", or similar goal-setting and achievement queries.
| name | tailwind |
| description | WHEN building design systems or component libraries with Tailwind CSS; covers design tokens, CVA patterns and dark mode. |
web:css skill for CSS Best Practices.web:react skill for React Best Practices.web:typescript skill for TypeScript Best Practices.web:web-design skill for Design Best Practices.Build production-ready design systems with Tailwind CSS, including design tokens, component variants, responsive patterns, and accessibility.
| Topic | Guide |
|---|---|
| Tailwind config, global CSS, tokens | setup.md |
| CVA pattern with type-safe variants | cva-components.md |
| Animation utilities and Dialog | animations.md |
| Utility functions (cn, focusRing) | utilities.md |
| Do's and Don'ts for maintainability | best-practices.md |
Brand Tokens (abstract)
āāā Semantic Tokens (purpose)
āāā Component Tokens (specific)
Example:
blue-500 ā primary ā button-bg
Base styles ā Variants ā Sizes ā States ā Overrides
Use setup.md when you need:
Use cva-components.md when you need:
Use animations.md when you need:
Use utilities.md when you need:
Use best-practices.md for:
Is this a one-off color?
āāā Yes ā Use arbitrary value sparingly (e.g., bg-[#abc123])
āāā No ā Is it semantic (primary, destructive)?
āāā Yes ā Add to semantic tokens in setup.md
āāā No ā Is it a brand color?
āāā Yes ā Add to theme.extend.colors
āāā No ā Use existing Tailwind color
# Required packages
yarn add tailwindcss postcss autoprefixer
yarn add class-variance-authority clsx tailwind-merge
yarn add tailwindcss-animate