Design
UI/UX direction, visual design, and design systems
template-update
by mirunamu00
Change a Pigment design system that is already published — fix a rule, change tokens, add or change a component — as a new internal version that is re-applied to the four base apps, evaluated, approved and published with a public changelog entry. Use when the user asks to fix, update, improve or extend an existing system. For a brand-new system, use template-intake.
hyperframes
by TurboSnails
Mandatory entry point: read this first for any request to make, create, edit, animate, or render a video, animation, or motion graphic, including a promo, explainer, captioned clip, title card, overlay, slideshow or interactive deck, Remotion port, or any HyperFrames HTML composition. Also use it to inspect, diagnose, validate, preview, publish, or batch-render an existing HyperFrames project. Inputs may be a website URL, GitHub PR, Figma design or URL, text or brief, existing footage, or music. It resumes project state, captures intent when applicable, selects and installs the owning workflow, and routes domain capabilities. HyperFrames is the default output framework unless the user explicitly chooses another framework for the deliverable or asks only to record a browser session.
wicked-garden-product-ux-review
by mikeparcewski
Use when evaluating UX quality — user flows, information architecture, user research synthesis, personas, and usability assessment. Also covers generative UX flow design from requirements. NOT for visual design consistency (use visual-review) or accessibility code audits (use product/accessibility).
wicked-garden-product-value-strategist
by mikeparcewski
"Value-proposition design AND stakeholder alignment in one agent. Use when: value proposition, differentiation, JTBD mapping, defensibility, consensus building, or dispatched as the value lens of the product skill's strategy --focus all."
humanizer
by TurboSnails
Rewrite AI-sounding text so it reads like the writer without changing what it says. Use when editing or reviewing prose for AI tells: not-X-but-Y contrasts, one-line closers, staged openers, forced triads, dashes everywhere, inflated claims, sales language, stock AI words, bold labels, or filler. Based on Wikipedia's "Signs of AI writing."
analyze-feature-requests
by TurboSnails
"Analyze and prioritize a list of feature requests by theme, strategic alignment, impact, effort, and risk. Use when reviewing customer feature requests, triaging a backlog, or making prioritization decisions."
pretext
by Russ534
Build creative browser demos with DOM-free text layout.
sketch
by Russ534
"Throwaway HTML mockups: 2-3 design variants to compare."
wicked-garden-product-mockup
by mikeparcewski
Use when you need a quick ASCII wireframe or HTML mockup in-chat without Figma overhead. NOT for production design work — use the figma plugin for that.
design-anti-slop
by lumeierecollection-blip
Detect and fix AI design slop — the convergent look that shows up across AI-generated landing pages and dashboards (purple/indigo gradients, rounded-2xl everywhere, three-box feature grids, bento dashboards, aspirational-but-empty hero copy, etc.). Use this skill whenever the user asks Claude to build/generate/mock up a landing page, dashboard, or SaaS UI, OR when the user shares an existing design (screenshot, URL, code, Figma link) and asks for critique, feedback, "does this look AI-generated?", or "make this less generic." Trigger even if the user does not use the word "slop" — phrases like "build me a hero section," "this looks AI-made," "why does this look like every other SaaS page," or "make this feel more custom" all qualify. Prefer this skill over general design-critique when the concern is specifically convergence, sameness, or AI-generated feel.
hallmark
by lumeierecollection-blip
"Anti-AI-slop design skill for greenfield pages, audits, redesigns, and design extraction from URLs or screenshots. Use when the user asks to build a new app or landing page, wants to redesign something, invokes Hallmark by name, or uses audit/redesign/study."
ecommerce-store-designer
by russodope
Design and generate e-commerce store homepage / decoration module images for any online-store platform. Use this skill whenever a user wants to: - Design an online store homepage or decoration (店铺装修 / 首页装修 / 店铺首页) - Create store banner images, series showcases, category navigation, or brand story sections - Build a modular store-design tool in HTML that exports module images at a user-specified width - Design e-commerce product showcase / homepage pages for any platform - Create a customizable store template for different brands Trigger on "店铺装修", "店铺首页", "首页设计", "banner", "详情页", "电商装修", "store/shop decoration", or "store homepage" alongside design or image-generation requests. ⚠️ The skill FIRST asks the user for the target image size (platform / 出图宽度), then designs at a 1440px internal reference and exports at the user's width.
design-loop
by MarBlanco
A build → critique → fix loop for making a front-end genuinely beautiful. It exists to kill generic, templated, "vibe-coded" UI and push the interface to Claude-design quality or better, judged by a harsh independent eye against a real reference and real craft standards. Use it whenever you are building or improving UI/UX — a page, a screen, a component, a whole app surface — and "it works" is not the bar; "it's beautiful" is. Triggers on "/design-loop", "design loop", "make this beautiful", "the UI looks vibe-coded", "level up this design".
channel-branding
by lumeierecollection-blip
Use to generate a channel's name, description, and keywords/tags for a given niche, grounded in real research (not invented), and push that branding to YouTube via the Data API once the channel itself exists.
visual-verify
by Megatron-HQ
Use after implementing any UI change requested by the user — new component, layout change, new view, theme/state-handling change — to confirm it matches what was asked for, didn't break anything else, and holds up at every window size Megatron supports. Not for aesthetic critique or taste review; it checks conformance and breakage, not whether something looks good.
impeccable-audit
by SebastiaanWouters
"Skills-only equivalent of impeccable.style /audit. Perform comprehensive audit of interface quality across accessibility, performance, theming, and responsive design. Generates detailed report of issues with severity ratings and recommendations. Use for frontend and UI design tasks."
orchestration
by teslasoft-de
Orchestrate UX design work across research, architecture, interaction, visual, and strategy competencies. Entry point for UX projects spanning multiple areas. Routes to specialized skills based on task requirements. Use for: UX design, user experience, UX project, design process, UX workflow, full UX cycle, end-to-end UX, UX competencies, which UX skill, UX help, coordinate UX disciplines, UX team handoffs.
discovery-process
by TurboSnails
Run a full discovery cycle from problem hypothesis to validated solution. Use when a team needs a structured path through framing, interviews, synthesis, and experiments.
design-an-interface
by TurboSnails
使用并行子代理为模块生成多个显著不同的接口设计。适用于用户想设计 API、探索接口选项、比较模块形状，或提到 “design it twice” 时。
copywriting
by TurboSnails
When the user wants to write, rewrite, or improve marketing copy for any page, including homepage, landing pages, pricing pages, feature pages, about pages, or product pages. Also use when the user says "write copy for," "improve this copy," "rewrite this page," "marketing copy," "headline help," "CTA copy," "value proposition," "tagline," "subheadline," "hero section copy," "above the fold," "this copy is weak," "make this more compelling," "this sounds like AI," "AI slop," "make it sound human," or "help me describe my product." Use this whenever someone is working on website text that needs to persuade or convert. Drafts never use AI tells like "it's not X, it's Y" reveals, "no X, no Y, no Z" lists, or sentences that trail into extra comma clauses. For email copy, see emails. For popup copy, see popups. For editing existing copy, see copy-editing. For the offer underneath the copy (bonuses, guarantees, value framing), see offers.
html-report
by WireCatLabs
Build a single-file HTML data report (an audit, a measurement, an analysis) that reads well, works in light and dark themes and on a phone, and can be published as a Claude artifact or opened locally. Use when the user asks for a report, an audit page, stats with graphs, or "make it an HTML page".
html-tools
by nbbaier
Build single-file HTML tools — self-contained HTML+JS+CSS applications that solve a specific problem without a build step. Use this skill whenever the user asks to build a utility, converter, viewer, debugger, or any small interactive web tool. Also trigger when the user says "build me a tool that...", "make a quick app for...", "I need a single-file HTML page that...", or wants to create something that could be hosted as a static file. This skill is specifically for practical, utility-focused tools (not landing pages, portfolios, or marketing sites — use frontend-design for those).
Prototype Designer
by daffy0208
Create interactive prototypes, design user flows, implement prototype testing strategies, and manage handoff to development. Validate ideas before building.
Ask_Why
by maxkura
Use this skill for vague, high-rework planning work that needs iterative human decisions, such as product design, research planning, technical strategy, PRDs, workflow design, agent design, or skill design. Run concise P2A decision rounds, challenge assumptions early, record decisions in PLAN.md, DECISIONS.md, and OPEN_QUESTIONS.md, then produce FINAL_PLAN.md when converged. Do not use for simple factual Q&A, routine coding fixes, direct execution, translation, writing polish, or one-shot requests.