Skills tagged "frontend" (1335)

1335 Claude Code skills tagged "frontend". Test each skill in the interactive playground.

🎨 Typescript React Reviewer
Expert code reviewer for TypeScript + React 19 applications. Use when reviewing React code, identifying anti-patterns, evaluating state management, or assessing code maintainability. Triggers: code review requests, PR reviews, React architecture evaluation, identifying code smells, TypeScript type s
dotneetfrontend
🎨 Typescript Rules
This skill enforces React and TypeScript frontend best practices for type safety, component design, state management, and error handling.
frontendcode-reviewlintingdebugging
🎨 Ui Design A11y
This skill helps you audit and fix web accessibility issues for WCAG compliance, providing actionable code fixes and guidance.
accessibilityfrontenddesigncode-review
🧪 Ui Design Review
This skill analyzes UI design screenshots and prompts for accessibility, consistency, and usability using Gemini multimodal capabilities to guide reviews.
designuxaccessibilityai
🎨 Ui Designer
UI design system toolkit for Senior UI Designer including design token generation, component documentation, responsive design calculations, and developer handoff tools. Use for creating design systems, maintaining visual consistency, and facilitating design-dev collaboration.
majiayu000frontend
🎨 Ui Engineer
This skill helps you transform PRD-based UI concepts into production-ready HTML/CSS with Tailwind, ensuring minimalist, responsive interfaces.
frontenddesignuxtailwind
🎨 Ui Ux Design
UI/UX design reference database. 50+ styles, 21 palettes, 50 font pairings, 20 charts, 8 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: web
samhvw8frontend
🎨 Ui Ux Pro Max
UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 8 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, l
intrusive-memoryfrontend
🎨 United Airlines Baggage Fee Calculator
This skill opens the United Airlines baggage fee calculator page for quick access to check potential bag costs.
apifrontendproductdocs
🎨 Use_interesting_fonts
This skill helps you elevate frontend typography by selecting high-impact Google Font pairings and enforcing distinctive, consistent styles.
frontenddesignbrandingux
🎨 Using Sentry
This skill helps you instrument applications with Sentry by capturing exceptions, adding context, tracing performance, and enabling structured logging.
backendfrontendobservabilityperformance
🛡️ Vercel Deploy
This skill guides you through deploying to Vercel with zero-configuration builds, secure environments, and production-ready workflows.
devopscloudfrontendci-cd
🧪 Viewcomponents Specialist
This skill helps you implement robust Rails ViewComponents with proper method exposure, slots, and previews, ensuring clean isolation and safe view access.
frontendbackendcode-reviewtesting
🎨 Visualizing With Mermaid
This skill helps you create clear, professional Mermaid diagrams with dark mode styling and semantic colors for focused architecture visuals.
frontendapidocsdesign
🎨 Vite
Vite next-gen frontend tooling: dev server, HMR, build, config, plugins, Environment API, Rolldown. Keywords: vite.config, bundler.
itechmeatfrontend
🎨 Vue
This skill helps you develop Vue 3 applications using the Composition API, reactivity, and best practices from official Vue documentation.
frontenddocsdebuggingrefactor
🎨 Vue Best Practices
Vue.js 3 best practices guidelines covering Composition API, component design, reactivity patterns, Tailwind CSS utility-first styling, PrimeVue component library integration, and code organization. This skill should be used when writing, reviewing, or refactoring Vue.js code to ensure idiomatic pat
dedalus-erp-pasfrontend
🧪 Vue Dev
This skill helps you generate modern Vue TypeScript components using Composition API, VueUse, Tailwind, accessibility, performance patterns, and Vitest testing.
vuetypescripttailwindfrontend
🎨 Vue Fsd
This skill helps you structure large Vue 3 projects with Feature-Sliced Design, enforcing layers, public API, and scalable boundaries.
frontenddesignrefactorcode-review
🧪 Vue Testing
This skill helps you master Vue testing with Vitest, Vue Test Utils, and Playwright to deliver reliable unit, component, and e2e tests.
testingunit-testsintegration-testsfrontend
🎨 Vue3 Best Practices
This skill helps you adopt modular, type-safe Vue 3 practices with composition API, Pinia, and performance tips for scalable apps.
vuefrontendperformancerefactor
🎨 Vuejs
This skill helps you answer Vue.js questions clearly by applying best practices, built-ins, and component concepts from official guidance.
vuefrontendjavascriptdocs
🧪 Web Design Builder
This skill generates accessible, responsive HTML/JS web designs from descriptions, with automated verification and optional framework support.
frontenduxaccessibilitytesting
🎨 Web Design Mastery
This skill helps you craft production-grade UI with consistent spacing, typography, color, and depth using Refactoring UI-inspired principles.
designuxfrontendaccessibility
🎨 Web Development
Master modern web development. Learn HTML/CSS/JavaScript fundamentals, React/Vue/Angular frameworks, Node.js backend, databases, APIs, and full-stack architectures. Use when building web applications, learning web technologies, or choosing tech stacks.
pluginagentmarketplacefrontend
🎨 Webf Api Compatibility
This skill quickly reveals WebF API and CSS compatibility, guiding feature planning and providing alternatives for unsupported features.
frontenddebuggingapi
🎨 Webf Native Plugins
This skill helps you integrate native WebF plugins to access camera, payments, geolocation, and more from JavaScript in Flutter apps.
frontendapidocsdebugging
🛡️ Xss Html Injection
This skill helps you identify and demonstrate XSS vulnerabilities in web apps, guiding safe testing and remediation with client-side injection techniques.
securitytestingdebuggingfrontend
🎨 Zustand 5
This skill helps you implement Zustand state patterns including slices, persistence, selectors, async actions, and middleware for React apps.
frontendproductivitydebugging
🎨 Zustand State
This skill simplifies Shopify Remix state management with Zustand, enabling typed stores, SSR-friendly patterns, and selective re-renders for fast,
remixreacttypescriptfrontend
🎨 0chan Smc Frontend Dev Guidelines
This skill guides modern Next.js 15 frontend development with React 19, TS, Tailwind, and Server/Client patterns for scalable apps.
frontendperformancecode-review
🎨 3d Graphics
This skill helps you build high fidelity 3d web graphics with three.js, delivering interactive scenes, animations, and efficient rendering across devices.
frontendperformanceautomationdesign
🎨 A11y Annotation Generator
This skill automatically adds ARIA labels, roles, and alt text to HTML/JSX/Vue to improve accessibility and screen reader support.
accessibilityfrontenduxproduct
🎨 A2ui Templates
This skill helps you generate on-demand A2UI templates for flowcharts, forms, dashboards, and galleries to visualize structured data.
designuxfrontendproduct
🎨 Ably Realtime Skill
This skill helps you build real-time React/TypeScript apps using Ably channels, spaces, live objects, chat, and live sync.
frontendapidatabasedata
🧪 Abramov
This skill helps you write predictable, composable React state, colocate data, and use custom hooks to improve developer experience.
reactfrontendjavascriptdebugging
🧪 Accelint React Testing
This skill helps you write, review, and refactor React tests with Testing Library, emphasizing accessible queries and user-centric interactions.
reacttestingfrontendaccessibility
🧪 Accessibility
This skill helps you implement WCAG-compliant accessibility across your app by guiding semantic HTML, keyboard navigation, and ARIA patterns for inclusivity.
uxfrontendtestingdesign
🧪 Accessibility
This skill ensures WCAG 2.2 AA compliance for the frontend by enforcing semantic HTML, keyboard navigation, focus management, and accessible forms.
frontenduxdesigntesting
🧪 Accessibility Audit
This skill performs a comprehensive accessibility audit against WCAG guidelines, identifying barriers and suggesting inclusive design improvements.
accessibilityfrontenduxtesting
🧪 Accessibility By Default
This skill helps you build accessible web experiences by default, enforcing keyboard usability, semantic markup, and inclusive contrast throughout.
frontendaccessibilitytestingcode-review
🧪 Accessibility Object Model Integration
This skill facilitates programmatic manipulation of the accessibility tree to support complex custom controls in React.
accessibilityfrontenduxtesting
🧪 Accessibility Review
This skill performs manual accessibility reviews against WCAG AA, identifying issues and suggesting practical fixes to improve inclusivity.
accessibilityfrontenduxtesting
🧪 Adapt
This skill helps you adapt designs to work across mobile, tablet, and desktop, ensuring consistent experiences across contexts and devices.
frontenduxdesignaccessibility
🎨 Add Announcement
This skill helps you add announcement cards to the Agenta sidebar, enabling timely changelog entries and banners for features and promotions.
frontendproductdocsux
🎨 Add Expert
This skill helps you add a new expert to the Remotion experts page by updating images, metadata, and generated cards.
frontendreactdocswriting
🎨 Add Icon
This skill helps you add or update language and framework icons in Socialify by mapping to Simple Icons or custom icons.
frontendbackendfullstackautomation
🎨 Adding Animations
This skill helps you apply consistent Framer Motion animations across components, using stagger, hover, and reduced-motion patterns for accessible motion.
frontendreacttypescriptaccessibility
🛡️ Adk Frontend
This skill guides building frontends that connect to Botpress ADK bots, covering authentication, type generation, client setup, and safe action calls.
frontendapisecuritydebugging
🎨 Adopt
This skill guides migrating error handling to a typed Result-based approach, converting try/catch to Result.try and applying railway-oriented patterns.
migrationrefactorbackendfrontend
🧪 Advanced Getx Patterns
This skill helps developers implement advanced GetX patterns including workers, services, smart management, bindings, and GetConnect.
frontendapitestingdebugging
🎨 Aesthetic Guide
This skill generates exhaustive, implementation-ready design system guidelines for a named UI aesthetic, including exact CSS values and typography.
designuxfrontendreact
🎨 Aesthetic Ui Designer
Creates distinctive, production-quality UI designs that avoid generic "AI slop" aesthetics. Activates on ANY frontend/UI creation request including React/Tailwind, React Native, or Swift. Ensures typography, color, motion, and layout choices feel genuinely designed rather than algorithmically genera
srstompfrontend
🛡️ Aether
This skill orchestrates real-time streaming pipelines from chat ingestion to OBS output, enabling AITuber presence with latency-aware, adaptive avatars.
aiautomationdevopsobservability
🎨 Agent Browser
This skill helps you automate and control a browser session using agent-browser to open pages, interact with elements, and snapshot DOM changes.
automationfrontendcliproductivity
🧪 Agent Browser
This skill helps you automate browser tasks for web testing, form filling, and data extraction with reliable element interactions.
automationtestingscriptingcli
🧪 Agent Browser
This skill automates browser tasks by navigating, interacting, and extracting data to streamline web workflows for AI agents.
aiautomationclitesting
🎨 Agent Canvas
Draw diagrams, flowcharts, and visualizations on an Excalidraw canvas. Use when the user asks to draw, visualize, create diagrams, or sketch ideas.
whq25frontend
🎨 Agentation
This skill helps you add the Agentation visual feedback toolbar to a Next.js project, enabling development-only feedback control.
frontenddebuggingproductivitydevops
🎨 Agora Dev Skill
This skill helps Agora developers generate production-ready code, troubleshoot, and implement cloud recording, media push/pull, and AI agents across web and
frontendbackendclouddebugging

More Tags

automation (2852) ai (1981) testing (1811) scripting (1578) backend (1577) debugging (1526) code-review (1453) docs (1374) api (1339) productivity (1208) devops (1189) data (1086) cli (1045) performance (1011) workflow (1004) security (854) analytics (853) design (831) python (679) ci-cd (645)

Get the best new skills
in your inbox

Weekly roundup of top Claude Code skills, MCP servers, and AI coding tips.