fylgja-css
Guidance on using the Fylgja CSS library, its class-less base, design tokens, dynamic utilities, and native HTML components. Trigger when the user wants to use Fylgja CSS for styling.
Shadcn Admin Kit Development Guide
Shadcn Admin Kit is a component library for building admin/CRUD applications using React, TypeScript, and shadcn/ui. It provides 98+ pre-built components on top of **ra-core** (from react-admin), combining react-admin's proven data layer with modern shadcn/ui components styled via Tailwind CSS. Befo
devup-ui
Zero-runtime CSS-in-JS preprocessor for React. Transforms JSX styles to static CSS at build time. TRIGGER WHEN: - Writing/modifying Devup UI components (Box, Flex, Grid, Text, Button, etc.) - Using styling APIs: css(), globalCss(), keyframes() - Configuring devup.json theme (colors, typography, extends) - Setting up build plugins (Vite, Next.js, Webpack, Rsbuild, Bun) - Debugging "Cannot run on the runtime" errors - Working with responsive arrays, pseudo-selectors (_hover, _dark, etc.) - Using polymorphic `as` prop or `selectors` prop - Working with @devup-ui/components (Button, Input, Select, Toggle, etc.)
ui-dev
This skill MUST be used whenever the task involves UI development, renderer code changes, adding or modifying components, creating modals or dialogs, working with CSS styles, building new UI features, or touching any file in src/renderer/. Use this skill when the user asks to "add a button", "create a modal", "add a dropdown", "update the sidebar", "style a component", "add a new UI feature", or any renderer/frontend work.
Super Smoke Test â Post-Execution QA Gate
Automated UAT-level QA pipeline. Exercises what was built, not just "does the page load". Catches CSS collapses, missing hrefs, broken Server Actions, RLS issues, and regressions introduced by auto-fixes.
design-taste-frontend
Senior UI/UX Engineer. Architect digital interfaces overriding default LLM biases. Enforces metric-based rules, strict component architecture, CSS hardware acceleration, and balanced design engineering.
Scrapling MCP Server
Web scraping with stealth HTTP, real browsers, and Cloudflare bypass. CSS selectors supported.
uncodixfy
Prevents generic AI/Codex UI patterns when generating frontend code. Use this skill whenever generating HTML, CSS, React, Vue, Svelte, or any frontend UI code to enforce clean, human-designed aesthetics inspired by Linear, Raycast, Stripe, and GitHub instead of typical AI-generated UI.
Flowbite Mcp
MCP server to convert Figma designs to Flowbite UI components in Tailwind CSS
node-minify
Compress JavaScript, CSS, HTML, JSON, and image files using node-minify library. Use when: minifying/compressing assets, bundling JS/CSS files, optimizing images (WebP/AVIF), concatenating files, or when user mentions "node-minify", "@node-minify", "minification". Triggers: "minify", "compress JS/CSS", "bundle", "optimize images", "reduce file size".
Nuxt UI
Vue component library built on [Reka UI](https://reka-ui.com/) + [Tailwind CSS](https://tailwindcss.com/) + [Tailwind Variants](https://www.tailwind-variants.org/). Works with Nuxt, Vue (Vite), Laravel (Inertia), and AdonisJS (Inertia).
animation-best-practices
CSS and UI animation patterns for responsive, polished interfaces. Use when implementing hover effects, tooltips, button feedback, transitions, or fixing animation issues like flicker and shakiness.
tdesign-component-style
This skill should be used when developing or modifying styles for TDesign React components. It provides guidance on BEM naming conventions, CSS Variables usage, state classes, and the relationship between component code and common submodule styles.
HTML/CSS to Image
An MCP server for generating images from HTML & CSS or screenshots of URLs using htmlcsstoimage.com.
markstream-angular
Integrate markstream-angular into an Angular app. Use when Codex needs standalone component imports, signal-based examples, CSS wiring, custom HTML tags or customComponents setup, or optional peer integration in an Angular repository.
ui-restructure
Solves UI lock-in. Reverse engineers your existing UI, strips all layout/token decisions, preserves every hook, handler, and API call untouched, then rebuilds the UI from scratch with a fresh design system. Use /ui-restructure to fully redesign, --style apple|linear|minimal|dashboard for named styles, --mode layout|theme|grid for partial rebuilds, --god-mode to redesign from the user's perspective using 100-user mindset simulation and 6 UX principles, --keep-tokens to preserve your token system, --prompt for custom redesigns. Applies mandatory world-class polish: spring motion, 5-state micro-interactions, 8pt spacing grid, WCAG accessibility. Supports Next.js, React, Vue 3, Tailwind, CSS Modules, styled-components, shadcn.
creating-streamlit-themes
Creating and customizing Streamlit themes. Use when changing app colors, fonts, or appearance, or aligning apps to brand guidelines. Covers config.toml configuration, design principles, and CSS avoidance.
emilkowal-animations
Emil Kowalski's animation best practices for web interfaces. Use when writing, reviewing, or implementing animations in React, CSS, or Framer Motion. Triggers on tasks involving transitions, easing, gestures, toasts, drawers, or motion.
tailwind-4-docs
Comprehensive Tailwind CSS v4 documentation snapshot and workflow guidance. Use when answering Tailwind v4 questions, selecting utilities/variants, configuring Tailwind v4, or migrating projects from v3 to v4 with official docs and gotcha checks.
laravel-dashboard-development
Build custom dashboard tiles for spatie/laravel-dashboard v4 using Livewire 4, Tailwind CSS 4, and CSS Grid
Obsidian Theme Designer
Help users iteratively design Obsidian themes through visual browser previews, then generate an importable CSS snippet.
Design Token Bridge Mcp
Translate design tokens between Tailwind, Figma, CSS, Material 3, and SwiftUI
design-style
Use this skill whenever the user asks to build, create, design, develop, improve, or style any frontend interface or visual element. This includes: - Landing pages, websites, web apps, dashboards, portfolios, or any web UI - UI components (buttons, forms, cards, navbars, modals, etc.) - React, Vue, Next.js, Svelte, or other frontend frameworks - CSS, Tailwind, styled-components, or styling help - Visual improvements or aesthetic upgrades - Requests mentioning frontend, UI, UX, interface, web design, or styling - Adjectives like beautiful, modern, clean, professional, minimalist, dark, brutalist, etc. This skill loads the appropriate design system prompt (Neo-brutalism, Modern Dark, Bauhaus, Cyberpunk, Material, etc.) to generate distinctive, production-grade frontend code instead of generic UI. IMPORTANT: Trigger proactively for ANY frontend/UI-related request, even if no style is specified.
animation-at-work
Apply web animation principles from Animation at Work by Rachel Nabors. Covers human perception of motion, 12 principles of animation, animation patterns (transitions, supplements, feedback, demonstrations, decorations), CSS transitions, CSS animations, Web Animations API, SVG/Canvas/WebGL, communicating animation with storyboards and motion comps, performance (composite-only properties, will-change, RAIL), accessibility (prefers- reduced-motion, vestibular disorders), and team workflow. Trigger on "animation", "transition", "CSS animation", "keyframe", "easing", "motion design", "web animation", "prefers-reduced-motion", "storyboard", "parallax", "loading animation", "hover effect", "micro-interaction".
revealjs
Create polished, professional reveal.js presentations. Use when the user asks to create slides, a presentation, a deck, or a slideshow. Supports themes, multi-column layouts, code highlighting, animations, speaker notes, and custom styling. Generates HTML + CSS with no build step required.
tw-easing-gradients
Replace Tailwind CSS linear gradients with smooth eased gradients using tw-easing-gradients. Use when upgrading bg-gradient-to-*, creating fading backgrounds, or smooth color transitions.
styling
How to customize and style UI5 Web Components. Covers CSS shadow parts, CSS custom states, CSS variables, and tag-level styling. Use when the user asks about changing component appearance, colors, spacing, theming, or overriding styles.
Building Generative UIs with Prefab
Prefab is a JSON wire protocol that describes a React component tree. You produce JSON; a renderer turns it into a live React application with shadcn/ui components, Tailwind CSS, client-side state, and interactive actions. Think of it as writing a React app, but as nested JSON objects instead of JSX