Design & UX

UI, UX, design systems, accessibility, visual design, and frontend polish

skills in category: 7,235
pages available: 302

Security grades appear on each card once the skill has been scanned. Newly imported skills may briefly show without a grade until the backfill job runs.

Open in full browser

Browse design & ux skills

Showing 1–24 of 7,235 skills

Redesign Existing ProjectsAUpgrades 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.designgospringVotes: 0GitHub stars: 382
Pick Ui LibraryAPick the right library for a given frontend task from a curated, opinionated list — numbers, OTP inputs, charts, command menus, virtualization, drag and drop, toasts, state, styling, and more. Only runs when explicitly invoked; it does not trigger on its own.designreactspringVotes: 0GitHub stars: 382
Emil PrototypeABuild multiple genuinely different versions of a UI piece you describe, rendered behind a visual picker so you can flip through them live and promote the one that feels right. Only runs when explicitly invoked; it does not trigger on its own.designgoVotes: 0GitHub stars: 382
Better WritingAFocuses on improving product copy in your project.designgoapiVotes: 0GitHub stars: 382
Better LayoutAExplicit layout reference for grouping, alignment, reading order, and progressive disclosure. Use only after Core frontend rules. Do not restyle product apps from these examples.designfrontendVotes: 0GitHub stars: 382
Better InterfaceACombines all of the `better-*` skills into a single review across accessibility, layout, writing, typography, color and UI polish.designgofrontendVotes: 0GitHub stars: 382
AnimateABuild an animation from scratch, making the decisions in the order that determines whether it feels right — should it animate at all, what purpose, which tool, which properties, which curve and duration, how it interrupts, how it exits. Writes the implementation. Use when asked to animate something, add motion, make a component feel alive, or build a transition. For critiquing existing motion use review-animations; for auditing a whole codebase use improve-animations. Only runs when explicitl...designreactspringVotes: 0GitHub stars: 382
Animate ExpoABuild animations for Expo and React Native only, using Reanimated, Gesture Handler, Expo Router, and expo-haptics. Use when the target runtime is an Expo or React Native app. Do not use it for Core Next.js web motion; use `animate` for web. Only runs when explicitly invoked; it does not trigger on its own.designgoreactVotes: 0GitHub stars: 382
Antislop UiAUI and visual skill for antislop. Use when building or editing any interface: color, layout, components, motion. Load with the core.designrustgoVotes: 0GitHub stars: 9
Antislop LayoutmobileAMobile layout skill for antislop. Use for layouts that reflow on small screens: grids, overflow, tap targets. Load with the core.designrustgoVotes: 0GitHub stars: 9
Workflow Threads ManagerAOversee the other Claude threads (sessions) working on the same project. Check what each is doing, confirm finished work is merged to main, has its changelog entry with screenshots, and is live, archive threads that are truly done, and restart or flag threads that were cut off. Use when the user says "check threads", "check new changes", "are the threads merged and pushed", "archive the done threads", or asks what the other sessions are up to. Project specifics (changelog format, live site, c...designgorailsVotes: 0GitHub stars: 11
Workflow Ship ChangeAShip every change the way the user requires, with the guardrails. Take screenshots of the start, the key moment and the result; give the change its own changelog version with pictures; verify with tests; commit only your own files; merge with the latest main and push as a fast-forward; publish that exact main live; confirm each step; and report measured sizes, asking before any upload over 50 MB. Use at the end of every change (feature, fix, tweak, art, balance, polish) and whenever the user ...designgonodeVotes: 0GitHub stars: 11
Workflow Progress ScreenshotsAShow the user real screenshots of the work as it progresses, without being asked. Capture the start, the key moment and the result of every visual change, send them as files with captions as soon as each is ready, and look at every image before sending it. Use on any task with a visible result (UI, pages, games, 3D, charts, motion), when the user says "show me", "screenshots", "keep giving me screenshots" or "where are the screenshots?", and before any report that claims a visual change works.designgoexpressVotes: 0GitHub stars: 11
Paper Cinder TransitionAChange between pages, chapters or scenes with a paper-burn transition, a ragged ember line that sweeps across the frame, chars the old page ahead of it and reveals the next scene live behind it, written as one WebGL composite pass over a frozen frame and a scissored live scene. Covers the front's silhouette, the luminous ember gradient with a beading gold thread, torn porous charcoal that is alpha-masked, baked noise, finite-difference slopes, the 0.75-scale live scene, sweep direction, timin...designrustgoVotes: 0GitHub stars: 11
Fire Paper LoaderABuild a burning-paper ring loader whose GLSL flame is drawn by a Worker on an OffscreenCanvas started from the head, so a main thread blocked by the page build cannot freeze it, with a progress count, an even-paced run into the hand-off, and a clean fade to the page. Covers the ember thread and ember gradient, porous char, worker start-up, parallel shader compile with a waited 1-px warm-up draw, hand-off without a stall, reduced motion and hidden-tab behaviour. Use for a loading screen, prelo...designjavascriptgoVotes: 0GitHub stars: 11
Build Wireframe Scan RevealAReveal Three.js geometry with an expanding world-space scan whose wire cage leads the solid surface, then burns away. Use for wireframe scanning, radial mesh reveals, survey pulses, holographic assembly, topology intros, and 3D model entrances where a plain opacity wipe does not explain the form.designgotestingVotes: 0GitHub stars: 11
Add Mouse Driven OrbitAAdd restrained mouse-driven orbit and parallax depth to a Three.js hero by damping one pointer target and splitting it across camera translation, look-at, and small object rotations. Use for passive cinematic 3D heroes, pointer-responsive scenes, organic model parallax, and interactive depth where OrbitControls would feel like a product viewer.designVotes: 0GitHub stars: 11
No Ai Design SlopAPrevent and remove generic AI-generated design defaults, incoherent visual choices, and established UI defects while creating, revising, or reviewing websites, apps, screenshots, mockups, and design code. Use as a passive quality gate during UI work or for an explicit anti-slop cleanup; preserve the chosen art direction instead of forcing a neutral redesign.designrustgoVotes: 0GitHub stars: 11
Audit Ai Design SlopAAudit websites, apps, screenshots, mockups, and design code for harmful AI-design clichés, generic generated defaults, and established UI defects. Use when the user wants evidence-backed design feedback, an anti-slop review, or a removal-first cleanup plan without a speculative redesign.designrustgoVotes: 0GitHub stars: 11
Illustration Vintage EmblemADraws original hand-authored SVG badge illustrations in a vintage emblem style for design and coding subjects. Identifying traits: a seven-colour screen-print palette (green-black ink, cream, terracotta, sand, tan, pale, a touch of teal) with no gradients; one chunky hero object in thick 3.6 px ink outlines, shaded with woodcut gouges and lit with pale streaks; a terracotta sun disc behind it, cut free by a 7.5 px cream keyline; a hard horizontal edge slicing the scene into a dark splash band...designgoshellVotes: 0GitHub stars: 11
Illustration Two Colour BrushADraws original design and coding scenes as hand-authored SVG cards (480x360) in a two-colour brush-marker style. Identifying traits: thick wobbly black marker lines with blobby ends, built as filled ribbons; one second ink, mint green, in flat blocks that slip 2-10 px off the line like a misregistered print; solid black hair, trousers and shoes with mint highlight dashes; and a crinkly squiggle camo on cream areas, all on warm cream paper. Characters are chunky, with profile heads, big noses,...designgoshellVotes: 0GitHub stars: 11
Illustration Teal SpotADraws original spot illustrations of one hero object as SVG cards (480x360) in a teal-on-white style. Identifying traits are a single object in a fixed oblique 3/4 view showing top, front and right faces; white main faces with teal only on side faces and accents; thin dark-teal outlines on every edge; a hard, unblurred deep-teal drop shadow pushed down-right; and two to four small floating extras (coins, tilted UI cards, badges) with their own hard shadows, plus 4-point sparkles. No people. C...designgonodeVotes: 0GitHub stars: 11
Illustration Outlined CartoonADraws original hand-authored SVG spot illustrations in an outlined cartoon style for design and coding subjects. Identifying traits: a warm near-black ink outline on every flat fill in three weights (2.5 / 2 / 1.5 px), tapered ink slivers for folds, brows and finger splits, big-headed characters with huge white eyes, thick brows, open smiles and pink blush, blob hair with white highlight dashes, and a small decor set of "+" sparkle crosses, outline rings, squares and coloured dots on a transp...designgonodeVotes: 0GitHub stars: 11
Illustration One LineADraws original hand-written SVG spot illustrations in the One-line style, joyful action figures doing design and coding work. One continuous uniform black line (2.3 px at 480 wide) loops and doubles back to draw the whole figure. Flat coral, periwinkle and white patches sit behind the line, wobbly and deliberately knocked 2–6 px out of register like a misprinted riso. Tops carry coral stripe lines, and there is no ground plane, only a squiggle, a curl or a few speed strokes, all on warm beige...designgonodeVotes: 0GitHub stars: 11