Frontend & UI

48 skills in this category

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.

frontend-designfrontenddesignreact

by Anthropic · anthropic-official-skills

slack-gif-creator

Knowledge and utilities for creating animated GIFs optimized for Slack. Provides constraints, validation tools, and animation concepts. Use when users request animated GIFs for Slack like "make me a GIF of X doing Y for Slack."

slack-gif-creatorslackgifcreator

by Anthropic · anthropic-official-skills

theme-factory

Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly.

theme-factorythemefactoryhtml

by Anthropic · anthropic-official-skills

pptx-posters

Create research posters using HTML/CSS that can be exported to PDF or PPTX. Use this skill ONLY when the user explicitly requests PowerPoint/PPTX poster format. For standard research posters, use latex-posters instead. This skill provides modern web-based poster design with responsive layouts and easy visual integration.

pptx-posterspptxpostershtml

by K-Dense-AI · claude-scientific-skills

frontend-slides

Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a talk/pitch. Helps non-designers discover their aesthetic through visual exploration rather than abstract choices.

frontend-slidesfrontendslideshtml

by affaan-m · everything-claude-code

bioservices

Unified Python interface to 40+ bioinformatics services. Use when querying multiple databases (UniProt, KEGG, ChEMBL, Reactome) in a single workflow with consistent API. Best for cross-database analysis, ID mapping across services. For quick single-database lookups use gget; for sequence/file manipulation use biopython.

bioservicesbioservicespythonapi

by K-Dense-AI · claude-scientific-skills

csharp-developer

Use when building C# applications with .NET 8+, ASP.NET Core APIs, or Blazor web apps. Builds REST APIs using minimal or controller-based routing, configures database access with Entity Framework Core, implements async patterns and cancellation, structures applications with CQRS via MediatR, and scaffolds Blazor components with state management. Invoke for C#, .NET, ASP.NET Core, Blazor, Entity Framework, EF Core, Minimal API, MAUI, SignalR.

csharp-developercsharpdeveloperrest

by Jeffallan · jeffallan-claude-skills

shopify-expert

Builds and debugs Shopify themes (.liquid files, theme.json, sections), develops custom Shopify apps (shopify.app.toml, OAuth, webhooks), and implements Storefront API integrations for headless storefronts. Use when building or customizing Shopify themes, creating Hydrogen or custom React storefronts, developing Shopify apps, implementing checkout UI extensions or Shopify Functions, optimizing performance, or integrating third-party services. Invoke for Liquid templating, Storefront API, app development, checkout customization, Shopify Plus features, App Bridge, Polaris, or Shopify CLI workflows.

shopify-expertshopifyexpertapi

by Jeffallan · jeffallan-claude-skills

vue-expert

Builds Vue 3 components with Composition API patterns, configures Nuxt 3 SSR/SSG projects, sets up Pinia stores, scaffolds Quasar/Capacitor mobile apps, implements PWA features, and optimises Vite builds. Use when creating Vue 3 applications with Composition API, writing reusable composables, managing state with Pinia, building hybrid mobile apps with Quasar or Capacitor, configuring service workers, or tuning Vite configuration and TypeScript integration.

vue-expertvueexpertapi

by Jeffallan · jeffallan-claude-skills

vue-expert-js

Creates Vue 3 components, builds vanilla JS composables, configures Vite projects, and sets up routing and state management using JavaScript only — no TypeScript. Generates JSDoc-typed code with @typedef, @param, and @returns annotations for full type coverage without a TS compiler. Use when building Vue 3 applications with JavaScript only (no TypeScript), when projects require JSDoc-based type hints, when migrating from Vue 2 Options API to Composition API in JS, or when teams prefer vanilla JavaScript, .mjs modules, or need quick prototypes without TypeScript setup.

vue-expert-jsvueexperttypescript

by Jeffallan · jeffallan-claude-skills

frontend-patterns

Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices.

frontend-patternsfrontendpatternsreact

by affaan-m · everything-claude-code

react-expert

Use when building React 18+ applications in .jsx or .tsx files, Next.js App Router projects, or create-react-app setups. Creates components, implements custom hooks, debugs rendering issues, migrates class components to functional, and implements state management. Invoke for Server Components, Suspense boundaries, useActionState forms, performance optimization, or React 19 features.

react-expertreactexpertnext.js

by Jeffallan · jeffallan-claude-skills

react-native-expert

