html-widget
193Skill Claude Code
A guide for creating interactive visual components with HTML. These components can respond to user actions, animate ideas or display data.
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
Skill Claude Code
A guide for creating interactive visual components with HTML. These components can respond to user actions, animate ideas or display data.
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…
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.
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…
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…
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…
Skill Claude CodeCodex
React and Next.js performance optimization patterns. Use BEFORE implementing any React code to ensure best practices are followed.
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.
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.
Skill Claude CodeCodex
GSAP + Remotion integration for professional motion graphics video production. Timeline orchestration, text splitting, SVG morphing, advanced easing, and reusable effect presets.
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.
Skill Claude CodeCodex ✓ vendor
Apply VueUse composables where appropriate to build concise, maintainable Vue.js / Nuxt features.
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.
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.
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.
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 +…
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.
Skill Claude CodeCodex
A collection of frontend development patterns for React and Next.js, including state management, performance improvements, and user-interface practices.
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.
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…
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…
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.
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…
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…
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: