frontend-ui-tailwind-standards
Standardized guidelines and patterns for Frontend Ui Tailwind Standards.
Best use case
frontend-ui-tailwind-standards is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Standardized guidelines and patterns for Frontend Ui Tailwind Standards.
Teams using frontend-ui-tailwind-standards should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/frontend-ui-tailwind-standards/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How frontend-ui-tailwind-standards Compares
| Feature / Agent | frontend-ui-tailwind-standards | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Standardized guidelines and patterns for Frontend Ui Tailwind Standards.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# Frontend Ui Tailwind Standards ## When to use this skill - Using Tailwind CSS - Establishing Tailwind conventions - Code reviews for Tailwind usage ## Workflow - [ ] Use utility classes directly - [ ] Follow mobile-first responsive design - [ ] Extract components for repeated patterns - [ ] Use @apply sparingly - [ ] Configure design tokens in tailwind.config ## Instructions ### Class Ordering ```typescript // Recommended order: // Layout → Display → Positioning → Box Model → Typography → Visual → Misc <div className=" flex flex-col items-center justify-between w-full max-w-md px-4 py-2 text-lg font-bold bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-shadow "/> ``` ### Responsive Design ```typescript // Mobile first <div className=" text-sm md:text-base lg:text-lg xl:text-xl "/> ``` ### Dark Mode ```typescript <div className="bg-white dark:bg-gray-900"> <h1 className="text-gray-900 dark:text-white">Title</h1> </div> ``` ## Resources - Mobile-first breakpoints - Use design tokens from config - Avoid @apply except for base styles
Related Skills
gemini-frontend-design
Create distinctive, production-grade frontend interfaces using Gemini 3 Pro for design ideation. Use this skill when you want Gemini's creative perspective on web components, pages, or applications. Generates bold, polished code that avoids generic AI aesthetics.
frontend_mastery
Advanced React patterns, performance optimization, and state management rules.
frontend
Apply distinctive frontend design to React + TailwindCSS apps. Use when building UI components, pages, or improving visual design. Breaks generic "AI slop" patterns.
frontend-web-dev-expert
Advanced frontend web development expert system that provides comprehensive modern web development services including architecture design, UI/UX implementation, performance optimization, engineering setup, and cross-platform development through expert collaboration and intelligent tool integration.
frontend-ui
Create aesthetically pleasing, visually distinctive frontend UIs using research-backed prompting strategies from Anthropic's frontend aesthetics cookbook
frontend-ui-dark-ts
Build dark-themed React applications using Tailwind CSS with custom theming, glassmorphism effects, and Framer Motion animations. Use when creating dashboards, admin panels, or data-rich interfaces...
frontend-ui-animator
Analyze and implement purposeful UI animations for Next.js + Tailwind + React projects. Use when user asks to add animations, enhance UI motion, animate pages/components, or improve visual feedback. Triggers on "add animations", "animate UI", "motion design", "hover effects", "scroll animations", "page transitions", "micro-interactions".
frontend-svelte
Technical knowledge for SvelteKit 5 development. Build reactive applications with Svelte's compile-time magic. Expert in SvelteKit, stores, and reactive patterns. Activate for Svelte development, performance optimization, or modern web apps. This skill provides MCP usage patterns and Svelte 5 conventions. Use when implementing Svelte components or SvelteKit routes.
frontend-specialist
Master of UI/UX, React, TypeScript, and modern CSS.
frontend-slides
Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a...
frontend-shadcn
Frontend development using Vite + React + shadcn/ui + Tailwind CSS + React Router v7. Use when creating new frontend projects, adding UI components, implementing routing, styling with Tailwind, or working with shadcn/ui component library.
frontend-security-coder
Expert in secure frontend coding practices specializing in XSS prevention, output sanitization, and client-side security patterns.