Skills tagged "frontend" (1335)

🎨 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

🎨 Frontend Classic

Apply when working with classic frontend technologies including CSS, SASS, JavaScript, and jQuery

twofoldtech-dakotafrontend

2

🎨 Frontend Design

This skill helps you craft distinctive, production-grade frontend interfaces with bold aesthetics and accessible, performant code.

frontenddesignuxaccessibility

2

🎨 Frontend Design

This skill helps you style Blazor MudBlazor components with responsive CSS isolation and material design patterns for scalable UIs.

frontenddesignuxaccessibility

2

🎨 Frontend Design Html

Create distinctive, production-grade HTML/CSS frontends with exceptional design quality

matteocervellifrontend

2

🎨 Frontend Dev

This skill helps you craft production-grade frontend interfaces with bold, memorable aesthetics across components, dashboards, and pages.

frontenddesignuxaccessibility

2

🧪 Frontend Engineer

This skill guides you to understand product requirements and build interactive frontend pages that deliver a polished user experience.

frontenduxperformancedesign

2

🎨 Frontend Internationalization Best Practices

This skill guides you through implementing internationalization for React Router apps with remix-i18next, improving localization accuracy and performance.

frontendperformancedebuggingdocs

2

🎨 Frontend Ui Animator

This skill analyzes a project and implements purposeful UI animations for Next.js and Tailwind to enhance hero scenes, hover, and navigation.

frontenduxaccessibilityperformance

2

🎨 Frontend Vue Development

This skill guides Vue 2/3 development, Vuex, and routing with best practices for component structure, state management, and API integration.

frontendapidebuggingformatting

2

🧪 Frontend_design_expert

This skill helps you craft elegant, accessible UI components with polished visuals, tasteful color systems, and responsive interactions.

frontenddesignuxaccessibility

2

🎨 Full Stack Development

This skill helps you design and build end-to-end applications by integrating front-end interfaces with back-end services and databases.

frontendbackendfullstackapi

2

🛡️ Global Validation

This skill helps implement fail-fast, server and client validation with consistent rules, clear errors, and input sanitization across all entry points.

backendfrontendapidata

2

🎨 Gui Design Principles

This skill guides GUI design by applying visual hierarchy, color theory, typography, and responsive layouts to create accessible, usable interfaces.

designuxaccessibilityfrontend

2

🧪 Handlebars

This skill enforces logic-less Handlebars patterns to keep templates clean, safe, and maintainable by guiding data preparation and helper usage.

frontendbackendfullstackcode-review

2

🛡️ Heartwood Auth

This skill integrates Heartwood authentication into Grove apps, enabling secure sign-in, protected routes, and seamless session validation for users.

backendfrontendsecurityapi

2

🧪 Hello World

This skill prints Hello World and demonstrates simple predefined output flow for quick validation and learning.

frontendscriptingcode-reviewtesting

2

🛡️ Hyva Alpine Component

This skill helps you build CSP-compatible Alpine.js components for Hyvä themes, enabling secure interactivity under strict Content Security Policy.

frontendsecurityperformance

2

🎨 Implement Split

This skill splits React components into reusable subcomponents by leveraging store-first data access, removing gratuitous prop drilling, and generating

reactfrontendrefactorcode-review

2

🎨 Import Organizer

This skill automatically organizes and sorts import statements in code files, improving readability and consistency.

automationrefactorcode-reviewlinting

2

🎨 Inertia Rails

This skill helps you manage Inertia.js in Rails with React, guiding responses, redirects, forms, and props across controllers and components.

railsreactfullstackfrontend

2

🛡️ Inertia Rails Best Practices

This skill helps you implement Inertia Rails best practices across server setup, props, forms, navigation, security, and testing for robust apps.

frontendbackendperformancesecurity

2

🎨 Inertia Rails Performance

This skill helps optimize Inertia Rails apps by implementing code splitting, deferred props, prefetching, and partial reloads for faster, scalable UIs.

performancebackendfrontendfullstack

2

🎨 Inertia Rails Setup

This skill helps you add Inertia to Rails projects with React, Vue, or Svelte, speeding setup and development.

backendfrontendfullstackcli

2

🎨 Ios Voice Input

This skill helps you implement iOS voice input using the Speech framework and SwiftUI, enabling real-time dictation and on-device recognition.

frontendperformancedebugging

2

🛡️ Javascript_dom_analysis

This skill detects frontend frameworks by analyzing global variables, DOM attributes, bundle patterns, and source maps to reveal technologies.

frontendsecuritydebuggingjavascript

2

🧪 Jss

This skill helps you apply JavaScript stack best practices across React, Next.js, Node, and Nest.js to accelerate quality and consistency.

frontendbackendfullstackperformance

2

🎨 K Fenui

This skill helps you build consistent, themed FenUI WoW addons by guiding layout, widgets, and theming across panels, frames, and tabs.

frontenduxaccessibilitydesign

2

🎨 Ln 626 Dead Code Auditor

This skill identifies dead code, unused imports, and backward compatibility shims to improve maintainability and code health across projects.

debuggingrefactorcode-reviewlinting

2

🧪 Macos Mapkit

This skill guides macOS MapKit integration in SwiftUI/AppKit apps, enabling map display, location, routing, search, and Look Around features.

frontendperformancedebuggingcode-review

2

🎨 Makepad Basics

This skill helps you create and modify Makepad apps using live_design patterns, app structure guides, and event handling examples.

frontenddesignuxdocs

2

🎨 Makepad Layout

This skill helps you create robust Makepad layouts by generating code and answering layout questions with practical, pattern-based guidance.

frontenddebuggingcode-reviewscripting

2

🎨 Mapbox Google Maps Migration

This skill guides developers migrating from Google Maps to Mapbox GL JS, mapping API equivalents, patterns, and key differences to accelerate migration.

migrationdocsapijavascript

2

🎨 Maps

This skill helps you create interactive map visualizations with topojson and dotted maps, enabling choropleth coloring, pins, and regional insights.

vuefrontenddataanalytics

2

🎨 Mermaid

Generate diagrams and flowcharts from mermaid definitions using the mermaid-cli (mmdc). Supports themes, custom CSS, and various output formats including SVG, PNG, and PDF. Mermaid supports 20+ diagram types including flowcharts, sequence diagrams, class diagrams, state diagrams, entity relationship

seckatiefrontend

2