14,704 tagged Frontend, measured the same way as everything else here.
Browse within: reference 201checklist 198front-end-developer-tool 198front-end-development 198guidelines 198agent 107javascript 107LLM 101agentic-ai 101skills 96cursor 84chatgpt 58nextjs 56copilot 51
Skill Claude CodeCodex
Web design reference for building production-grade interfaces. Covers layout, typography, color, spacing, shadows, animation, accessibility, responsive design, components, performance, and UX psychology. Use when building UI, reviewing design quality, choosing design tokens, or making any visual design decision.
jaywilburn/refactoring-ui-skill
Skill Claude CodeCodex
Comprehensive UI design guidance based on Refactoring UI principles covering design personality, color theory, layout strategy, visual hierarchy, typography, spacing, mobile-first responsive design, and writing copy that doesn't read like AI wrote it. Use this skill whenever the user is creating new pages, building…
Skill Claude CodeCodex
Elite website image-to-code skill for Codex. For visually important web tasks, it must first generate the design image(s) itself, deeply analyze them, then implement the website to match them as closely as possible. In Codex, it must prefer large, readable, section-specific images instead of tiny compressed boards…
Skill Codex
Create, redesign, repair, validate, preview, and package lightweight standalone HTML deliverables. Use for marketing experiences, product prototypes, infographics, motion narratives, documents, browser tools, dashboards, guided workflows, knowledge interfaces, mini-games, presentations, reusable style and brand…
Skill Codex needs its repo
Use when a user wants to turn a website, local web app, SaaS dashboard, internal tool, or existing frontend project into an inspectable Electrobun desktop app with appbun. Covers scaffolding, metadata, recipes, build diagnostics, native-runner packaging, and release readiness.
Skill Claude CodeCodex
These are the ONLY events that work for updating widgets. Use sendevent tool with these event types.
Skill Claude CodeCodex ✓ vendor
Edit src/data/raw-api-instructions/{api}.md in shopify-dev-tools, then run: npm run generateagentskills (outputs to distributed-agent-skills/) -->.
Skill Claude CodeCodex
Premium app generation that creates WOW-factor experiences. Multi-page apps with smooth animations, zero TypeScript errors, and production-ready quality. Lovable-style experience: one prompt, complete app, instant delight. MUST be used alongside vibe-orchestrator for new projects.
aurorascharff/nextjs-app-architecture-skill
Skill Claude CodeCodex
Build or audit Next.js 16 App Router apps using a next-beats-style React Server Components architecture. Use when scaffolding a new app, adding a feature, reviewing an existing app, refactoring route-loader-shaped pages into feature-owned async server components, deciding where queries/actions/components live, keeping…
filipebraida/adonisjs-starter-kit
Skill Claude Code
Build an end-to-end CRUD stack in AdonisJS + Inertia: resource route → thin controller → VineJS validator → Bouncer policy → single-purpose action → transformer variant → Inertia page. Trigger on: "add CRUD for X", "create resource", "list/create/edit/delete X", "resource endpoint".
Skill Claude CodeCodex
Build original, accessible React command-center interfaces with the published @mdrbx/nerv-ui component library. Use for dashboards, monitoring terminals, operational tools, authentication screens, or sharp industrial HUD-style UI in React, Vite, or Next.js.
Skill Claude CodeCodex
A project-level CSS file for changing the look of Spherse, such as page backgrounds, text, cards, buttons, and pop-up menus. It uses separate values for light and dark mode.
Skill Claude CodeCodex
Anti-slop frontend direction for landing pages, portfolios, editorial pages, and design-forward redesigns. Use after reading the brief to infer a fitting visual system, preserve existing product constraints, and run a strict pre-flight audit.
Weaverse/shopify-hydrogen-skills
Skill Claude CodeCodex
Use when recreating a reference website or brand hub in this Hydrogen plus Weaverse repo, especially when deciding whether to reuse sections, add global styles, update theme schema, or resolve conflicts between the live site and project brand guidelines.
Firstp1ck/pi-coding-agent-forge
Skill Claude CodeCodex
Agents should invoke this skill for Tauri + Django + React desktop apps, especially backend lifecycle, CORS/auth, frontend integration, mandatory light/dark theming, German/English i18n, build packaging, dual desktop/web deployment, Rust commands, and platform-specific gotchas.
nota-america/forgecat-agent-profiles
Skill Claude Code
This skill should be used when the user wants to build an "MCP app", add "interactive UI" or "widgets" to an MCP server, "render components in chat", build "MCP UI resources", make a tool that shows a "form", "picker", "dashboard" or "confirmation dialog" inline in the conversation, or mentions "apps SDK" in the…
Skill Claude CodeCodex
React Router performance and architecture patterns. Use when writing loaders, actions, forms, routes, or working with React Router data fetching. Triggers on tasks involving React Router routes, data loading, form handling, or route organization.
Skill Claude CodeCodex
Direct a website the way a film is made: cast a director and a film, choose the medium the film calls for (photoreal 3D, hand-drawn, ink wash, print, pixel, neon, type, photography…), cast a lead, ask for the assets, write a shot list for every section, then shoot it with a scroll-driven camera, designed cuts, a…
Skill Claude CodeCodex
Scaffolds a new WebMCP tool component using useMcpTool with Zod schema, handler, annotations, and wires it into the WebMCPProvider tree. Use when the user wants to expose functionality as an MCP tool, make something callable by AI, add a new tool, or create an AI-accessible action.
whistlegraph/aesthetic-computer
Skill Codex
Curate whistlegraph.org and make authenticated, narrowly scoped frontend changes through the Whistlegraph Desk Git workflow.
hamzafarooq/multi-agent-course
Skill Claude Code
Anti-slop frontend skill for landing pages, portfolios, and redesigns. The agent reads the brief, infers the right design direction, and ships interfaces that do not look templated. Real design systems when applicable, audit-first on redesigns, strict pre-flight check.
Skill Claude Code
Build, launch, screenshot, and drive the wenlan-app Tauri desktop app in dev mode on macOS (WKWebView) or Windows (WebView2). Use when asked to run or start the app, verify a UI change in the real running app (not just tests), or take a screenshot of it.
Skill Claude Code
Build self-contained, double-click-to-open HTML prototypes so the user can vet an interface before it gets built. One file holds several structurally different variants of a page, app screen, component, flow, or terminal/TUI layout (rendered in-browser), plus a draggable Design Deck for flipping between variants…
Skill Claude CodeCodex
Create "How X Works" deep-dive explainer websites with the curious, technical-but-accessible style of howkeyboardswork.com. Use when asked to explain how something works, create an educational single-page guide, or build an interactive explainer site on any topic.
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: