Skills tagged "frontend" (1279)

🎨 Converting Figma Designs

This skill converts Figma designs to code by extracting context, metadata, and tokens to generate React + Tailwind components.

designfrontendautomationproductivity

🎨 Convex Agents Messages

This skill manages messages in agent conversations, enabling saving, displaying, and retrieving UI messages for rich, responsive chat experiences.

frontendbackendapidata

🧪 Cosmos Coding Standards

This skill helps enforce coding standards and best practices for readable, maintainable, and testable code across features, refactoring, reviews, and UI

lintingformattingcode-reviewtesting

🎨 Council Of Logic

This skill enforces mathematical first principles to optimize algorithms, architecture, and UI animations, improving efficiency, scalability, and payload size.

performancecode-reviewfrontendbackend

🎨 Cra To Next Migration

This skill guides migrating CRA projects to Next.js, converting routing, data fetching, and assets to modern patterns for improved performance and server

nextjsmigrationreacttypescript

🎨 Create Adaptable Composable

This skill helps you build adaptable Vue composables that accept plain values, refs, or getters and normalize inputs for predictable reactivity.

vuefrontendtypescriptdesign

🎨 Create Customer

This skill helps you configure Autumn billing and create customers by guiding integration setup and API usage across frontend and backend.

backendfrontendapifullstack

🎨 Create Docs

This skill generates a complete Nuxt-based documentation site with templates, i18n support, and AI integration for fast, maintainable project docs.

docswritingcontentseo

🧪 Create Frontend Controller

This skill helps you create Magento 2 frontend controller actions for custom pages, AJAX endpoints, or form submissions with proper DI and responses.

frontendbackendapiperformance

🎨 Create Mcp App

This skill guides you to scaffold and build MCP Apps with interactive UIs, providing framework choices, lifecycle guidance, and host integration.

frontendtypescriptreactdebugging

🎨 Create Mcp App

This skill guides you to create MCP Apps by registering tools and resources, wiring UI to hosts, and choosing framework templates.

frontendbackendpythonai

🎨 Create Ppt With Nano Banana

This skill creates polished PowerPoint presentations by transforming HTML slides into PPTX and optionally generating AI images with Nano Banana.

automationapifrontendjavascript

🎨 Create Pr

This skill helps you create well-structured pull requests by guiding you through branch checks, precise descriptions, and proper title formats.

gitcode-reviewdocsci-cd

🎨 Create Remotion Geist

This skill generates Remotion Geist videos in Vercel's dark Geist style with spring animations and Geist typography.

frontenduxperformanceautomation

🎨 Create Ryos App

This skill helps you scaffold ryOS applications by creating structured directories, components, hooks, and metadata following established patterns.

typescriptreactfrontendproductivity

🎨 Creating Share Images

This skill helps you generate OpenGraph and Twitter share images for Next.js apps with dynamic gradients, icons, and responsive sizes.

frontendsocial-mediadesignux

🎨 Creating Streamlit Themes

This skill helps you craft professional, brand-aligned Streamlit themes by configuring config.toml, typography, colors, and sidebar styles.

designfrontendpython

🎨 Css Architecture

This skill helps you apply modern CSS architecture patterns, enabling consistent theming, scalable layouts, and accessible, maintainable styles.

frontenddesignuxproductivity

🎨 Css Best Practices

Guidelines for building modern, performant, and accessible CSS using MDN best practices. Use this when styling components, fixing layout shifts, or optimizing CSS performance.

jabranrfrontend

🎨 Css Container Queries

This skill helps you implement responsive components using CSS container queries and Tailwind, enabling components to adapt to their container size.

frontendtailwinddesignux

🎨 Css Modern

Use modern CSS features - custom properties, container queries, :has(), @layer, CSS nesting

pluginagentmarketplacefrontend

🎨 Css Sass

Use Sass/SCSS for advanced CSS preprocessing with modern @use/@forward syntax

pluginagentmarketplacefrontend

🛡️ Cto Technical Leader

This skill provides CTO-level technical leadership guidance across fintech, cloud, and product architecture to align tech with business goals.

cloudsecuritydevopsbackend

🧪 Cursor Ide Browser Skill

This skill automates web interactions in Cursor IDE by using accessibility snapshots to locate elements, click, type, and verify pages.

automationdebuggingtestingfrontend

🎨 Custom Ui

This skill helps you tailor Clerk component appearance by applying themes, layout, colors, and fonts to match branding.

frontendnextjsdesignux

🎨 Daipai

This skill helps you rapidly prototype, clear backlogs, and boost team morale with aggressive, high-energy execution and no-nonsense problem solving.

productivitybackendfrontendai

🎨 Dashboard Builder

This skill helps you build professional data visualization dashboards with Next.js, Tailwind, and Recharts, delivering fast UI and live analytics.

frontendanalyticsreactnextjs

🎨 Dashboard Creator

This skill helps you generate interactive HTML dashboards with KPI cards and charts for metrics visualization and monitoring.

frontenddataanalyticsdesign

🎨 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