Skills tagged "frontend" (1279)

🎨 Tanstack Solid

This skill helps you build type-safe, reactive Solid apps with TanStack Start, Query, Router, Table, and Form patterns.

solidfrontendtypescriptfullstack

3

🎨 Trpc

This skill helps you implement a versatile tRPC setup across backend and frontend, providing type-safe routers, clients, and error handling.

backendfrontendapitypescript

3

🎨 Velt Notifications Best Practices

This skill helps you implement robust notification systems in React and Next.js, covering panels, delivery channels, and user preferences.

reactnextjstypescriptfrontend

3

🎨 Vibefigma

This skill converts Figma designs to production-ready React components with Tailwind CSS, generating TSX files and assets from a provided Figma URL.

frontendclidesignrefactor

3

🧪 Vibium Browser Automation

This skill automates web tasks in Cursor IDE using Vibium, enabling navigation, element interaction, form filling, and screenshot capture.

automationdebuggingscriptingtesting

3

🧪 Vue Composition Api

This skill helps you master Vue's Composition API, building reusable composables and scalable patterns across Script Setup, reactivity, and provide/inject.

frontenddebuggingtestingrefactor

3

🎨 Web Performance Seo

Fix PageSpeed Insights/Lighthouse accessibility "!" errors caused by contrast audit failures (CSS filters, OKLCH/OKLAB, low opacity, gradient text, image backgrounds). Use for accessibility-driven SEO/performance debugging and remediation.

zhanlincuifrontend

3

🧪 Webapp Testing

This skill helps you test local web applications with Playwright, manage servers, and capture diagnostics to verify UI and logs.

testingautomationdebuggingfrontend

3

🧪 2389 Research Css Development

This skill reviews existing CSS for semantic naming, Tailwind @apply usage, dark mode coverage, and tests, providing actionable feedback.

frontendcode-reviewtestinglinting

2

🎨 3d Interaction

This skill helps you implement accurate 3D camera interactions in Three.js by dynamically mapping pixels to world space and enforcing visible boundaries.

frontenddebuggingperformancescripting

2

🎨 Advanced Frontend Skill

This skill helps you craft production-grade frontend interfaces that feel alive with cinematic WebGL, shaders, and premium interactions.

frontenddesignuxperformance

2

🧪 Agent Factory

This skill automates creation of production-ready Claude Code agents with enhanced frontmatter, tool patterns, and MCP integration.

aiautomationbackendfrontend

2

🎨 Agent Teams Skill

This skill coordinates small teams of Claude Code agents to parallelize work on a codebase using isolated worktrees and structured task contracts.

automationdevopsgitpython

2

🧪 Alloy Expert

This skill provides complete Titanium Alloy architecture guidance and automated project detection to design, review, and migrate Alloy projects.

frontendcode-reviewmigrationtesting

2

🧪 Angular Component

This skill helps you create Angular v20+ standalone components using modern DI, signals, and template patterns for scalable UI.

frontendcode-reviewrefactorproductivity

2

🎨 Async Boundary Optimization

This skill optimizes async boundaries in React 18 to balance responsiveness, streaming, and error containment across components.

frontendperformancedebuggingux

2

🎨 Aurora Origin Merge

This skill helps you merge new .origin.ts files into Angular projects without breaking custom logic, preserving behavior and enabling safe regeneration.

angularfrontendcode-reviewrefactor

2

🧪 Auto Generated

This skill helps apply coding patterns from easy_stat_edu to improve JavaScript projects with clear structure and maintainable patterns.

frontendbackendfullstackcode-review

2

🎨 Bar Chart

This skill helps you build and customize bar chart components for grouped, stacked, and horizontal layouts across datasets.

vuedataanalyticsfrontend

2

🎨 Beautiful Reader

This skill renders markdown content in a beautiful, readable layout with theme and display options for distraction-free reading.

docsfrontenduxdesign

2

🛡️ Blazor

This skill helps you build and configure Blazor WASM components with MudBlazor across server and client render modes for admin UIs.

frontendfullstackbackenddevops

2

🎨 Bootstrap Components

This skill should be used when the user asks about Bootstrap components, "how to create a modal", "navbar not collapsing", "carousel autoplay", "responsive card grid", "toast notifications", "dropdown menu", "accordion FAQ", "offcanvas sidebar", "tab navigation", "tooltip not showing", "popover not

sjnimsfrontend

2

🎨 Bootstrap Layout

This skill should be used when the user asks about Bootstrap grid system, Bootstrap containers, Bootstrap breakpoints, Bootstrap columns, Bootstrap rows, Bootstrap gutters, Bootstrap responsive layout, Bootstrap CSS Grid, Bootstrap z-index, Bootstrap row-cols, Bootstrap offset classes, Bootstrap col

sjnimsfrontend

2

🧪 Browser Automation

This skill automates browser testing, design-to-code generation, and accessibility checks to speed web development and quality assurance.

automationtestingfrontenddebugging

2

🧪 Browser Tools

This skill enables automated browser interactions using Chrome DevTools Protocol to navigate pages, extract data, and debug frontends.

frontendtestingdebuggingautomation

2

🎨 Cc10x Router

This skill executes cc10x router workflows by detecting intent, loading memory, and continuously updating state to complete tasks.

automationbackendfrontendcode-review

2

🎨 Chatbot Widget Creator

This skill helps you deploy a production-ready ChatGPT-style chatbot widget with SSE streaming, RAG backend, and performance monitoring.

frontendbackendaiperformance

2

🎨 Check Refine Trpc

This skill identifies components that directly use trpc or react-query hooks and guides replacing them with refine hooks for consistent data access.

frontendreacttypescriptrefactor

2

🧪 Code Review

