13 skills · sorted by relevance
Tailwind CSS (ユーティリティファースト CSS フレームワーク, v4) のリファレンス。 @theme, @source, @utility, @custom-variant, @apply, @import "tailwindcss", Preflight, CSS-first 設定, @tailwindcss/vite, @tailwindcss/postcss, @tailwindcss/cli, upgrade ツール, variants, arbitrary values, container queries。 Chakra UI のトークン・style props は chakra-ui スキルの担当。
The English summary is being prepared. Showing the original description.
Turn Figma designs into React and TypeScript components using coderio. The workflow uses design thumbnails to guide layout, extracts component structure and data, and generates code and assets for integration into an application.
Production-tested setup for Tailwind CSS v4 with shadcn/ui, Vite, and React. Use when: initializing React projects with Tailwind v4, setting up shadcn/ui, implementing dark mode, debugging CSS variable issues, fixing theme switching, migrating from Tailwind v3, or encountering color/theming problems. Covers: @theme inline pattern, CSS variable architecture, dark mode with ThemeProvider, component composition, vite.config setup, common v4 gotchas, and production-tested patterns. Keywords: Tailwind v4, shadcn/ui, @tailwindcss/vite, @theme inline, dark mode, CSS variables, hsl() wrapper, components.json, React theming, theme switching, colors not working, variables broken, theme not applying, @plugin directive, typography plugin, forms plugin, prose class, @tailwindcss/typography, @tailwindcss/forms
The English summary is being prepared. Showing the original description.
使用 Vite + React + TailwindCSS v4 + lucide-react 进行前端项目搭建和开发的技能。当用户需要创建前端项目、搭建 React 开发环境、使用 TailwindCSS 进行样式开发时使用此技能。
The English summary is being prepared. Showing the original description.
Build UIs with Tailwind CSS — utility classes, responsive design, dark mode, custom configuration, component patterns, animations, plugins, and design system setup. Use when tasks involve styling web applications, configuring design tokens, building responsive layouts, or migrating from other CSS approaches.
The English summary is being prepared. Showing the original description.
Build consistent web interfaces with Tailwind CSS using small styling classes. Apply layout, typography, responsive behavior, interaction states, and dark mode patterns, with examples for buttons, page sections, and reusable components.
Designer subsystem patterns for LlamaFarm. Covers React 18, TanStack Query, TailwindCSS, and Radix UI.
The English summary is being prepared. Showing the original description.
Guides styling implementation using TailwindCSS + CSS Modules. Triggered when handling component styles, layout design, or CSS patterns.
The English summary is being prepared. Showing the original description.
120+ Vue/Nuxt animated components with TailwindCSS v4, motion-v, GSAP, Three.js. Use for hero sections, 3D effects, interactive backgrounds, or encountering setup, CSS variables, motion-v integration errors.
The English summary is being prepared. Showing the original description.
Tailwind CSS v4 with CSS-first configuration and design tokens. Use when setting up Tailwind v4, defining theme variables, using OKLCH colors, or configuring dark mode. Triggers on @theme, @tailwindcss/vite, oklch, CSS variables, --color-, tailwind v4.
The English summary is being prepared. Showing the original description.
MVVM architecture standards for React/TypeScript frontends with TanStack ecosystem, TailwindCSS, and Shadcn UI.
The English summary is being prepared. Showing the original description.
Vira's design system — TailwindCSS conventions, color palette, typography, spacing, components, and accessibility rules. Use when working on UI components, styling, or layout in this project (Lucid HTML in Haskell sources under packages/vira).
The English summary is being prepared. Showing the original description.
Conversão pixel-perfeita de Figma para React usando coderio. Gera código pronto para produção (TypeScript, Vite, TailwindCSS V4) com alta fidelidade visual. Inclui tratamento robusto de erros, recuperação de checkpoints e execução simplificada via script auxiliar.
The English summary is being prepared. Showing the original description.