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
frontend-impl-playbook
Stack-aware frontend implementation playbook for autopilot impl-agents. When a task touches *.tsx/*.jsx/*.css files, dispatchers prepend this playbook to the agent's brief so the first draft already meets the design-quality floor (reuse existing primitives, design tokens only, four states by default, accessibility baseline, mobile-first). Read this skill manually before implementing UI changes if your autopilot version does not auto-attach it yet.
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.
justSkill
You write one HTML file with inline CSS. It is the design. This skill checks it, lets you edit it one change at a time, and gives the user a canvas to drag.
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.
design-elevation
Comprehensive design elevation system that automatically transforms functional visual outputs into polished, professional designs. Use when creating ANY visual output including presentations (pptx), spreadsheets (xlsx), dashboards, reports, HTML artifacts, PDFs, web pages, or data visualizations. Applies systematic design thinking grounded in Tailwind CSS as the canonical design token system. Structures decisions through functional patterns (what users interact with) and perceptual patterns (how the design feels), following Alla Kholmatova's design systems framework. Triggers on ALL requests for visual content creation, ensuring outputs look hand-crafted rather than template-based.
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.
abbreviations â naming & terse-writing dictionary
Single source of truth for standard abbreviations in names (vars / fns / classes / CSS classes / tokens) and terse text (comments, commit msgs, logs).
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".
Answer me with HTML: answer a complex question with one HTML page
You write only the **content draft** (extended Markdown). The `am` CLI does all layout, colours, dark mode and diagram coordinates. **Do not hand-write HTML / CSS / SVG.**
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.
align-grid
"Build editorial/magazine/report webpages on a GENUINE Müller-Brockmann modular grid (International Typographic Style) â not a decorative one. Encodes the discipline (columns + modules + baseline, grotesque type, flush-left, restrained black/white/red palette) AND the hard-won front-end engineering to make the grid real, visible, and verified: one CSS-variable source of truth, an interactive grid-toggle overlay that lives in the SAME content box as the content, subgrid \"bands\" so every element snaps to a column line, an 8px baseline lock, and runtime OPTICAL ALIGNMENT that puts display type's ink (not its box) on the line. Ships with a scaffold generator and a Puppeteer verification harness that proves 0px adherence."
Aesthetic Web Design
A specific, opinionated design language based on real references. This skill encodes a visual DNA â not generic "make it look good" â but exact fonts, exact palettes, exact CSS values.
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