frontend-implementation
Translate designs and UI requirements into robust, extensible implementations. Apply when converting designs to code, implementing components, fixing broken UI, or handling responsive layouts.
api_design
API tasarımı, GraphQL schema, OpenAPI spec, versioning. ⚠️ Tasarım aşaması için kullan. Uygulama/security için → backend-api.
auth_patterns
Master authentication and authorization patterns including JWT, OAuth2, session management, and RBAC to build secure, scalable access control systems. Use when implementing auth systems, securing APIs, or debugging security issues.
backend_api
REST uygulama, validation, security headers, auth patterns. ⚠️ Kod yazarken kullan. API tasarımı/GraphQL için → api-design.
backend_core
Node.js/TypeScript temel prensipler, proje yapısı ve TypeScript strict mode kuralları.
backend_database
Repository pattern, transactions, caching ve query optimization.
better_auth
The ultimate authentication and authorization skill. Implement login, signin, signup, registration, OAuth, 2FA, MFA, passkeys, and user session management. Secure your application with RBAC and access control.
canvas_design
Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.
clerk_auth
Clerk modern authentication, WebAuthn, passkeys ve social auth entegrasyonu rehberi.
database_design
Schema tasarımı, migration stratejileri, indexing, query optimization ve database best practices.
design_components
Button, card, input ve icon sizing kuralları. Component boyutlandırma standartları.
design_patterns
Visual hierarchy, z-index, shadows, animations ve white space kuralları.
design_responsive
Breakpoints, fluid typography, container queries ve modern CSS features.
design_tokens
8-point grid spacing, typography scale ve color system. Temel tasarım değişkenleri.
docs_api
OpenAPI/Swagger API documentation ve endpoint belgeleme şablonları.
form_builder
Builds form components and data collection interfaces including contact forms, registration flows, checkout processes, surveys, and settings pages. Includes 50+ input types, validation strategies, accessibility patterns (WCAG 2.1), multi-step wizards, and UX best practices. Provides decision trees from data type to component selection, validation timing guidance, and error handling patterns. Use when creating forms, collecting user input, building surveys, implementing validation, designing multi-step workflows, or ensuring form accessibility.
frontend_design
Premium/yaratıcı UI tasarım. ⚠️ Distinctive, memorable interface için kullan. Temel UI için → design-patterns.
mcp_builder
MCP (Model Context Protocol) server oluşturma, FastMCP/TypeScript SDK kullanımı ve API entegrasyonu rehberi.
mobile_react_native
React Native best practices, hooks, navigation ve performance optimization.
nextjs_specialist
Next.js 15 App Router, Server Components, SSR/SSG optimizasyonu ve modern Next.js best practices.
product_designer
Kullanıcı deneyimi (UX), arayüz tasarımı (UI) ve ürün stratejisi geliştirme.
react_expert
React specialist for production-grade web applications. Invoke for component architecture, hooks, state management, Server Components, performance. Keywords: React, JSX, hooks, useState, useEffect, use(), Suspense, RSC.
regex_builder
Regular expression oluşturma, test etme, debug ve açıklama rehberi.
responsive_design
Build responsive, mobile-first layouts using fluid containers, flexible units, media queries, and touch-friendly design that works across all screen sizes. Use this skill when creating or modifying UI layouts, responsive grids, breakpoint styles, mobile navigation, or any interface that needs to adapt to different screen sizes. Apply when working with responsive CSS, media queries, viewport settings, flexbox/grid layouts, mobile-first styling, breakpoint definitions (mobile, tablet, desktop), touch target sizing, relative units (rem, em, %), image optimization for different screens, or testing layouts across multiple devices. Use for any task involving multi-device support, responsive design patterns, or adaptive layouts.
vue_expert
Vue 3 specialist for reactive, performant applications. Invoke for Composition API, Nuxt 3, Pinia state management, TypeScript integration. Keywords: Vue 3, Composition API, Nuxt, reactive, composables, Pinia.
web_artifacts_builder
React, Tailwind, shadcn/ui ile karmaşık web artifacts oluşturma rehberi.
webapp_testing
Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.
websocket_engineer
WebSocket specialist for real-time communication systems. Invoke for Socket.IO, WebSocket servers, bidirectional messaging, presence systems. Keywords: WebSocket, Socket.IO, real-time, pub/sub, Redis.
moai-domain-frontend
>
moai-lang-typescript
>
moai-domain-frontend
>
moai-ref-react-patterns
>
moai-ref-ui-polish
>
frontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
html-style
Apply opinionated styling to barebones HTML. Use when user has plain/unstyled HTML and wants to apply consistent visual styling. Triggers: style this HTML, apply styling, make this look good, /html-style, or when user shares HTML that needs CSS. Transforms tables, lists, status indicators, buttons, and layouts into a cohesive design system.
nextjs-validator
Validate Next.js 16 configuration and detect/prevent deprecated patterns. Ensures proxy.ts usage, Turbopack, Cache Components, and App Router best practices. Use before any Next.js work or when auditing existing projects.
tailwind-validator
Validate Tailwind CSS v4 configuration and detect/prevent Tailwind v3 patterns. Use this skill when setting up Tailwind, auditing CSS configuration, or when you suspect outdated Tailwind patterns are being used. Ensures CSS-first configuration with @theme blocks.
artifacts-builder
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, @agenticindiedev/ui). Use for complex artifacts requiring state management or shared UI components - not for simple single-file HTML/JSX artifacts.
landing-page-vercel
Scaffolds a production-ready static landing page with working email capture form, analytics, and responsive design. Activates on "create landing page", "build a landing page", "launch page for product", or similar requests. Optionally deploys to Vercel on explicit request.
design-dispatch
>-
layout
Reworks the structure underneath a UI — spacing scale, visual hierarchy, grid and composition, rhythm, and density — turning monotonous or crowded arrangements into intentional ones. Applies while the composition itself is still wrong, ahead of any detail pass. Use when the user says the layout feels off, every section looks the same, the UI is crowded or too sparse, hierarchy is unclear, or nothing guides the eye. For the last-mile pass on a finished feature, use `polish`.
react-patterns
Modern React patterns and principles. Hooks, composition, performance, TypeScript best practices. Use when writing or reviewing React components, applying hooks and composition patterns, or improving React performance and TypeScript usage.
tailwind
>-
anti-ui-slop
Stop coding agents from shipping generic UI. Use UIZZE''s 800,000+ real web and iOS screens to build product-specific interfaces, define a design contract, cover required states, and run a hard finish gate. Use when designing, implementing, redesigning, critiquing, or pre-ship reviewing a web or iOS interface in Codex, Claude Code, Cursor, Copilot, or another coding agent. Trigger with "anti-ui-slop", "stop UI slop", "ground this UI in real screens", or "run the UI finish gate".
front-dev
>-
frontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
frontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
backoffice-fullstack
Fullstack development skill for WL Backoffice system. Handles feature implementation across Kirby (FE), Coloris (BE API), Promodia (Promotion), and Monika (SQL Database). Use when users want to "create new feature", "implement backend API", "create frontend component", "add new stored procedure", "create database table", or any fullstack development task for the backoffice system.
webapp-testing
Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.
