Design & UX

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

skills in category: 9,093
pages available: 379

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 145–168 of 9,093 skills

Architrave WorkAComplete a bounded development, research or writing assignment from Architrave. Use in a child session/subagent when explicitly assigned; not another supervisor.designVotes: 0GitHub stars: 2
Architrave TournamentAExplicitly compare implementation options for an Architrave run when the user requests a tournament or the lead workflow identifies architectural, security, migration, data-loss, infrastructure, runtime, or recurring-failure risk.designgosecurityVotes: 0GitHub stars: 2
Architrave Skill AuthoringAExplicitly create, revise, or package a skill when asked to author skills; not for routine use of an existing skill.designpythonrustVotes: 0GitHub stars: 2
Architrave ReviewAExplicitly run a read-only Architrave rubric review of a frozen proposal or implementation and return PASS, REVISE, or FAIL with evidence.designcode-reviewgitVotes: 0GitHub stars: 2
Architrave Mcp IntegrationAExplicitly design or review an MCP integration when asked; not for routine tool use or changing a host's MCP configuration.designrustdocumentationVotes: 0GitHub stars: 2
Architrave CtoAApply the CTO checklist inline for an established stall, material scope/budget decision, requested feasibility reset or owner-requested program oversight. Not a mandatory startup or self-initiated periodic review; do not spawn another supervisor.designpythongoVotes: 0GitHub stars: 2
Skills DirectorySkills Directory Pro Download any skill as a ZIP for Claude.ai, Claude Desktop, or .claude/skills.See Pro
Architrave Agent AuthoringAExplicitly create, revise, or review an agent role when asked to author agents; not for routine use of an existing role.designgosecurityVotes: 0GitHub stars: 2
PristineAMake web UI pristine. Use when the user wants to document a product's design context (DESIGN.md), critique or rate a UI, screenshot, URL, or file, design a new page/component/flow from scratch or redesign an existing one, or polish/improve any web interface: sites, apps, components, docs, blogs, landing pages, dashboards, charts. Covers hierarchy, layout, typography, color, dark mode, responsive/mobile, 60fps motion and micro-transitions, accessibility, UX copy, edge cases, and performance. C...designgonodeVotes: 0GitHub stars: 8
Better DesignADesign, improve, and validate UI/UX for applications, websites, native interfaces, and games: an art direction derived from the product, a coherent visual system kept in the project's DESIGN.md (read first, created when missing, the single source of interface values), measured layout geometry (equal spacing, shared alignment lines, content centered inside small controls, nothing clipped or touching its container edge), a catalog of AI-slop patterns that rejects page narration and redundant he...designgonodeVotes: 0GitHub stars: 25
Saas Product Demo VideoABuild, refine or reskin a short SaaS product film in Remotion, cut to the beat of its soundtrack, from the product's real screens, brand and copy. Use when the user wants a product demo, launch video, explainer or social reel of their software made in code; wants an existing product film changed, reskinned or critiqued; or has a product with no interface to record and needs schematic UI. Covers 16:9 and 9:16, b-roll under motion graphics, sound effects and checked renders. Not a live-action e...designpythongoVotes: 0GitHub stars: 61
DioramaACreate, modify, check and export programmatic 2.5D game assets with Diorama — props, scenery kits, effects, item icons and HUD pieces with `@core/volume`, animated characters, gear and outfits with `@core/rig`. Use for asset code, projects and the export pipeline; it routes to diorama-volume, diorama-rig, diorama-setup and diorama-review.designgoshellVotes: 0GitHub stars: 2
product-design-harnessBUse when a product direction, feature, workflow, experiment, launch, feedback signal, automation, or scale decision needs judgment before execution or the next iteration.designgitVotes: 0GitHub stars: 19
Editor FilmcraftAEditor de video experto que trabaja dentro de FilmCraft (el NLE open source que replica Adobe Premiere Pro) con criterio de montador, colorista y mezclador. Úsala siempre que haya que montar, recortar, pulir, revisar o entregar un video en FilmCraft o en un proyecto .fcproj, o al portar un montaje de Palmier o Premiere a FilmCraft. También cuando se pida mejorar ritmo, cortes, transiciones, subtítulos, color (Lumetri), audio (voces bajas, ducking, loudness) o gráficos de un reel o video de ev...designgoawsVotes: 0GitHub stars: 2
Stage And CameraAStage, camera and motion for app footage in a product film: the background around the app window (generated wallpapers, brand colour, photos), a dark plate under fading windows, a 3D side angle, wide-to-macro camera moves, closed-form springs instead of easing, shot grammar for product actions, and reframing for 9:16 and 1:1. Use when someone says the screen looks flat or empty, wants a modern or 3D look, a website-style background behind the app, "something like Apple", smoother camera moves...designpythongoVotes: 0GitHub stars: 2
Sfx SyncADesign, synthesize and place sound effects so each one lands on the frame the eye sees and is heard on laptop and phone speakers: UI clicks, typing, taps, sends, arrivals, whooshes into cuts, risers, impacts, ticking under suspense. Use when someone says a sound is late or early, "I can't hear the typing", "the landing sound is missing", "sounds overlap", "too many whooshes", wants UI foley for a product video, or needs effects generated in code. Verifies timing with an attack/peak report aga...designpythonrustVotes: 0GitHub stars: 2
Music To PictureAMeasure a music track and cut it to a video's story points: tempo and beat grid, downbeats, sections, where it ends, then an arrangement that lands the drop on the first real action, suspense on a failure, the biggest return on success, a breakdown under a quiet section and the track's own ending on the end card. Use when someone wants a soundtrack fitted, swapped, slowed, re-cut or made "more cinematic" on an existing video, wants several music versions of one picture, says the music is "mon...designpythongoVotes: 0GitHub stars: 2
Mix MasterABalance music and effects for a product or launch video and master it for social platforms (−14 LUFS, −1 dBTP) without touching the picture: ducking under typing, headline markers, a build into the end card, end silence, the success moment as the loudest point, and change-safe edits that move only what a note points at. Use when someone says the background is too loud, "44 s hits too hard", "make it quieter here", "it sounds flat", "louder for social", or wants a soundtrack muxed onto a rende...designpythonbashVotes: 0GitHub stars: 2
Frame ReviewAMake the agent watch its own rendered video before anyone else does: contact sheets with film time, phone-size sheets, frame strips around fast moments, exact stills, a loop check, then a harsh scored critique, the three worst problems with timestamps, a scoped fix and a re-render of only the affected seconds. Use after any render of a motion graphic, launch film or product video, when someone says "it looks mid", "5/10", "make it 90", "check the transition at 18 s", or before sending a versi...designpythonbashVotes: 0GitHub stars: 2
Footage CleanupAPrepare real app and phone screen recordings for a product film: cut actions at 1× and speed only travel, remove app re-layout flicker, rebuild a phone status bar (hotspot pill, wrong time) from a clean take, join takes with an eased hand-off, splice two versions where their frames agree, fill empty UI in the app's own style when asked, and sharpen the final picture lightly. Use when footage shows glitches, a status bar or notification that shouldn't be there, a jump between recordings, an em...designpythonbashVotes: 0GitHub stars: 2
No FiADraw low-fidelity UI wireframes and charts as plain text, so people can discuss layout, content, and flow without being distracted by visual design. Use when the user asks for a wireframe, layout sketch, screen flow, dashboard, or to "talk through" a screen before any visuals exist. Output is text only, in a code block, with no emoji, color, or images.designpythongoVotes: 0GitHub stars: 2
Update ChangelogARecord a change to the no-fi skill in the changelog. Use after any change to files under no-fi/ (SKILL.md, vocabulary.json, examples, scripts), and before finishing such work. Never log changes to site/, which is only a demo.designpythongitVotes: 0GitHub stars: 2
app-ui-sloplessAVisual design and UX for native app screens in SwiftUI (iOS and macOS), Jetpack Compose and Compose Multiplatform (KMP). Use whenever the user wants to design, build, restyle, redesign, theme or audit how an iOS, Android or Mac screen, window, flow, component or design system looks and feels — e.g. a screen that looks generic, boring, stock Material or "AI-made"; picking a type scale, colour palette or theme code; giving an app a style (warm premium, neo-brutalist, playful, editorial); or a U...designpythonrustVotes: 0GitHub stars: 4
card-skillATurn supplied text or evidence into PNG cards, article covers, and explanatory illustrations. Use for content-to-image requests, including card series and reading-note visuals.designgoshellVotes: 0GitHub stars: 5
Wcag AccessibilityAWCAG 2.2 Level AA for web UI. Use when the task is accessibility, contrast, ARIA, keyboard access, focus, screen readers, alt text, or an accessibility audit. Do not use for styling, performance, or copy that is not an accessibility fix.designgotestingVotes: 0GitHub stars: 3