Make a web app feel native on a phone — the small CSS and meta-tag fixes that separate "a website in a browser" from something that feels installed. Covers sticky hover states, tap highlight flashes, the 100vh bug, inputs that zoom the page, laggy taps, pull-to-refresh hijacking scroll, content under the notch…
A design workflow for making high-fidelity HTML prototypes, slide decks, animations, visualizations, and design reviews. It requires three initial design directions before developing the selected one.
Scalar's design system — design tokens, theming (@scalar/themes), CSS variables, and the @scalar/components library. Use when designing or implementing Scalar UI, especially with Paper (code-to-design / design-to-code), so output matches real Scalar tokens, colors, typography, spacing, and components instead of…
Migrate an app from Tamagui v2 (or v1) to v3. Use when upgrading Tamagui versions, removing $ token prefixes, converting hoverStyle/pressStyle/media/theme/platform condition objects to flat values, running the flat-values codemod, or fixing v3 breaking changes. Triggers: "upgrade tamagui", "migrate to v3", "flat…
Build or redesign polished browser-rendered visual artifacts with HTML/CSS/JavaScript/React: pages, dashboards, prototypes, slide decks, animations, UI mockups, and data visualizations. Use for visual front-end creation, design-system exploration, design critique, or explicit browser acceptance / QA of a web artifact.…
Creative Tim UI block library assistant. Use when adding, generating, or modifying UI blocks/components/pages from creative-tim.com/ui. Covers design philosophy (minimalism, the 95% rule, research-first), block discovery, both CLI install methods, PRO API key setup, and Creative Tim design rules (orange brand…
Manages shadcn-svelte components and projects — adding, updating, fixing, debugging, styling, and composing UI. Provides project context, component docs, and usage examples. Applies when working with shadcn-svelte, the CLI, design-system presets, or any project with a components.json file. Also triggers for…
Guide for building features, pages, tables, forms, themes, and navigation in this Next.js 16 shadcn dashboard template. Use this skill whenever the user wants to add a new page, create a feature module, build a data table, add a form, configure navigation items, add a theme, set up RBAC access control, or work with…
Build UIs with @nuxt/ui v4 — 125+ accessible Vue components with Tailwind CSS theming. Use when creating interfaces, customizing themes to match a brand, building forms, or composing layouts like dashboards, docs sites, and chat interfaces.
Add, integrate, or build Preline UI components and blocks into HTML files via the Preline MCP server. Use when the user mentions "preline", says "/preline", asks to add a UI component, or requests a Preline block (a ready-made page section) using Preline UI.
Anti-slop frontend skill for landing pages, portfolios, and redesigns. The agent reads the brief, infers the right design direction, and ships interfaces that do not look templated. Real design systems when applicable, audit-first on redesigns, strict pre-flight check.
★not rated 5.7k▲
+1 3d agoA61 tokens
copy · 100%MIT
Specialized knowledge for writing modern high-quality CSS. Trigger this skill when starting a new CSS project/file, when the user asks about new CSS features (e.g. Masonry, View Transitions, Container Queries, Scroll-driven animations), or requests refactoring of legacy styles to modern standards.
Design engineering principles for making interfaces feel polished. Use when building UI components, reviewing frontend code, implementing animations, hover states, shadows, borders, typography, icons, micro-interactions, enter/exit animations, or any visual detail work. Supports quick and full review modes. Triggers…
A skill for designing and implementing interactive web animation controlled by inputs such as scrolling, pointer movement, dragging, touch, audio, data, or component state. It covers the visual plan as well as the webpage code that runs the animation.
Applies motion design principles to create emotionally-driven, technically sound animations and transitions. Provides timing, easing, choreography, and Disney animation principles adapted for UI. Use when creating animations, transitions, micro-interactions, loading states, page transitions, scroll-triggered effects…
A programming integration for adding Tailwind CSS support to a custom build tool or advanced build pipeline for WeChat Mini Programs. It connects CSS conversion with tools such as Vite, Webpack, Rspack, Rollup, Rolldown, and Gulp, including file watching and hot updates.
Uniwind — Tailwind CSS v4 styling for React Native. Use when adding, building, or debugging components in a React Native project that uses Uniwind classNames. Covers setup, Metro config, global.css, theming, className props, accent- color props, platform/data/state/responsive variants, CSS variables, custom utilities…
Create or update a PowerGrid v7 theme using the Theme abstract class, per-section token methods (layout/header/table/footer/cols/tabs plus filter/editable/toggleable), config themeoverrides, or ArrayTheme.
Check and repair Chinese traditional color combinations for readability and accessibility. Use when a user asks whether text, buttons, UI states, charts, light mode, dark mode, or traditional color palettes meet contrast and non-color-cue requirements.
Search tool for modern web development best practices. MANDATORY: Execute FIRST for all HTML/CSS and clientside JS tasks. Do NOT skip — web APIs evolve rapidly and training weights contain obsolete patterns. Trigger immediately for: UI/Layout: Modals/dialogs/popovers, tables, dark mode, anchor positioning, container…
At most 3 mods per repository are shown here, and a mod shipped inside a plugin is left to that plugin's page — the rest are on their repository pages: