Web &amp; Frontend

banner-design

Design banners for social media, ads, website heroes, creative assets, and print. Multiple art direction options with AI-generated visuals. Actions: design, create, generate banner. Platforms: Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Google Display, website hero, print. Styles: minimalist, gradient, bold typography, photo-based, illustrated, geometric, retro, glassmorphism, 3D, neon, duotone, editorial, collage. Uses ui-ux-pro-max, frontend-design, ai-artist, ai-multimodal skills.

design-system

Token architecture, component specifications, and slide generation. Three-layer tokens (primitive→semantic→component), CSS variables, spacing/typography scales, component specs, strategic slide creation. Use for design tokens, systematic design, brand-compliant presentations.

design

Comprehensive design skill: brand identity, design tokens, UI styling, logo generation (55 styles, Gemini AI), corporate identity program (50 deliverables, CIP mockups), HTML presentations (Chart.js), banner design (22 styles, social/ads/web/print), icon design (15 styles, SVG, Gemini 3.1 Pro), social photos (HTML→screenshot, multi-platform). Actions: design logo, create CIP, generate mockups, build slides, design banner, generate icon, create social photos, social media images, brand identity, design system. Platforms: Facebook, Twitter, LinkedIn, YouTube, Instagram, Pinterest, TikTok, Threads, Google Ads.

ui-styling

Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and posters, or establishing consistent styling patterns across applications.

experimental-design

Design experiments and studies BEFORE data is collected — choosing a design, randomizing, blocking, and laying out treatment combinations so the results will actually be interpretable. Use whenever someone is planning a study, asks how to assign subjects/samples to groups, mentions randomization, blocking, stratification, controls, factorial or fractional-factorial designs, design of experiments (DOE), screening many factors, response-surface optimization, crossover or repeated-measures or split-plot designs, cluster/group randomization, Latin squares, plate layouts, batch/run-order effects, replication vs. pseudoreplication, or sequential/adaptive/group-sequential designs. Trigger this even for informal phrasings like "how should I set up this experiment", "how do I avoid confounding", "what's the best way to test these 6 factors", or "assign these mice to conditions". For computing the sample size or power once the design is chosen, use statistical-power; for analyzing data already collected, use statistica

30,618 Updated yesterday

K-Dense-AI

remotion-best-practices

Best practices for Remotion - Video creation in React

angular

Modern Angular (v20+) expert with deep knowledge of Signals, Standalone Components, Zoneless applications, SSR/Hydration, and reactive patterns.

convex

Convex reactive backend expert: schema design, TypeScript functions, real-time subscriptions, auth, file storage, scheduling, and deployment.

django-pro

Master Django 5.x with async views, DRF, Celery, and Django Channels. Build scalable web applications with proper architecture, testing, and deployment.

domain-driven-design

Plan and route Domain-Driven Design work from strategic modeling to tactical implementation and evented architecture patterns.

event-sourcing-architect

Expert in event sourcing, CQRS, and event-driven architecture patterns. Masters event store design, projection building, saga orchestration, and eventual consistency patterns. Use PROACTIVELY for event-sourced systems, audit trail requirements, or complex domain modeling with temporal queries.

prometheus-configuration

Complete guide to Prometheus setup, metric collection, scrape configuration, and recording rules.

scala-pro

Master enterprise-grade Scala development with functional programming, distributed systems, and big data processing. Expert in Apache Pekko, Akka, Spark, ZIO/Cats Effect, and reactive architectures.

typescript-expert

TypeScript and JavaScript expert with deep knowledge of type-level programming, performance optimization, monorepo management, migration strategies, and modern tooling. Use PROACTIVELY for any TypeScript/JavaScript issues including complex type gymnastics, build performance, debugging, and architectural decisions. If a specialized expert is a better fit, I will recommend switching and stop.

manim

Comprehensive guide for Manim Community - Python framework for creating mathematical animations and educational videos with programmatic control

remotion

Best practices and comprehensive guide for Remotion - programmatic video creation in React with animations, compositions, and media handling

astro

Build content-focused websites with Astro — zero JS by default, islands architecture, multi-framework components, and Markdown/MDX support.

electron-development

Master Electron desktop app development with secure IPC, contextIsolation, preload scripts, multi-process architecture, electron-builder packaging, code signing, and auto-update.

hono

Build ultra-fast web APIs and full-stack apps with Hono — runs on Cloudflare Workers, Deno, Bun, Node.js, and any WinterCG-compatible runtime.

progressive-web-app

Build Progressive Web Apps (PWAs) with offline support, installability, and caching strategies. Trigger whenever the user mentions PWA, service workers, web app manifests, Workbox, 'add to home screen', or wants their web app to work offline, feel native, or be installable.

react-component-performance

Diagnose slow React components and suggest targeted performance fixes.

roier-seo

Technical SEO auditor and fixer. Runs Lighthouse/PageSpeed audits on websites or local dev servers, analyzes SEO/performance/accessibility scores, and automatically implements fixes for meta tags, structured data, Core Web Vitals, and accessibility issues.

shadcn

Manages shadcn/ui components and projects, providing context, documentation, and usage patterns for building modern design systems.

sveltekit

Build full-stack web applications with SvelteKit — file-based routing, SSR, SSG, API routes, and form actions in one framework.

tanstack-query-expert

Expert in TanStack Query (React Query) — asynchronous state management. Covers data fetching, stale time configuration, mutations, optimistic updates, and Next.js App Router (SSR) integration.

zod-validation-expert

Expert in Zod — TypeScript-first schema validation. Covers parsing, custom errors, refinements, type inference, and integration with React Hook Form, Next.js, and tRPC.

21,968 Updated 2 days ago

code-to-prd

Reverse-engineer any codebase into a complete Product Requirements Document (PRD). Analyzes routes, components, state management, API integrations, and user interactions to produce business-readable documentation detailed enough for engineers or AI agents to fully reconstruct every page and endpoint. Works with frontend frameworks (React, Vue, Angular, Svelte, Next.js, Nuxt), backend frameworks (NestJS, Django, Express, FastAPI), and fullstack applications. Trigger when users mention: generate PRD, reverse-engineer requirements, code to documentation, extract product specs from code, document page logic, analyze page fields and interactions, create a functional inventory, write requirements from an existing codebase, document API endpoints, or analyze backend routes.

alirezarezvani

lifecyclemigrate-from-nextjs

Step-by-step migration from Next.js App Router to TanStack Start: route definition conversion, API mapping, server function conversion from Server Actions, middleware conversion, data fetching pattern changes.

14,776 Updated yesterday

TanStack

deck-swiss-international

16 列网格 + 单一饱和 accent + 22 个锁死版面 (Klein Blue / Lemon / Mint / Safety Orange)

article-sketchnote-editorial

把一个概念铸成杂志专题档案——真问题→失败→转折→顿悟→命名, 6 个 layout 模具 + 4 字族对比 + 探案档案细节

deck-ljg-present

把 outline 1:1 铸成色块大字宣言 deck, 原文不动只做美化。三档主题 black / red / yellow

frontend-design

Frontend design skill fused from Impeccable + custom extensions. Covers design philosophy, anti-AI-slop patterns, typography, color (OKLCH), spatial design, motion, interaction, responsive, UX writing, state management, engineering, and 4 style variants. Includes 20 command skills for audit/critique/polish/animate/etc.

5,707 Updated yesterday

fengshao1227

liquid-glass

Apple Liquid Glass design system. Use when building UI with translucent, depth-aware glass morphism following Apple's design language. Provides CSS tokens, component patterns, dark/light mode, and animation specs.

5,707 Updated yesterday

fengshao1227

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 systems, see refactoring-ui. For dramatic typographic experiences, see top-design. Trigger with 'web', 'typography'.

golang-project-layout

Provides a guide for setting up Golang project layouts and workspaces. Use this whenever starting a new Go project, organizing an existing codebase, setting up a monorepo with multiple packages, creating CLI tools with multiple main packages, or deciding on directory structure. Apply this for any Go project initialization or restructuring work.

2,488 Updated 3 days ago

samber

moai-domain-brand-design

Brand-aligned visual design system specialist for web projects. Enforces hero-first layout chaining, WCAG 2.1 AA accessibility, Lighthouse >= 80, and design token extraction from brand identity files. Covers color palettes, typography, spacing, and component specifications.

moai-domain-frontend

Frontend development specialist covering React 19, Next.js 16, Vue 3.5, and modern UI/UX patterns with component architecture. Use when building web UIs, implementing components, optimizing frontend performance, or integrating state management.

moai-domain-uiux

UI/UX design systems specialist covering accessibility, icons, theming, design tokens, and user experience patterns. Use when working on design systems, WCAG compliance, ARIA patterns, or dark mode theming.

moai-ref-react-patterns

React/Next.js component design patterns, state management strategies, and project structure reference for frontend development. Agent-extending skill that amplifies frontend domain work (spawned via Agent(general-purpose) with frontend instructions) with production-grade React patterns. NOT for: backend API design, database modeling, DevOps, mobile apps.

moai-domain-html-report

Markdown-to-single-file-HTML report renderer. Six modes (status, incident, plan, explainer, financial, pr) selected automatically by report type. Zero external JS/CSS framework dependencies — inline SVG charts, single font-CDN exception for Korean readability. Self-contained output for email attachment, print, and offline viewing.

antigravity-design-expert

Core UI/UX engineering skill for building highly interactive, spatial, weightless, and glassmorphism-based web interfaces using GSAP and 3D CSS.

frontend-design

You are a frontend designer-engineer, not a layout generator.

ui-component

Generate a new UI component that follows StyleSeed Toss conventions for structure, tokens, accessibility, and component ergonomics.

ui-page

Scaffold a new mobile-first page using StyleSeed Toss layout patterns, section rhythm, and existing shell components.

info-funnel

3-6 阶递减漏斗, 突出转化率 / 筛选比例 / 流量损耗。竖图适合 IG Story / 小红书

ad-creative-builder

Use when the user asks to "write ad copy", "generate RSA headlines", or "build ad creative at volume"; produces ad units — RSA headlines/descriptions, hooks, and an angle matrix — message-matched to the destination landing page. Not for scoring an ad account — use ad-account-auditor; not for the post-click page — use landing-optimizer; not for organic articles — use seo-content-writer. 广告创意/广告文案/RSA标题

ad-test-designer

Use when the user asks to "design an A/B test", "set up a creative/landing test", "run an incrementality test", or "is this test significant — promote or kill?"; produces a hypothesis, variant matrix, sample-size/duration/power plan, a documented significance read, and a promote/kill decision on your own exported results. Not for producing the variants — use ad-creative-builder; not for reading back one shipped change vs a control — use paid-measurement-loop; not for cross-channel reporting — use performance-analyzer. 广告AB测试设计/实验设计/显著性判定/增效测试

audience-segment-builder

Use when the user asks to "build audience segments from my customer list", "make value-based / lookalike seed lists", "set up exclusion / suppression segments", or "map audiences to funnel stages across platforms"; turns the user's OWN customer/CRM/GA4 export into seed audiences, value-based lookalike SEED lists, exclusion/suppression segments, and a cross-platform funnel-stage targeting map, informing the ROAS A (Audience) dimension. Not for building account structure or match types — use campaign-architect; not for organic SERP intent — use keyword-research. 付费广告受众分群/种子人群/排除人群/相似人群种子

send-experiment-designer

Use when the user asks to "design an email A/B test", "set up a multivariate subject/CTA test", "run a send-time test", "build a hold-out group", or "is this email test significant — promote or kill?"; produces a falsifiable hypothesis, a one-variable-per-cell variant matrix, a sample-size / MDE / duration / power plan, and a documented significance read with a promote / kill / keep-testing call on your own ESP export. Not for computing the program-wide EQS or running the vetoes — use email-quality-auditor; not for writing the email itself — use email-creative-builder. 邮件AB测试设计/多变量测试/发送时间测试/留出组/显著性判定

email-render-builder

Use when the user asks to "build the email HTML", "make this email responsive", "fix dark-mode rendering", or "QA the email across clients"; produces the coded HTML build — a responsive table layout, dark-mode + accessibility pass, a client-render matrix, image-block fallbacks, and a plain-text parity check. Not for writing the copy — use email-creative-builder; not for scoring the email or computing EQS — use email-quality-auditor. 邮件HTML/响应式邮件/暗色模式渲染

list-growth-designer

Use when the user asks to "grow my email list", "design a lead magnet / signup incentive", "set up double opt-in", or "plan a referral / recommendation loop"; produces a list-growth plan — acquisition channels, lead-magnet / incentive concepts, a compliant double-opt-in capture-flow spec, referral-loop mechanics, and subscriber-growth / cost-per-opt-in targets (labeled Estimated) — that feeds SEND-S (consent quality captured at acquisition) and SEND-N (lifecycle entry). Not for the signup page/popup UX itself — use landing-optimizer; not for recording the opt-in — use consent-registry; not for the confirmation-email copy — use email-creative-builder. 邮件列表增长/lead magnet/双重确认/推荐环

comparison-page-builder

Use when the user asks to "build a vs page", "competitor comparison page", or "[Competitor] alternative page"; produces ready-to-publish comparison/alternative pages in four formats with an honesty rule and one source of truth per competitor. Not for researching competitors or scoring a SERP — use competitor-analysis; not for general article drafting — use seo-content-writer. 对比页/vs页/替代页

reactivation-specialist

Use when the user asks to "build a win-back campaign", "re-engage lapsed subscribers", "run a re-permission / re-consent sweep", or "sunset my dead list"; produces a closed-loop reactivation program — a lapsed-cohort definition, a staged offer ladder, a re-consent (re-permission) capture step, and a sunset-confirm / suppression rule. Owns none of the SEND-N sub-item notes: engagement-decay / sunset is email-sequence-designer's and preference-center / frequency options is preference-frequency-manager's — this skill references those notes, it does not re-emit them. Not for the general lifecycle flows (welcome/cart/post-purchase) — use email-sequence-designer; not for the preference-center / opt-down ladder — use preference-frequency-manager; not for the consent record itself — use consent-registry; not for computing EQS or the N1 veto — use email-quality-auditor. 流失召回/重新授权/沉默用户清理

membrane-system-design

Expert skill for membrane filtration and separation system design including process selection, flux calculations, fouling analysis, and concentrate management.

1,495 Updated today

a5c-ai

world-building

Design settings, locations, props, costumes, and production elements for film/TV with visual consistency

1,495 Updated today

a5c-ai

seo-backlinks

Backlink profile analysis: referring domains, anchor text distribution, toxic link detection, competitor gap analysis. Works with free APIs (Moz, Bing Webmaster, Common Crawl) and DataForSEO extension. Use when user says backlinks, link profile, referring domains, anchor text, toxic links, link gap, link building, disavow, or backlink audit.

616 Updated today

hashgraph-online

api-design-principles

Master REST and GraphQL API design principles to build intuitive, scalable, and maintainable APIs that delight developers and stand the test of time.

architecture-patterns

Master proven backend architecture patterns including Clean Architecture, Hexagonal Architecture, and Domain-Driven Design to build maintainable, testable, and scalable systems.

javascript-pro

Master modern JavaScript with ES6+, async patterns, and Node.js APIs. Handles promises, event loops, and browser/Node compatibility.

microservices-patterns

Master microservices architecture patterns including service boundaries, inter-service communication, data management, and resilience patterns for building distributed systems.

monorepo-architect

Expert in monorepo architecture, build systems, and dependency management at scale. Masters Nx, Turborepo, Bazel, and Lerna for efficient multi-project development. Use PROACTIVELY for monorepo setup,

nextjs-app-router-patterns

Comprehensive patterns for Next.js 14+ App Router architecture, Server Components, and modern full-stack React development.

react-native-architecture

Production-ready patterns for React Native development with Expo, including navigation, state management, native modules, and offline-first architecture.

tailwind-design-system

Build production-ready design systems with Tailwind CSS, including design tokens, component variants, responsive patterns, and accessibility.

zustand-store-ts

Create Zustand stores following established patterns with proper TypeScript types and middleware.

doc-kami-parchment

暖羊皮纸底 (#f5f4ed) + 墨蓝单色 accent (#1B365D) + 单一衬线字体, 编辑级排印

frame-logo-outro

Logo 分块组装入场 + glow bloom + tagline 揭示, 适合视频片尾 / 品牌闭幕

frame-macos-notification

拟真 macOS 通知 banner + app icon + 标题正文, 适合 video overlay / 产品发布预告

exec-briefing-memo

Decision needed + recommendation + evidence + tradeoffs, 把复杂材料压成可拍板的一页

3,758 Updated 2 weeks ago

muapi-3d-logo-animation

Transform a 2D logo into a premium 3D version and animate it with professional cinematic effects.

SamurAIGPT

3,758 Updated 2 weeks ago

muapi-cartoon-dance-animation

Convert a photo of a person into a Pixar-style 3D cartoon character, then animate it using a reference dance or motion video.

SamurAIGPT

2,671 Updated 1 weeks ago

ctf-web

Provides web exploitation techniques for CTF challenges. Use when the target is primarily an HTTP application, API, browser client, template engine, identity flow, or smart-contract frontend/backend surface, including XSS, SQLi, SSTI, SSRF, XXE, JWT, auth bypass, file upload, request smuggling, OAuth/OIDC, SAML, prototype pollution, and similar web bugs. Do not use it for native binary memory corruption, reverse engineering of standalone executables, disk or memory forensics, or pure cryptanalysis unless the web flaw is still the main path to the flag.

ljagiello

react-component-generator

Generate react component generator operations. Auto-activating skill for Frontend Development. Triggers on: react component generator, react component generator Part of the Frontend Development skill category. Use when working with react component generator functionality. Trigger with phrases like "react component generator", "react generator", "react".

styled-components-helper

Configure with styled components helper operations. Auto-activating skill for Frontend Development. Triggers on: styled components helper, styled components helper Part of the Frontend Development skill category. Use when working with styled components helper functionality. Trigger with phrases like "styled components helper", "styled helper", "styled".

vue-component-generator

Generate vue component generator operations. Auto-activating skill for Frontend Development. Triggers on: vue component generator, vue component generator Part of the Frontend Development skill category. Use when working with vue component generator functionality. Trigger with phrases like "vue component generator", "vue generator", "vue".

1,029 Updated 2 weeks ago

vc-frontend-design

Create polished frontend interfaces from designs/screenshots/videos. Use for web components, 3D experiences, replicating UI designs, quick prototypes, immersive interfaces, avoiding AI slop.

withkynam

builder-map

Map of who's building on top of watched repos — forks, third-party ecosystem repos, builder announcements. Answers the "who's building on top" question.

573 Updated today

aaronjmars

browser-trace

Capture a full DevTools-protocol trace of any browser automation — CDP firehose, screenshots, and DOM dumps — then bisect the stream into per-page searchable buckets. Use when the user wants to debug a failed run, audit network/console/DOM activity, attach a trace to an in-progress session, or feed structured per-page summaries back into an agent loop so its next iteration learns from the last one.

447 Updated today

mxyhi

228,094 Updated yesterday

frontend-design

Create distinctive, production-grade frontend interfaces with high design quality. Use when the user asks to build web components, pages, or applications and the visual direction matters as much as the code quality.

affaan-m

228,094 Updated yesterday

nuxt4-patterns

Nuxt 4 app patterns for hydration safety, performance, route rules, lazy loading, and SSR-safe data fetching with useFetch and useAsyncData.

affaan-m

brand

Brand voice, visual identity, messaging frameworks, asset management, brand consistency. Activate for branded content, tone of voice, marketing assets, brand compliance, style guides.

onboard

Designs and improves onboarding flows, empty states, and first-run experiences to help users reach value quickly. Use when the user mentions onboarding, first-time users, empty states, activation, getting started, or new user flows.

45,257 Updated today

pbakaus

ui-tokens

List, add, and update StyleSeed design tokens while keeping JSON sources, CSS variables, and dark-mode values in sync.

uxui-principles

Evaluate interfaces against 168 research-backed UX/UI principles, detect antipatterns, and inject UX context into AI coding sessions.

30,334 Updated 3 weeks ago

frontend-design

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

anthropics

app-builder

Main application building orchestrator. Creates full-stack applications from natural language requests. Determines project type, selects tech stack, coordinates agents.

cto-advisor

Technical leadership guidance for engineering teams, architecture decisions, and technology strategy. Includes tech debt analyzer, team scaling calculator, engineering metrics frameworks, technology evaluation tools, and ADR templates. Use when assessing technical debt, scaling engineering teams, evaluating technologies, making architecture decisions, establishing engineering metrics, or when user mentions CTO, tech debt, technical debt, team scaling, architecture decisions, technology evaluation, engineering metrics, DORA metrics, or technology strategy.

marketing-demand-acquisition

Multi-channel demand generation, paid media optimization, SEO strategy, and partnership programs for Series A+ startups. Includes CAC calculator, channel playbooks, HubSpot integration, and international expansion tactics. Use when planning demand generation campaigns, optimizing paid media, building SEO strategies, establishing partnerships, or when user mentions demand gen, paid ads, LinkedIn ads, Google ads, CAC, acquisition, lead generation, or pipeline generation.

marketing-strategy-pmm

Product marketing, positioning, GTM strategy, and competitive intelligence. Includes ICP definition, April Dunford positioning methodology, launch playbooks, competitive battlecards, and international market entry guides. Use when developing positioning, planning product launches, creating messaging, analyzing competitors, entering new markets, enabling sales, or when user mentions product marketing, positioning, GTM, go-to-market, competitive analysis, market entry, or sales enablement.

seo-fundamentals

SEO fundamentals, E-E-A-T, Core Web Vitals, and Google algorithm principles.

viral-generator-builder

Expert in building shareable generator tools that go viral - name generators, quiz makers, avatar creators, personality tests, and calculator tools. Covers the psychology of sharing, viral mechanics, and building tools people can't resist sharing with friends. Use when: generator tool, quiz maker, name generator, avatar creator, viral tool.

3d-web-experience

Expert in building 3D experiences for the web - Three.js, React Three Fiber, Spline, WebGL, and interactive 3D scenes. Covers product configurators, 3D portfolios, immersive websites, and bringing depth to web experiences. Use when: 3D website, three.js, WebGL, react three fiber, 3D experience.

develop-web-game

Use when Codex is building or iterating on a web game (HTML/JS) and needs a reliable development + testing loop: implement small changes, run a Playwright-based test script with short input bursts and intentional pauses, inspect screenshots/text, and review console errors with render_game_to_text.

figma-implement-design

Translate Figma nodes into production-ready code with 1:1 visual fidelity using the Figma MCP workflow (design context, screenshots, assets, and project-convention translation). Trigger when the user provides Figma URLs or node IDs, or asks to implement designs or components that must match Figma specs. Requires a working Figma MCP server connection.