设计
UI/UX 方向、视觉设计与设计系统
frontend-mockup-loop
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\"."
gc-minimal-zine-poster-v0-3
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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.
flutter-add-widget-preview
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
nyldn
Design system and product reverse-engineering
skill-visual-feedback
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
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
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.
design-artifact
plannotator
Design principles and creative direction for building HTML artifacts — pages, reports, plans, landing pages, demos, decks, and small tools. Use when creating or restyling any visual HTML deliverable and deciding its palette, type pairing, layout, theming, or overall register, or when the output must not look generically AI-generated.
html-wireframe
plannotator
Direct-invocation specialist for low-fidelity, self-contained HTML wireframes that test information hierarchy, content, navigation, task flow, and responsive structure before visual design. Use when the user explicitly invokes html-wireframe or the broad html skill routes a wireframe request here. Do not activate independently from a general request. Do not use for polished mockups or production-like interaction; use html-prototype for those.
html
plannotator
Create or redesign self-contained single-file HTML artifacts with a visual direction shaped by the user's brief, project, and subject. Use when HTML is the deliverable for a report, explainer, landing page, presentation, tool, mixed artifact, or broad request. This is the collection's only implicit router. Route clear wireframe, prototype, mockup, plan, or diagram requests to the matching direct-invocation specialist when available. Do not use for ordinary application implementation when a standalone HTML file is not the deliverable.