Skill category
Frontend
Web frameworks, components, CSS, and browser application code. Discover source-linked skills that teach agents repeatable workflows.
All Frontend listings
48 organic results
observability-llm-obs
Answer user questions about monitoring LLMs and agentic components using **data ingested into Elastic** only. Focus on
flutter-add-widget-test
Implement a component-level test using `WidgetTester` to verify UI rendering and user interactions (tapping, scrolling, entering text). Use when validating that a specific widget displays correct data and responds to events as expected.
flutter-add-widget-preview
Adds interactive widget previews to the project using the previews.dart system. Use when creating new UI components or updating existing screens to ensure consistent design and interactive testing.
flutter-add-integration-test
Configures Flutter Driver for app interaction and converts MCP actions into permanent integration tests. Use when adding integration testing to a project, exploring UI components via MCP, or automating user flows with the integration_test package.
huggingface-gradio
Build Gradio web UIs and demos in Python. Use when creating or editing Gradio apps, components, event listeners, layouts, or chatbots.
supabase
Use when doing ANY task involving Supabase. Triggers: Supabase products (Database, Auth, Edge Functions, Realtime, Storage, Vectors, Cron, Queues); client libraries and SSR integrations (supabase-js, @supabase/ssr) in Next.js, React, SvelteKit, Astro, Remix; auth issues (login, logout, sessions, JWT, cookies, getSession, getUser, getClaims, RLS); Supabase CLI or MCP server; schema changes, migrations, declarative schemas, security audits, Postgres extensions (pg_graphql, pg_cron, pg_vector).
turnstile-spin
Set up Cloudflare Turnstile end-to-end in a project — scan the codebase, create the widget via the Cloudflare API, deploy the managed siteverify Worker, write the frontend snippets, validate, and persist the skill. Load this when a user asks to add Turnstile, set up CAPTCHA, protect a form from bots, or fix a Turnstile integration. Mirrors developers.cloudflare.com/turnstile/spin.
agents-sdk
Build AI agents on Cloudflare Workers using the Agents SDK. Load when creating stateful agents, durable workflows, real-time WebSocket apps, scheduled tasks, MCP servers, chat applications, voice agents, or browser automation. Covers Agent class, state management, callable RPC, Workflows, durable execution, queues, retries, observability, and React hooks. Biases towards retrieval from Cloudflare docs over pre-trained knowledge.
Impeccable
Flagship design skill for production-grade, anti-generic frontend interfaces with strong craft and consistency.
Transitions Dev
Production-ready CSS transition patterns for web apps, with drop-in snippets for cards, modals, dropdowns, panels, and page transitions.
Daisyui
Official daisyUI component library skill, providing docs, class names, examples and code examples to generate better daisyUI code.
Morphing Icons
Build icon components that morph between SVG shapes with smooth, line-based transformation.
Pseudo Elements
Audit CSS pseudo-elements and View Transitions usage for hover effects, decorative layers, and transitions.
Frontend Slides
Create animation-rich HTML presentations from scratch or convert PPT/PPTX files into polished web slides.
Shadcn
Project-aware shadcn/ui workflow for searching, adding, composing, and fixing components with correct patterns.
Bencium Innovative Ux Designer
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
Emil Design Eng
Emil Kowalski's design-engineering philosophy for UI polish, components, animation, and production-ready frontend craft.
Rams
Real-time design feedback skill focused on accessibility, spacing, typography, contrast, and component quality.
React Doctor
Run React Doctor to detect regressions in security, performance, correctness, and architecture, with score-based quality checks.
Budge
Use when making single-property CSS or Tailwind visual changes in Next.js App Router projects. Presents a floating control widget for live tuning before persisting.
Vueuse Functions
Apply VueUse composables to build concise, maintainable Vue and Nuxt features.
Vue Testing Best Practices
Vue testing guidance using Vitest, Vue Test Utils, component testing, mocking, and Playwright E2E.
Vue Router Best Practices
Vue Router 4 patterns covering navigation guards, route params, and route lifecycle interactions.
Vue Best Practices
Vue.js best practices emphasizing Composition API with script setup and TypeScript.
Vue
Vue 3 Composition API and reactivity guidance for SFCs, script setup macros, and built-in components.
Vitepress
VitePress documentation site guidance for configuration, theming, and Markdown plus Vue content.
Unocss
UnoCSS atomic CSS engine guidance for rules, shortcuts, and presets like Wind, Icons, and Attributify.
Slidev
Create developer slide decks with Slidev using Markdown, Vue components, code highlighting, and animations.
Pinia
Pinia state management best practices for type-safe Vue stores, getters, and actions.
Nuxt
Nuxt full-stack Vue framework guidance for SSR, auto-imports, file-based routing, and server routes.