Entdecke Skills. Liefere jedes Projekt schneller.

Kill list of visual cliches, layout tropes, and UI patterns that make frontends look AI-generated. ALWAYS trigger this skill alongside frontend-design whenever Claude builds any frontend — websites, landing pages, dashboards, React components, HTML pages, artifacts, or any visual UI. Also trigger when users say "make it look less AI," "this looks generic," "don't make it look like every other AI site," "avoid the AI look," "no AI slop," or when reviewing/auditing any frontend output. This is a companion checklist of what to NEVER do — the frontend-design skill handles what TO do.

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.

Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight. Use when the user mentions adding animation, transitions, micro-interactions, motion design, hover effects, or making the UI feel more alive.

Build interactive 3D scenes for the web using Three.js r128. Use this skill ONLY when the user explicitly asks for 3D — product viewers, 3D hero backgrounds, interactive geometry, particle scenes, or scroll-driven 3D camera work. Do NOT trigger for standard 2D websites, CSS animations, or SVG graphics. Trigger words: 3D, three.js, WebGL, 3D scene, product viewer, 3D background, interactive 3D, rotating model, particle system, 3D experience.

Measurable UX rules, UI style catalog, industry-specific guidance, and pre-delivery checklist for any frontend project. ALWAYS trigger this skill alongside frontend-design when building websites, landing pages, dashboards, apps, React components, or any interactive UI. Also trigger when users mention "UX," "usability," "accessibility," "a11y," "WCAG," "responsive," "mobile-friendly," "user experience," "UI patterns," "checklist," or ask to audit, review, or improve the usability of any frontend. This skill provides the hard numbers — minimum sizes, contrast ratios, timing values, spacing rules — so Claude doesn't guess.

Make websites, apps, and dashboards work beautifully across screen sizes. Use when the user mentions responsive, mobile, tablet, breakpoints, adaptive layout, touch targets, or cross-device — or when building any UI that needs to work beyond desktop. Self-contained — no other skills required.

Add moments of joy, personality, and unexpected touches that make interfaces memorable and enjoyable to use. Elevates functional to delightful. Use when the user asks to add polish, personality, animations, micro-interactions, delight, or make an interface feel fun or memorable.

Performs a final quality pass fixing alignment, spacing, consistency, and micro-detail issues before shipping. Elevates good work to great work.

SEO best practices for React + Vite + Tailwind CSS apps built with sticklight.com. Use when building or reviewing web pages, writing content for the web, generating meta tags, improving search rankings, setting up sitemap or robots.txt, adding structured data (JSON-LD), or optimizing images and performance in a Vite-based SPA. Covers: static fallback meta tags, dynamic SEO with @unhead/react, useSEO hook, sitemaps (dynamic via Edge Function and static), semantic HTML, heading hierarchy, image SEO, link best practices, URL structure, Core Web Vitals, favicon and OG image specs, mobile-first design, and IndexNow integration for instant search engine notifications.

Mobile-first design system for building iOS and Android apps with React Native, Flutter, or native frameworks. Covers touch interaction, performance, platform conventions, and visual quality. Prevents generic AI mobile aesthetics (pill overload, glassmorphism shells, gradient hero sections, metric-card grids) and enforces human-designed, functional UI. Use whenever building any mobile app, mobile component, React Native screen, Flutter widget, or mobile UI — even if the user doesn't say "mobile design system." Also trigger when reviewing mobile code for UX or performance issues, or when the user describes an app that "looks too AI-generated" or "generic."

Authentication and authorization patterns for React + Vite + Tailwind apps using Cloud Backend (Supabase). Use when implementing login, signup, password reset, session management, protected routes, Row Level Security (RLS), role-based access control, or user data tables. Covers: profiles table with auto-creation trigger, user_roles table, AuthContext with getUser() (not getSession()), ProtectedRoute component, full auth pages (Login, Signup, Forgot Password, Reset Password with expired link handling), logout, user-owned data with RLS policies, and security best practices.

Core Web Vitals optimization for Sticklight React+Vite+Tailwind apps. Use when the user asks to improve load speed, Lighthouse scores, LCP/FCP/CLS/INP/TBT, or fix slow or broken pages after refresh. Covers images, fonts, scripts, CSS animation, listeners, and bundle size.

Guide for creating or improving Sticklight user skills (specialized instructions stored in the Skills editor). Use when the user wants to add a new skill, rewrite skill content, tune descriptions for better triggering, or migrate ideas from file-based skill docs into Sticklight's DB format.

Shadow and elevation system for creating depth hierarchy. Covers sharp, soft, glow, layered, and neumorphic shadow styles. Includes tinted shadows, dark mode patterns, performant animations, and elevation formulas. Use when adding shadows, depth, or elevation to any UI element.

Build a live admin dashboard for WooCommerce/WordPress: product, order, and category management pulling real store data. Trigger when the user wants an admin panel, dashboard, or back-office to manage a WordPress or WooCommerce store — not a public storefront.