rajnandan1

design-taste-frontend

Senior UI/UX Engineer. Architect digital interfaces overriding default LLM biases. Enforces metric-based rules, strict component architecture, CSS hardware acceleration, and balanced design engineering.

high-end-visual-design

Teaches the AI to design like a high-end agency. Defines the exact fonts, spacing, shadows, card structures, and animations that make a website feel expensive. Blocks all the common defaults that make AI designs look cheap or generic.

redesign-existing-projects

Upgrades existing websites and apps to premium quality. Audits current design, identifies generic AI patterns, and applies high-end design standards without breaking functionality. Works with any CSS framework or vanilla CSS.

Data & Documents Listed

ss-format-convert

Convert images between formats: PNG, JPG/JPEG, WebP, TIFF, BMP, GIF, HEIC, and AVIF. Performs high-quality lossless conversion by default. Handles alpha channel transparency automatically — compositing against a configurable background color when converting to formats that lack alpha support (JPG, BMP). Supports single-file and batch directory conversion with optional recursive subdirectory scanning. Uses ImageMagick. Use this skill whenever the user wants to: convert an image to another format, change image format, save as PNG/JPG/WebP/TIFF, convert HEIC photos to JPG or PNG, batch convert images, make images web-compatible, convert to WebP for web optimization, or anything involving image format conversion. Also trigger when the user mentions format names in the context of converting, exporting, or saving images.

ss-image-resize

Resize and crop images to exact platform-specific dimensions for social media, app stores, ads, and web. Supports 60+ platform presets including OG images, YouTube thumbnails, App Store screenshots, Play Store graphics, TikTok, Pinterest, Threads, Substack, Chrome Web Store, Notion covers, Instagram, Twitter, Dribbble, Bluesky, Product Hunt, LinkedIn, Facebook, and more. Uses ImageMagick for high-quality Lanczos resampling. Works on macOS, Linux, and Windows. Use this skill whenever the user wants to resize an image for a specific platform, create social media assets, generate app store screenshots, make thumbnails, create OG images, prepare images for upload, or batch-resize to multiple sizes. Also trigger when the user mentions any platform (YouTube, TikTok, Pinterest, App Store, Play Store, Substack, Threads, Chrome Web Store, Notion, etc.) in the context of image sizing, resizing, cropping, or preparation — even if they don't explicitly say "resize".

Data & Documents Listed

ss-png-to-svg

Convert PNG images to smooth, scalable SVG vector files using potrace tracing. Supports multi-color PNGs (logos, icons, illustrations) by extracting dominant colors and tracing each color layer separately, then compositing into a clean SVG. Also handles single-color images and lets users override the fill color. Use this skill whenever the user wants to: convert a PNG to SVG, trace a bitmap, vectorize an image or logo, turn a raster image into vectors, create an SVG from a PNG/JPEG/bitmap, or anything involving bitmap-to-vector conversion. Also trigger when the user mentions "potrace", "image tracing", or asks to make an image scalable.

AI & Automation Listed

ss-remove-slop

Remove AI slop from prose: edit a draft into sharper, more human writing while preserving the writer's personal voice; detect and name AI-slop patterns in a text without rewriting it; or draft new prose that carries no AI tells. Use when the user shares a draft to make clearer, more direct, more opinionated, or less AI-sounding, asks whether writing reads as AI or wants it audited for slop, or wants prose written, reviewed, or humanized slop-free.

ss-shadcn-svelte

Use shadcn-svelte components in SvelteKit projects. Detects whether the current project is a SvelteKit app with shadcn-svelte installed, lists available components, and provides access to full component documentation via the official llms.txt. Helps choose the right UI components for the job — buttons, forms, dialogs, tables, charts, and more — following shadcn-svelte best practices. Use this skill whenever the user is working in a SvelteKit project and wants to: add UI components, build forms, create dialogs or modals, add a data table, use a date picker, build a sidebar or navigation, add charts, use a combobox or select, create an alert or toast notification, or generally build UI with pre-built accessible components. Also trigger when the user mentions "shadcn", "shadcn-svelte", "bits-ui", or asks about available components in their Svelte project.

ss-animate-svg

Create hand-crafted, dependency-free animated SVGs: self-drawing paths and signatures, loading spinners, morphing shapes, motion along a path, animated gradients, waves, pulses, and animated logos, icons, and badges — up to complex layered scenes with choreographed build-ins, particle fields, and parallax — choosing the right technique (CSS vs SMIL) for how the SVG is delivered (inline HTML, <img>, CSS background, GitHub README, favicon). Use when the user wants any animated SVG, asks to animate an existing SVG, icon, logo, or favicon, wants an animated scene, illustration, hero background, or banner, or mentions SMIL, stroke drawing, dashoffset, path or shape morphing, motion path, loader, spinner, animated checkmark, particles, parallax, or a "draws itself" effect.