Builds, optimizes, and debugs cross-platform mobile applications with React Native and Expo. Implements navigation hierarchies (tabs, stacks, drawers), configures native modules, optimizes FlatList rendering with memo and useCallback, and handles platform-specific code for iOS and Android. Use when building a React Native or Expo mobile app, setting up navigation, integrating native modules, improving scroll performance, handling SafeArea or keyboard input, or configuring Expo SDK projects.

react-native-expertreactnativeexpert

by Jeffallan · jeffallan-claude-skills

matplotlib

Low-level plotting library for full customization. Use when you need fine-grained control over every plot element, creating novel plot types, or integrating with specific scientific workflows. Export to PNG/PDF/SVG for publication. For quick statistical plots use seaborn; for interactive plots use plotly; for publication-ready multi-panel figures with journal styling, use scientific-visualization.

matplotlibmatplotlib

by K-Dense-AI · claude-scientific-skills

rdkit

Cheminformatics toolkit for fine-grained molecular control. SMILES/SDF parsing, descriptors (MW, LogP, TPSA), fingerprints, substructure search, 2D/3D generation, similarity, reactions. For standard workflows with simpler interface, use datamol (wrapper around RDKit). Use rdkit for advanced control, custom sanitization, specialized algorithms.

rdkitrdkit

by K-Dense-AI · claude-scientific-skills

seaborn

Statistical visualization with pandas integration. Use for quick exploration of distributions, relationships, and categorical comparisons with attractive defaults. Best for box plots, violin plots, pair plots, heatmaps. Built on matplotlib. For interactive plots use plotly; for publication styling use scientific-visualization.

seabornseaborn

by K-Dense-AI · claude-scientific-skills

angular-architect

Generates Angular 17+ standalone components, configures advanced routing with lazy loading and guards, implements NgRx state management, applies RxJS patterns, and optimizes bundle performance. Use when building Angular 17+ applications with standalone components or signals, setting up NgRx stores, establishing RxJS reactive patterns, performance tuning, or writing Angular tests for enterprise apps.

angular-architectangulararchitect

by Jeffallan · jeffallan-claude-skills

brainstorming

You MUST use this before any creative work - creating features, building components, adding functionality, or modifying behavior. Explores user intent, requirements and design before implementation.

brainstormingbrainstorming

by Jesse Vincent · obra-superpowers

oiloil-ui-ux-guide

Modern, clean UI/UX guidance + review skill. Use when you need actionable UX/UI recommendations, design principles, or a design review checklist for new features or existing systems (web/app). Focus on CRAP (Contrast/Repetition/Alignment/Proximity) plus task-first UX, information architecture, feedback & system status, consistency, affordances, error prevention/recovery, and cognitive load. Enforce a modern minimal style (clean, spacious, typography-led), reduce unnecessary copy, forbid emoji as icons, and recommend intuitive refined icons from a consistent icon set.

oiloil-ui-ux-guideoiloilguide

by davepoon · buildwithclaude

traction-eos

Implement the Entrepreneurial Operating System (EOS) to align vision and execution across a company. Use when the user mentions "EOS", "V/TO", "quarterly rocks", "Level 10 meetings", "accountability chart", or "IDS process". Covers the six EOS components: Vision, People, Data, Issues, Process, Tract

traction-eostractioneos

by jeremylongshore · plugins-plus-skills

web-typography

Select, pair, and implement typefaces for web projects. Use when the user mentions "font pairing", "which typeface", "line height", "responsive typography", "web font loading", or "type hierarchy". Covers readability evaluation, CSS implementation, and performance optimization. For overall UI design

web-typographywebtypography

by jeremylongshore · plugins-plus-skills

hooked-ux

Build habit-forming product loops using the Hook Model (Trigger, Action, Variable Reward, Investment). Use when the user mentions "users aren''t coming back", "engagement loops", "habit formation", "push notifications", or "variable rewards". Covers ethics evaluation and onboarding for habits. For f

hooked-uxhooked

by jeremylongshore · plugins-plus-skills

ux-heuristics

Evaluate and improve interface usability using heuristic analysis. Use when the user mentions "usability audit", "UX review", "users are confused", "heuristic evaluation", "form usability", or "navigation problems". Covers Nielsen''s 10 heuristics, severity ratings, and information architecture. For

ux-heuristicsheuristics

by jeremylongshore · plugins-plus-skills

frontend-dev

Full-stack frontend development combining premium UI design, cinematic animations,

frontend-devfrontenddev

by MiniMax AI · minimax-ai-skills

fullstack-dev

Full-stack backend architecture and frontend-backend integration guide.

fullstack-devfullstackdev

by MiniMax AI · minimax-ai-skills

accessibility-wcag

Web accessibility patterns for WCAG 2.2 compliance including ARIA, keyboard navigation, screen readers, and testing

accessibility-wcagaccessibilitywcagtesting

by rohitg00 · awesome-claude-toolkit

bundle-size-analyzer

This skill provides automated assistance for bundle size analyzer tasks within the Frontend Development d

bundle-size-analyzerbundlesizeanalyzer

by jeremylongshore · plugins-plus-skills

css-module-generator

This skill provides automated assistance for css module generator tasks within the Frontend Development d

css-module-generatorcssmodulegenerator

by jeremylongshore · plugins-plus-skills

open-graph-creator

This skill provides automated assistance for open graph creator tasks within the Frontend Development domain.

open-graph-creatoropengraphcreator

by jeremylongshore · plugins-plus-skills

react-context-setup

This skill provides automated assistance for react context setup tasks within the Frontend Development domain.

react-context-setupreactcontextsetup

by jeremylongshore · plugins-plus-skills

react-hook-creator

This skill provides automated assistance for react hook creator tasks within the Frontend Development domain.

react-hook-creatorreacthookcreator

by jeremylongshore · plugins-plus-skills

web-vitals-monitor

This skill provides automated assistance for web vitals monitor tasks within the Frontend Development domain.

web-vitals-monitorwebvitalsmonitor

by jeremylongshore · plugins-plus-skills

frontend-excellence

Modern frontend patterns for React Server Components, performance optimization, and Core Web Vitals

frontend-excellencefrontendexcellencereact

by rohitg00 · awesome-claude-toolkit

accessibility-audit-runner

This skill provides automated assistance for accessibility audit runner tas

accessibility-audit-runneraccessibilityauditrunner

by jeremylongshore · plugins-plus-skills

aria-attribute-helper

This skill provides automated assistance for aria attribute helper tasks within the Frontend Develop

aria-attribute-helperariaattributehelper

by jeremylongshore · plugins-plus-skills

code-splitting-helper

This skill provides automated assistance for code splitting helper tasks within the Frontend Develop

code-splitting-helpercodesplittinghelper

by jeremylongshore · plugins-plus-skills

color-contrast-checker

This skill provides automated assistance for color contrast checker tasks within the Frontend D

color-contrast-checkercolorcontrastchecker

by jeremylongshore · plugins-plus-skills

react-component-generator

This skill provides automated assistance for react component generator tasks wit

react-component-generatorreactcomponentgenerator

by jeremylongshore · plugins-plus-skills

responsive-breakpoint-analyzer

This skill provides automated assistance for responsive

responsive-breakpoint-analyzerresponsivebreakpointanalyzer

by jeremylongshore · plugins-plus-skills

styled-components-helper

This skill provides automated assistance for styled components helper tasks within th

styled-components-helperstyledcomponentshelper

by jeremylongshore · plugins-plus-skills

tailwind-class-optimizer

This skill provides automated assistance for tailwind class optimizer tasks within th

tailwind-class-optimizertailwindclassoptimizer

by jeremylongshore · plugins-plus-skills

vue-component-generator

This skill provides automated assistance for vue component generator tasks within the Fron

vue-component-generatorvuecomponentgenerator

by jeremylongshore · plugins-plus-skills

vue-composable-creator

This skill provides automated assistance for vue composable creator tasks within the Frontend D

vue-composable-creatorvuecomposablecreator

by jeremylongshore · plugins-plus-skills

zustand-store-creator

This skill provides automated assistance for zustand store creator tasks within the Frontend Develop

zustand-store-creatorzustandstorecreator

by jeremylongshore · plugins-plus-skills

windsurf-theme-customization

Configure Windsurf themes and visual settings for accessibility. Activate when users mention

windsurf-theme-customizationwindsurfthemecustomization

by jeremylongshore · plugins-plus-skills

react-patterns

React 19 patterns including Server Components, Actions, Suspense, hooks, and component composition

react-patternsreactpatterns

by rohitg00 · awesome-claude-toolkit

scanning-accessibility

Validate WCAG compliance and accessibility standards (ARIA, keyboard navigation).

scanning-accessibilityscanningaccessibility

by jeremylongshore · plugins-plus-skills

Simplification Cascades

Find one insight that eliminates multiple components - "if this is true, we don't need X, Y, or Z"

simplification-cascadessimplification cascades

by Jesse Vincent (community) · obra-superpowers-skills