Frontend skills

13,829 tagged Frontend, measured the same way as everything else here.

Browse within: skills 121agent 115agentic-ai 98javascript 93LLM 91css 86nextjs 84checklist 81front-end-developer-tool 81front-end-development 81design-system 63copilot 59agents 51open-source 48

html-widget

193

PM-Shawn/Abu-Cowork

Skill Claude Code

A guide for creating interactive visual components with HTML. These components can respond to user actions, animate ideas or display data.

not rated 368 +2 today A 82 tokens

e2e-testing

194

ai-dashboad/flutter-skill

Skill Claude CodeCodex

AI-powered E2E testing for any app — Flutter, React Native, iOS, Android, Electron, Tauri, KMP, .NET MAUI. Connects via MCP to running apps so the agent can take screenshots, tap elements, enter text, scroll, inspect UI trees, and verify state with natural language. Use when the user wants to test an app's UI…

not rated 368 +3 7d ago A SkillSpector: pass 107 tokens original MIT

web-js-env-patcher

195

lwjjike/xbsReverseSkill

Skill Codex needs its repo

A skill for analysing and recreating the browser features that website JavaScript expects when running in Node.js. Node.js is a server-side JavaScript runtime, while browser code may depend on objects such as the DOM, storage, canvas, WebGL, workers, and network APIs.

not rated 362 +2 1mo ago A SkillSpector: pass 201 tokens original MIT

draw-ui

196

oil-oil/draw-ui

Skill Claude CodeCodex

Generate UI design mockups and help reconstruct generated UI screenshots into HTML/CSS or WeChat Mini Program WXML/WXSS. Prefer built-in image generation when available; use ZenMux + GPT Image 2 for scripted local outputs, or the optional Codex/OpenAI-compatible provider in Codex environments. TRIGGER when the user…

not rated 362 +9 1mo ago A 147 tokens

spark-app-template

197

github/copilot-plugins

Skill Claude CodeCodex ✓ vendor

Comprehensive guidance for building web apps with opinionated defaults for tech stack, design system, and code standards. Use when user wants to create a new web application, dashboard, or interactive interface. Provides tech choices, styling guidance, project structure, and design philosophy to get users up and…

not rated 353 +3 8d ago A SkillSpector: pass 72 tokens original MIT

Singtaa/OneJS

Skill Claude CodeCodex needs its repo

Use this skill whenever the user wants to build or set up user interface in a Unity project using OneJS, React, TypeScript, or JSX, e.g. 'add a main menu to my game', 'build a settings screen', 'make a HUD', 'set up OneJS', 'my OneJS panel is blank', 'the UI is not hot reloading'. Covers confirming OneJS is installed…

not rated 349 +2 changed today A SkillSpector: warn 199 tokens original MIT

react-best-practices

199

AvivK5498/The-Claude-Protocol

Skill Claude CodeCodex

React and Next.js performance optimization patterns. Use BEFORE implementing any React code to ensure best practices are followed.

not rated 346 7mo ago A 27 tokens original MIT

webarchive

200

robrohan/WebArchiveExtractor

Skill Claude CodeCodex

Extract .webarchive files (saved from Safari) into plain HTML/assets using the WebArchiveExtractor CLI. Use when the user wants to unarchive, extract, or convert a .webarchive file.

not rated 346 5mo ago A 43 tokens

image-to-code

201

yuzhworkhard-wq/image-to-code

Skill Claude CodeCodex

A workflow for turning a provided user-interface image into responsive website code and separate high-resolution PNG assets. It treats the image as the exact visual reference and uses a 750-pixel-wide design basis.

not rated 343 +5 3mo ago A 158 tokens original MIT

gsap-animation

202

notedit/happy-skills

Skill Claude CodeCodex

GSAP + Remotion integration for professional motion graphics video production. Timeline orchestration, text splitting, SVG morphing, advanced easing, and reusable effect presets.

not rated 340 6mo ago A 36 tokens original MIT

termcast

203

remorses/termcast

Skill Claude CodeCodex

Build TUIs with a Raycast-like React API using termcast. Implements @raycast/api components (List, Detail, Form, Action) rendered to the terminal via opentui.

not rated 339 7d ago A 40 tokens original MIT

vueuse-functions

204

JetBrains/skills

Skill Claude CodeCodex ✓ vendor

Apply VueUse composables where appropriate to build concise, maintainable Vue.js / Nuxt features.

not rated 340 +3 2mo ago A 24 tokens

skill

205

chaos-xxl/zelda-hyrule-ui

Skill Claude CodeCodex

A guide for using the zelda-hyrule-ui component library and its visual style rules. It tells an AI coding agent how to get, install, and use the library, including fallback rules when the usual path fails.

not rated 333 +1 2mo ago A 0 tokens

website-builder-setup

206

tenfoldmarc/website-builder-setup

Skill Claude CodeCodex

Install the full AI website builder stack — UI/UX Pro Max, Framer Motion animations, and 21st.dev components. One skill, three tools, zero coding experience needed.

not rated 321 +6 2mo ago A Socket: passSnyk: fail 42 tokens

svelte-code-writer

207

sveltejs/ai-tools

Skill Claude CodeCodex needs its repo ✓ vendor

CLI tools for Svelte 5 documentation lookup and code analysis. MUST be used whenever creating, editing or analyzing any Svelte component (.svelte) or Svelte module (.svelte.ts/.svelte.js). If possible, this skill should be executed within the svelte-file-editor agent for optimal results.

not rated 319 +3 yesterday A Socket: passSnyk: warnSkillSpector: warn 68 tokens original MIT

pdsuwwz/nextjs-nextra-starter

Skill Codex

Distill and apply this repository's Next.js Nextra starter architecture, implemented features, extension points, and migration patterns. Use when Codex needs to understand this project, continue second-stage development, add or change docs/landing/i18n/theme/auth/UI behavior, or reuse these Next.js 16 + Nextra 4 +…

not rated 314 +2 2mo ago A SkillSpector: pass 85 tokens original MIT

shengjidaguai-china/personal-homepage-skill

Skill Claude CodeCodex

Use when the user asks to create, redesign, improve, or generate a personal homepage, portfolio website, resume homepage, creator homepage, developer portfolio, designer portfolio, personal brand site, self-introduction page, project showcase homepage, art/photography portfolio, or 16:9 PPT-style HTML presentation.

not rated 313 +19 13d ago A 68 tokens

frontend-patterns

210

virgo777/buddyme

Skill Claude CodeCodex

A collection of frontend development patterns for React and Next.js, including state management, performance improvements, and user-interface practices.

not rated 303 yesterday A 26 tokens

web-performance

211

millionco/debug-agent

Skill Claude CodeCodex

Use when the user reports jank, dropped frames, janky scrolling, slow click or typing response, poor INP, slow LCP, layout shifts (CLS), unresponsive pages, or asks to debug rendering, animation, or interaction performance in a browser app.

not rated 303 +1 3mo ago A SkillSpector: warn 57 tokens original MIT

chart

212

kansoku-trade/kansoku

Skill Claude Code

Render financial charts via the local chart web app (workspace at the repo root — Hono server + React front end, port 1792). Four chart types: intraday capital-flow line (flow) and cross-symbol signed-bar comparison (cohort) — both Recharts — plus SEPA strategy dashboard (sepa) and short-term multi-timeframe…

not rated 306 2d ago A 353 tokens

taste-design

213

jaytel0/taste

Skill Claude CodeCodex

Concrete UI visual rule set for generating and reviewing restrained neutral interfaces. Use for tasks that need exact style constraints: plain sans-serif typography, pale neutral canvases, rounded surfaces, soft shadows, minimal borders, low-saturation color, sparse density, content-neutral placeholders, and…

not rated 301 +5 16d ago A 62 tokens

compose-skill

214

Meet-Miyani/compose-skill

Skill Claude CodeCodex

Jetpack Compose and Compose Multiplatform (KMP/CMP) architecture skill. Only use when the user explicitly mentions "compose-skill", "@compose-skill", or "use compose skill" in their message. Do NOT auto-activate based on keyword matching — this skill should only be triggered by direct user request.

not rated 293 3mo ago A 69 tokens original MIT

screenshot-studio

215

ling-kong-ran/pisper

Skill Claude Code

Regenerate the Pisper product screenshots under docs/shots/ against the current UI. Starts an isolated dev instance, seeds fictional demo data through the real runtime APIs, captures every referenced page at the exact 2558x1380 asset size, and replaces the files. Use only when the user asks to refresh product…

not rated 284 +4 changed 3d ago A SkillSpector: warn 80 tokens original MIT

rich-text

216

software-mansion-labs/skills

Skill Claude CodeCodex

Software Mansion's best practices for rich text in React Native using react-native-enriched-html (formerly react-native-enriched) and react-native-enriched-markdown. Use when building rich text editors, formatted text inputs, HTML or Markdown renderers, or any feature requiring inline styling, mentions, links…

not rated 282 +4 changed 5d ago A 205 tokens

At most 3 mods per repository are shown here, and a mod shipped inside a plugin is left to that plugin's page — the rest are on their repository pages: