Design
UI/UX direction, visual design, and design systems
frontend-mockup-loop
by BlackBeltTechnology
"Plan, build, and iterate UX-friendly frontend mockups via a ground→contract→mockup→test→fix→learn loop, acting as an expert UX designer who grounds every decision in externally documented public design rules (Nielsen heuristics, Laws of UX, WCAG, GOV.UK/USWDS/Material). Uses the bundled serve_mockup, score_mockup, and init_ui_contract tools plus a ui-contract.md design control plane to keep screens consistent. Works in any React/Tailwind/shadcn (or plain HTML) project. Use when designing new screens, adapting existing UI, enforcing cross-screen consistency, or doing a UX review. Triggers: \"design a screen\", \"mockup this UI\", \"wireframe\", \"make the UI consistent\", \"adapt the existing design\", \"improve this layout\", \"UX review\", \"is this good UX\"."
design-ui
by mblode
Provides design direction and visual system for web UI. Defines layout, typography, colour, and overall aesthetic for product (SaaS/admin/data-heavy) or marketing/brand experiences. Use when choosing visual direction, selecting colour palettes and fonts, establishing layout patterns, or starting a new UI design system.
audit-typography
by mblode
Audits web typography for punctuation, font selection, sizing, spacing, OpenType features, hierarchy, layout, typeface pairing, brand identity, and display type. Use when writing CSS/HTML for text, selecting or pairing typefaces, reviewing typography in web designs, configuring font-feature-settings, building a type system, or auditing typographic quality. Triggers on tasks involving font-family, font-size, line-height, letter-spacing, @font-face, font pairing, or typographic correctness.
gc-minimal-zine-poster-v0-3
by LiamGvchi
Generate or analyze poetic paper-texture minimal zine posters with large negative space, a small editorial collage or focal element, experimental typography, and one clear color accent. Use when the user gives a theme, sentence, article, mood, object, photo, content brief, reference images, or an image folder and wants a final poster image, a production-ready image prompt, reusable style rules, or varied layouts that stay in one visual family.
threejs-game-ui-designer
by majidmanzarpour
"Design premium Three.js game UI. Use for HUDs, menus, overlays, pause/win/lose screens, settings, icon controls, touch UI, typography, responsive layout, safe areas, text fit, and UI/world cohesion."
deck3d
by BlackBeltTechnology
'Build a self-contained 3D presentation from a Markdown outline — parse, tune via overrides, render to one offline deck.html. Use on "make a 3D deck from this outline", "build a presentation from these notes", "deck3d this markdown", "turn this talk into a 3D deck".'
deck3d-from-pptx
by BlackBeltTechnology
'Turn an existing .pptx into a styled deck3d 3D presentation: import, reference renders, then nine steps (fidelity … transitions), each authoring 2-4 variants, showing a contact sheet, asking the user, recording the pick, then build + compare. Use on "make a 3D deck from this pptx", "convert my PowerPoint to deck3d", "match the original slides in 3D".'
anti-slop-redesign
by BlackBeltTechnology
"Redesign an existing UI without breaking it: declare a mode (greenfield / preserve / overhaul), audit the current surface before any edit, apply modernisation levers in priority order, and never silently change routes, nav labels, form fields, shortcuts or data-testid hooks. Triggers: \"redesign this page\", \"modernise this UI\", \"refresh the look\", \"mockup an existing surface\"."
anti-slop-image-direction
by BlackBeltTechnology
"Opt-in, paid reference images for marketing or new-site work: plan one image per section, confirm count, backend and cost, generate with pi-nano-banana, then distill a written direction brief for the mockup loop. Images are direction, never source. Never for product UI. Triggers: \"generate design references\", \"image direction for this page\", \"show me visual directions\"."
dashboard-plugin-scaffold
by BlackBeltTechnology
Scaffold a new pi-dashboard plugin in the dashboard monorepo, OR augment an existing pi-extension project on disk with dashboard plugin contributions. Hybrid skill: a single ask_user batch up front, then prescriptive steps the agent follows. Use when the user asks to "create a dashboard plugin", "add dashboard support to my extension", "scaffold a plugin", or similar.
figcraft
by BlackBeltTechnology
Headless UI/interface design with FigCraft (Figma-style frames, shapes, text, components), provisioned on demand by pi-craft - build screens from a JSON-lines script, export frames or layers as png, jpg, svg or pdf at 1x-3x. Use for "design a mobile login screen and export it as png", "export this button at 2x", "turn this svg into an editable design".
anti-slop-brandkit
by BlackBeltTechnology
"Opt-in, paid brand board for a new site with no existing brand: confirm count, backend and cost, generate one 3x3 board (logo concept, palette, type, image direction) with pi-nano-banana plus a written brand.md. A proposal for the user to approve, never an auto-applied identity. Triggers: \"make a brand kit\", \"brand board for this new site\", \"propose a visual identity\"."
anti-slop-frontend
by BlackBeltTechnology
"A mechanical, countable anti-slop checklist for AI-generated frontend. Catches the specific signatures an undirected model defaults to: AI-purple glows, Inter-everywhere, em-dashes, div-based fake screenshots, eyebrow-on-every-section, beige+brass \"premium\" palettes, generic Jane Doe / Acme data. Advisory layer that pairs with frontend-mockup-loop (which owns the cite-a-source loop plus WCAG gates) but works standalone in any React/Tailwind/HTML project. Triggers: \"does this look AI-generated\", \"anti-slop pass\", \"remove the AI tells\", \"why does this look templated\", \"design review for slop\"."
theme-system
by BlackBeltTechnology
CSS custom properties theme architecture for 4 themes (studio, earth, athlete, gradient) with data-theme attribute switching and theme-aware components. Use when implementing theme switching, defining color schemes, or creating theme-responsive UI elements.
skill-creator
by BlackBeltTechnology
Guide for creating effective skills. This skill should be used when users want to create a new skill (or update an existing skill) that extends Claude's capabilities with specialized knowledge, workflows, or tool integrations.
plan-proposal
by BlackBeltTechnology
'Develop-side planning orchestrator for an OpenSpec change: artifact creation → doubt-driven-review → scenario-design → fold of automated scenarios into tasks.md, then STOPS at the git-worktree boundary. Main interactive session only; never a subagent. Triggers: "plan this change", "draft the proposal and plan", "scaffold + review + fold", "prep a change for building".'
frontend-mockup-loop-dashboard
by BlackBeltTechnology
'Dashboard-specific adapter on the generic frontend-mockup-loop skill: binds the 7-step design loop to pi-agent-dashboard component sources, theme-system tokens, and isolated verification. Use when designing/redesigning any pi-agent-dashboard client surface. Triggers: "design a dashboard screen", "mockup a dashboard surface", "redesign SessionCard", "make dashboard UI consistent".'
code-connect-components
by figma
Connects Figma design components to code components using Code Connect. Use when user says "code connect", "connect this component to code", "connect Figma to code", "map this component", "link component to code", "create code connect mapping", "add code connect", "connect design to code", or wants to establish mappings between Figma designs and code implementations. Requires Figma MCP server connection.
audit-ui
by mblode
Audits web UI quality across accessibility, interaction, forms, typography, navigation, layout, performance, motion, and microcopy. Use when reviewing or refining frontend UI before merge or release, or when the user asks for a UI, UX, or accessibility audit.
flutter-add-widget-preview
by flutter
Adds interactive widget previews to the project using the previews.dart system. Use when creating new UI components or updating existing screens to ensure consistent design and interactive testing.
skill-extract
by nyldn
Design system and product reverse-engineering
skill-visual-feedback
by nyldn
Process screenshot-based UI/UX feedback to fix visual issues. Use when: AUTOMATICALLY ACTIVATE when user provides visual feedback:. "[Image X] The /settings should be Y". "[Image X] these button styles need to be fixed"
threejs-aaa-graphics-builder
by majidmanzarpour
"Upgrade Three.js games from basic/prototype visuals to premium AAA-inspired browser graphics. Combines art-direction critique, procedural model building, technical art, mandatory external asset sourcing decisions, threejs-3d-generator assets, threejs-image-generator concept/texture workflows, scene visual polish, material/texture libraries, world prop kits, shaders, VFX readability, render budgets, LOD/instancing, render pipeline, and visual scorecard gates. For premium games with characters, vehicles, ships, weapons, buildings, signature props, skies, textures, decals, logos, icons, or GUI art, load the relevant generator skills before deciding procedural assets are enough."
implement-design
by figma
Translates Figma designs into production-ready code with 1:1 visual fidelity. Use when implementing UI from Figma files, when user mentions "implement design", "generate code", "implement component", "build Figma design", provides Figma URLs, or asks to build components matching Figma specs. Requires Figma MCP server connection.