14,074 tagged Frontend, measured the same way as everything else here.
Browse within: skills 136agent 125agentic-ai 98javascript 95LLM 86nextjs 79agents 62design-system 62cli 56copilot 54agentic 49claude-code-plugin 45chatgpt 43open-source 42
Skill Claude CodeCodex
Capture before/after screenshots of UI changes — production vs local dev — and produce a markdown comparison table ready for a GitHub PR. Use when the user wants before/after captures of UI work, a visual comparison of an element or page against production, or a PR-ready screenshot table. Triggers on "before/after"…
Skill Claude CodeCodex
Build pricing pages, pricing cards, and plan displays with Flowglad. Use this skill when creating pricing tables, displaying subscription options, or building plan comparison interfaces.
Skill Claude CodeCodex
A visual design recipe that changes HTML, React or Vue pages to a neo-brutalist style: warm paper-like backgrounds, grids, thick black edges, square corners and solid offset shadows. React and Vue are tools for building web interfaces.
Skill Claude CodeCodex
Automates Angular version upgrades safely with SSR awareness, internal package handling, and iterative error-driven fixes, as a guided phased workflow that pauses to ask at real decision points. Use when: "upgrade Angular", "migrate to Angular X", "ng update", "update Angular version", "angular migration", "move to…
Skill Claude CodeCodex
Convert a selected shadcncraft Figma frame, component, or full page into production React + shadcn/ui code via the official Figma MCP. Use this whenever the user wants to turn a Figma design into code, implement a frame, "generate code from this design", "convert this Figma component", "build this screen from Figma"…
Skill Claude CodeCodex
Builds, fixes, styles, and composes UI with the Gravity UI design system — the React ecosystem of @gravity-ui/ packages (uikit, charts, table, navigation, date-components, icons, and more). Routes to the correct package when look-alikes exist, applies theming and required setup, and prevents invented component APIs.…
Skill Claude Code
A guide for connecting the Notifly notification service to mobile and web applications using its software libraries and examples.
Skill Claude CodeCodex
Web accessibility best practices for semantic HTML, ARIA attributes, and WCAG color contrast. Use this skill whenever the user writes, reviews, or fixes HTML/JSX/TSX/Svelte markup or UI components, builds page structure, navigation, forms, buttons, modals, or tabs, picks text/background colors or theme tokens, or…
Skill Claude CodeCodex
Add, update, or remove Avonni components inside an existing Salesforce Digital Experience site. Use when the user wants to place Avonni components on a site page, when editing a site view's content.json that contains avxp: or avcmpbuilder: components, or when wiring those components to records, navigation, or styling.…
Skill Claude CodeCodex
Scaffolds necessary Next.js App Router file conventions and route-level SEO metadata (page.tsx, layout.tsx, error.tsx, not-found.tsx, loading.tsx, default.tsx, global-error.tsx, metadata, generateMetadata, canonical, robots, openGraph, twitter) for a given route path. Checks existing files, reads them for context, and…
Skill Claude CodeCodex
High-fidelity HTML prototyping, interactive demos, slide decks, animations, design exploration with expert review. Embodies different design personas (UX designer, animator, slide designer, prototyper). Use when user mentions prototype, design demo, interactive prototype, HTML demo, animation demo, design variant, UI…
Skill Claude CodeCodex
TanStack Solid Query patterns — options as a function, never destructuring results, reading signals inside options, dependent queries, mutations with optimistic updates, query key factories, and staleTime versus gcTime. Use when writing or reviewing @tanstack/solid-query code, or when a query does not refetch as…
Skill Claude CodeCodex
Guides WeChat Mini Program project work through official WeChat DevTools and native Mini Program structure, WXML, WXSS, page/component code, and built-in components. Use when working with DevTools CLI, miniprogram-automator, uni-app mp-weixin output, app/page JSON, WXML/WXSS, official components, preview/upload…
Skill Claude CodeCodex
Accessible forms on @aziontech/webkit — one Form Layout spacing reference (xs inside a field, lg between fields/rows) shared by five form types (Drawer, nested Drawer, Dialog, ItemGroup settings, CardBox with independent saves) that differ only in container + save model, with two internal layouts (Cards + ItemGroups /…
Skill Claude CodeCodex
A development guide for Tuya Ray mini-app lighting panels, which are small app interfaces used to control lights and their settings.
Skill Claude CodeCodex
Design any visual output — websites, landing pages, SaaS apps, dashboards, documents, reports, presentations, posters, infographics, or any UI/layout/typography/color work. Use when the user asks to build, design, style, or create anything visual, even if they don't explicitly say "design." Also use for visual…
GuilhemBusset/agentic-or-workshop
Skill Codex
Standardize repository HTML pages to a shared Atom One Dark visual system. Use when asked to align look and feel across multiple HTML files, generate per-page UI component guidelines, apply a consistent theme stylesheet, and verify compliance across all HTML labs.
Skill Claude CodeCodex needs its repo
Storybook is the fidelity oracle, not the runtime. The converter bundles the package's compiled dist/ into dsbundle.js — the same bundle the claude.ai/design agent builds with — and generates each preview by compiling the story source module itself (hooks, fixtures, local helpers — the whole closure comes along), with…
Skill Claude Code
Frontend design conventions for {{ projectname }} -- layout hierarchy, spacing, typography, anti-slop rules. Auto-activates when creating or modifying templates, CSS, or frontend components.
Skill Claude Code
Use when building React components with @n4s/xcomponent, converting MobX observer/useEffect code to X, X.useState, Value, Value.Async, Value.Boxed, Value.Bool, lifecycle hooks, observable props, or component composition with .with().
yinyucheng0601/pto-design-system
Skill Claude CodeCodex
A set of rules for building or changing PTO pages with shared layouts, design tokens, components, and patterns. A design system is a reusable collection of interface rules and building blocks.
HelenSong/AI-Explorer-Lab-skill
Skill Claude CodeCodex
Use when building AI Explorer Lab or AI+PBL course HTML pages that need a landing page, five module pages, and a certificate page with inquiry-based interactions and a consistent claymorphism visual system.
newsun-boki/literature-gallery-skill
Skill Codex
Create and maintain lightweight static literature-management gallery websites for academic papers. Use when the user wants a paper library, literature gallery, research database frontend, paper cards with covers/teasers, tags such as year/venue/area/keywords, paper detail pages, real paper cover screenshots, or…
tbshiki/260704kansaiwordpressmeetup
Skill Codex
Use when Codex needs to create or update WordPress Playground fixed-page layouts, front page layouts, landing pages, or page block HTML without changing theme files. Triggers on requests for front page layout, page layout creation, block HTML page sections, setting a page as the homepage, publishing a layout to a…
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: