Skills tagged "frontend" (1335)

🎨 Data Dashboard Intelligence

This skill turns normalized event data into premium, story-driven dashboards by mapping fields to components, selecting aggregations, and handling sparse data.

dataanalyticsfrontendapi

🎨 Data Fetching

This skill guides data fetching architecture using a service layer, Zustand store, and SWR to optimize API calls and state management.

dataapitypescriptfrontend

🧪 Data Safety Auditor

This skill performs a rigorous data safety audit for Vue 3 apps using Pinia and IndexedDB, delivering actionable fixes and test generation.

frontenddatatestingdebugging

🎨 Data Visualization Expert

This skill helps you design, build, and optimize interactive data visualizations and dashboards using modern libraries for clear insights.

dataanalyticsfrontenddesign

🎨 Dbs Report

This skill generates a pixel-perfect DBS-style US equity research HTML report with cover, tables, ratings history, and disclaimer.

frontenddocsdesigndata

🎨 Ddd Feature

This skill assists in creating Domain-Driven Design features by generating structured task-based domain models, infrastructure, store, and UI scaffolding.

frontendbackendfullstackdata

🎨 Debug Remote

This skill helps you debug TV apps remotely by collecting logs and telemetry from the TV environment for faster fixes.

debuggingobservabilitymonitoringfrontend

🧪 Debug Svelte

This skill helps diagnose and resolve Svelte-specific issues across reactivity, runes, stores, and SSR with actionable debugging guidance.

debuggingfrontendtestingperformance

🎨 Deep Work

This skill guides you through a structured deep-work workflow, creating research and planning artifacts before any non-trivial code changes.

planningproductivityaiwriting

🧪 Demo Changes

This skill automatically generates screen recordings with AI narration to demonstrate PR changes, helping you present UI updates quickly.

automationfrontendtestingai

🎨 Dependency Analyzer

This skill analyzes dependency upgrades and migrations, outlining breaking changes, required work, and a migration checklist to plan efficiently.

migrationautomationplanningbackend

🧪 Dependency Injection Patterns

This skill helps you implement dependency injection patterns in React by providing a DI container, enabling mockable services, and safer testing.

frontendtestingrefactorcode-review

🎨 Deployment

This skill helps you deploy Angular apps with production builds, CI/CD pipelines, hosting choices, and SSR options for scalable delivery.

frontendci-cddevopscloud

🧪 Design

This skill helps you design UI mockups and specs using the Polaris design system, outlining components, flows, and low-fidelity visuals.

designuxfrontendproduct

🎨 Design Business Model

Business model design and validation using Business Model Canvas, Lean Canvas, and Value Proposition Canvas. Use when designing new business models, validating startup ideas, achieving product-market fit, or innovating existing business models.

thepexcelfrontend

🎨 Design Guide

This skill analyzes websites to generate pixel-perfect design guides and design systems documentation, including colors, typography, components, interactions,

designuxaccessibilityfrontend

🎨 Design Guide

This skill enforces a modern, consistent UI design across platforms, guiding color, spacing, typography, and interactive states for polished interfaces.

designuxaccessibilityfrontend

🎨 Design Iterator

This skill acts as a proactive design-iterator to deliver iterative refinements for UI components, escalating visual balance and polish through focused cycles.

designuxfrontendaccessibility

🎨 Design Lab

This skill helps you explore UI design options by generating multiple variations, collecting feedback, and producing actionable implementation plans.

designuxproductresearch

🎨 Design Principles

This skill helps you design consistent enterprise dashboards and SaaS interfaces by applying a 4px grid, typography, and color principles.

designuxfrontendproduct

🧪 Design Style

This skill helps you design frontend interfaces by applying a specific design system prompt to build distinctive, production-ready UI.

frontenddesignuxaccessibility

🎨 Design System Analyzer

This skill analyzes any website's UI style using ChromeDevTools to extract CSS tokens, animations, and interaction states, then generates a design system

designuxfrontenddebugging

🎨 Design System Patterns

This skill helps you design and manage design system tokens and components using Pencil patterns for consistent theming and scalable UI.

designuxfrontend

🎨 Design System Starter

This skill helps you design scalable design systems with tokens, components, documentation, and accessibility guidelines to ensure consistency and usability.

designuxaccessibilitydocs

🧪 Design Tokens Skill

This skill helps you design, validate, and transform design tokens using DTCG specifications across color spaces and resolvers.

designaccessibilityproductautomation

🎨 Designing Systems

This skill helps you design scalable design systems using OKLCH colors, semantic CSS variables, and Tailwind v4 theming for consistent UX.

designuxfrontendtypescript

🛡️ Desktop App

This skill guides you in building cross-platform desktop apps with web technologies using Electron and Tauri, optimizing performance and security.

frontendfullstacksecurityperformance

🎨 Desktop Ui Design

This skill helps you design intuitive desktop interfaces by applying native widgets, platform conventions, and usability patterns to boost usability and

designuxaccessibilityproduct

🎨 Desmos Graphing

This skill helps you create interactive Desmos graphs in Obsidian from code blocks, enabling visualizing functions, parametric curves, and inequalities with

frontendscriptingdocsproductivity

🧪 Develop Ai Functions Example

This skill helps validate and demonstrate AI SDK functions by providing structured examples, tests, and fixtures across providers.

aitestingbackendfrontend

🛡️ Developer Portal Generator

This skill helps you generate developer portals using Backstage or custom solutions, accelerating setup and ensuring consistent documentation and tooling.

devopsfrontendbackenddocs

🎨 Developing Reactflow Ui

This skill helps you build node-based interfaces with React Flow by providing up-to-date guidance, type-safe patterns, and best-practice optimization.

frontendperformancedocs

🧪 Devtools

This skill helps you set up and use Chrome DevTools MCP to debug, inspect, and automate browser tasks from Claude.

debuggingautomationfrontendtesting

🎨 Diagram Generator

This skill generates draw.io diagrams from natural language requests, outputs valid mxCell XML, and renders them in a browser preview.

aiautomationfrontendcloud

🎨 Diagram To Image

This skill converts Mermaid diagrams and Markdown tables into PNG or SVG images, enabling visual exports for platforms that don't support rich formatting.

aiautomationdatacontent

🎨 Dioxus

This skill should be used when asking about "Dioxus", "dioxus framework", "Rust UI framework", "RSX macro", "dioxus components", "dioxus signals", "hot reload in Dioxus", "WASM splitting", "wasm_split macro", "Manganis assets", "asset! macro", "dioxus Stores", "nested reactivity", "dioxus renderers"

nevaberryfrontend

🎨 Dioxus Knowledge Patch

This skill helps you write up-to-date Dioxus 0.5+ code, RSX, signals, server functions, and components across platforms.

rustfrontendfullstackcode-review

🎨 Display Html In Flutter

This skill helps Flutter developers display and interact with HTML content using easy_web_view across web and mobile platforms.

flutterjavascriptfrontenddebugging

🎨 Distill

This skill helps simplify designs by stripping complexity to reveal the essential elements, accelerating clarity and user focus.

designuxfrontendrefactor

🎨 Docs

This skill guides you to use the AIRIOT client for API, auth, forms, models, pages, and real-time data integration with TypeScript.

frontendapireacttypescript

🎨 Docs

This skill helps you search, retrieve, and bundle icons from the Unicon library for React, Vue, Svelte, or web projects.

frontendcliproductivityscripting

🎨 Document Design

This skill helps you design print-ready HTML documents with brand-aware CSS, producing clean PDFs and print-ready outputs.

designbrandingfrontenddocs

🎨 Document Writer

This skill helps you write clear Nuxt documentation and blog posts with proper grammar, structure, and MDC/nuxt-ui guidance.

docswritingcontentfrontend

🎨 Docusaurus Expert

This skill helps you build fast, SEO-optimized Docusaurus sites with MDX, plugins, and GitHub Pages deployment for production-ready docs.

docsseofrontendgit

🎨 Dust Writing React Effects

This skill guides writing React components to avoid unnecessary useEffect by deriving state during render and avoiding effect-driven updates.

reactfrontendcode-reviewrefactor

🧪 E2e Studio Tests

This skill runs Playwright e2e tests for the Studio app from the e2e/studio directory, enabling targeted and repeatable UI verification.

testingdebuggingautomationfrontend

🧪 E2e Testing

This skill helps you set up and run Playwright e2e tests and Lighthouse audits to ensure reliable UI and performance.

testingdebuggingperformanceautomation

🧪 E2e Testing Generator

This skill generates end-to-end test suites for web apps using Playwright, Cypress, or Selenium with page objects and accessibility checks.

testingautomationci-cdfrontend

🎨 Easy App Maker

This skill helps non-programmers rapidly create runnable web, mobile, or document apps by guiding through simple conversations and code generation.

frontendfullstackjavascripttailwind

🎨 Edge Rendering Strategies

This skill helps you optimize edge rendering strategies by distributing rendering to edge nodes to reduce TTFB and enable personalized caching.

performancecloudfrontendbackend

🧪 Effect Ts

This skill helps you implement and refactor Effect-TS patterns, services, and error handling, including Next.js integration with effects.

typescriptbackendfrontendtesting

🛡️ Electron

This skill helps you build cross-platform desktop apps with Electron by guiding main/renderer processes, IPC, windows, packaging, and best practices.

frontendfullstackdocsdebugging

🛡️ Electron Base

This skill helps you build secure Electron apps with type-safe IPC and protocol handling, improving cross-platform packaging and OAuth flows.

frontendbackendsecurityfullstack

🛡️ Encapsulation

This skill enforces encapsulation in TypeScript by guiding you to hide internal state and expose behavior through validated methods.

code-reviewdesignrefactorfrontend

🎨 Enhance Prompt

This skill transforms vague UI ideas into polished Stitch prompts with design system context and structured output for better generation results.

designuxfrontendai

🎨 Epic Routing

This skill guides you through Epic Stack routing with file-based conventions, loaders, actions, and parameter handling for clean, scalable apps.

reacttypescriptprismafrontend

🎨 Epsimo Agent

Interact with the EpsimoAI platform to manage agents, projects, and threads, and design frontends.

thierryteisseirefrontend

🎨 Excalidraw Skill

This skill helps you design and refine Excalidraw diagrams in real time, export/import scenes, and manage elements across a live canvas.

frontenddesignuxapi

🎨 Explainer Visuals

This skill creates animated, self-contained explainer visuals as HTML/CSS/JS to clarify ideas in essays and blog posts.

frontenduxaccessibilitydesign

🎨 Expo

This skill helps you accelerate cross-platform React Native development with Expo, router navigation, and EAS build strategy for rapid iteration and reliable

frontendperformancedebuggingci-cd