This skill provides structured TypeScript code review guidelines to assess correctness, quality, and performance in pull requests and reviews.

code-reviewtestinglintingrefactor

2

🧪 Code Simplifier

This skill simplifies and clarifies recently changed HTML code by applying project-specific best practices, preserving functionality and improving readability.

frontendrefactorcode-reviewformatting

2

🎨 Code Simplifier

This skill refines recently changed code for readability and maintainability without altering functionality, following project standards.

refactorcode-reviewtypescriptjavascript

2

🎨 Code Style

This skill enforces idiomatic Effect TypeScript style, guiding you to use schemas, pattern matching, and functional patterns for clean, maintainable code.

backendfrontendfullstackcode-review

2

🎨 Codebase Analysis

This skill systematically analyzes a codebase to reveal structure, dependencies, and architectural patterns, helping plan changes and onboard developers

code-reviewanalyticsfrontendbackend

2

🎨 Console Frontend Review

This skill performs focused frontend code reviews for the depot console, enhancing WebSocket teleop reliability, 3D rendering performance, and state-management

frontenddebuggingperformancecode-review

2

🎨 Context7

This skill fetches up-to-date library documentation from Context7 to ensure current APIs and best practices are applied.

frontendapidocsdebugging

2

🎨 Convert Web App

This skill guides turning a standalone web app into a hybrid MCP App, enabling in-host rendering with a single codebase.

frontendfullstacktypescriptreact

2

🎨 Copycat

This skill inventories a Next.js app's public and authenticated views, confirms view names with you, and plans a shadcn-based clean platform scaffold.

nextjsshadcnplanningfrontend

2

🎨 Create Steering Documents

This skill generates comprehensive steering documents for a project, including standards, git workflows, and technology guidelines in .kiro/steering.

docsapibackendfrontend

2

🎨 Creating Components

This skill guides you through creating reusable Gluestack UI v4 components, covering planning, structure, styling, TypeScript, and accessibility best practices.

frontendreactnextjstypescript

2

🎨 Css Architecture

Implement scalable CSS architecture patterns - BEM, SMACSS, ITCSS, design tokens

pluginagentmarketplacefrontend

2

🎨 Css Tailwind

Build with Tailwind CSS utility-first framework - configuration, customization, best practices

pluginagentmarketplacefrontend

2

🛡️ Dapp Integration

This skill helps you build Aptos dApps with frontend integration, wallet support, TypeScript SDK usage, and secure transaction flows across React apps.

frontendfullstackapisecurity

2

🎨 Data Client Endpoint Setup

This skill configures @data-client/endpoint to wrap custom async functions for non-REST/GraphQL patterns with Data Client hooks.

datafrontendtypescriptwebsocket

2

🎨 Data Client Graphql Setup

This skill configures @data-client/graphql for GraphQL APIs, enabling authenticated endpoints and custom headers with automatic integration after

graphqltypescriptfrontenddata

2

🎨 Data Client Rest

This skill helps you model, fetch, and normalize REST resources with type safety and automatic cache management using @data-client/rest.

resttypescriptfrontendreact-native

2

🎨 Datavis

This skill helps you build interactive, accessible and accurate data visualizations across D3.js, Plotly, and Python libraries to reveal truth in data.

dataanalyticspythonfrontend

2

🧪 Debug Mastery

This skill applies a rigorous four-phase forensic debugging methodology to identify root causes and prevent symptom fixes.

debuggingobservabilitytestingbackend

2

🧪 Debug With Playwright

This skill helps you debug E2E tests by capturing targeted Playwright screenshots to visually inspect app state during failures.

debuggingtestingautomationfrontend

2

🎨 Deploying To Production

This skill automates GitHub repository creation and Vercel deployment for Next.js projects, streamlining production go-lives and CI/CD setup.

ci-cddevopsgitautomation

2

🎨 Design Reverse Engineer

This skill analyzes reference websites to reproduce Split Lease visual design across public pages, preserving content while applying matched styling.

designuxfrontendaccessibility

2

🧪 Develop Web Game

This skill helps you build and test web games in small steps using a Playwright loop to validate changes and inspect state.

debuggingtestingautomationfrontend

2

🎨 Django Htmx.Md

This skill helps developers build modern, interactive Django apps using HTMX with class-based views for seamless partial updates and reduced JavaScript.

djangopythonbackendfrontend

2

🛡️ Dynamic

This skill helps you bootstrap fullstack apps with dynamic BaaS by automating init, auth, data & API integration for rapid MVPs.

fullstackbackendfrontendapi

2

🎨 Feature Gating

This skill helps you enforce premium feature access with Flowglad, gating features and paywalls based on user subscriptions.

nextjstypescriptreacttrpc

2

🎨 Flutter Skill

This skill guides Flutter app development with universal UI/UX, state management, networking, and API integration to ensure consistent, reusable patterns.

flutterdesignuxapi

2

🎨 Formily Advanced

This skill helps you implement dynamic forms and advanced Formily patterns with TypeScript, covering dynamic fields, async validation, and nested forms.

frontendperformancedebugging

2

🎨 Frontend

This skill helps you connect React/Next.js apps to Encore backends by generating typed clients and integrating with React hooks.

frontendapifullstackautomation

2

🎨 Frontend

Modern frontend development with React, Vue, and web technologies

miles990frontend

2

🎨 Frontend Responsive

This skill applies the Agent OS frontend responsive standard to ensure consistent, accessible layouts across breakpoints and devices.

frontendperformanceaccessibilityrefactor

2

🎨 Frontend Accessibility Best Practices

This skill helps you implement accessibility best practices in React components, improving semantic structure, keyboard support, and screen reader experience.

frontendaccessibilityuxcode-review

2