UI Components
Code-based UI component generation and styling
patch-notes
by Donchitos
"Generate player-facing patch notes from git history, sprint data, and internal changelogs. Translates developer language into clear, engaging player communication."
map-systems
by Donchitos
"Decompose a game concept into individual systems, map dependencies, prioritize design order, and create the systems index."
team-ui
by Donchitos
"Orchestrate the UI team: coordinates ux-designer, ui-programmer, and art-director to design, implement, and polish a user interface feature from wireframe to final."
team-audio
by Donchitos
"Orchestrate audio team: audio-director + sound-designer + technical-artist + gameplay-programmer for full audio pipeline from direction to implementation."
gbro-cover-design
by pyang5166
"公众号/小红书封面设计。固定3:4竖版，10种构图风格可选，真人出镜，生成可直接用于图片生成模型的提示词。支持多参考图：图1固定为人脸，图2起为UI截图、产品图等素材。关键词：封面设计、提示词生成、公众号封面、小红书封面。"
agent-native-architecture
by petekp
Build applications where agents are first-class citizens. Use this skill when designing autonomous agents, creating MCP tools, implementing self-modifying systems, or building apps where features are outcomes achieved by agents operating in a loop.
email-banner-generation
by eachlabs
Generate email marketing banners and headers using each::sense AI. Create newsletter headers, promotional banners, welcome emails, and seasonal campaigns optimized for email-safe dimensions and best practices.
rai-standards
by microsoft
"Consolidated Responsible AI standards reference: NIST AI RMF 1.0, AI STRIDE threat-modeling overlay, EU AI Act risk tiers, and an open-standards catalog with phase mapping"
ss-component
by bitjaru
Generate a new UI component following the StyleSeed design conventions
ss-verify
by bitjaru
The VISUAL gate — render a UI or visual artifact through its surface adapter, inspect the actual pixels, then fix and re-render until it passes the composed StyleSeed rule set.
wireframe
by Magdoub
Progressive UX generation — Phase 1 generates 5 B&W wireframe options instantly (1 safe + 4 exploratory), then Phase 2 renders Clean + Polished color variants via 5 parallel Task agents (one per option). Supports wireframes-only or wireframes+visuals. Extracts optimization intent from arguments when present. Maintains persistent design context. Use when user says "wireframe", "prototype", "UX options", or "layout exploration".
job-hunt-skill
by yanliudesign
"批量发现、整理和持续维护求职岗位清单。根据用户的简历、目标方向或种子 JD，搜索 LinkedIn 与公开网页，去重并建立尽量完整的候选池，用证据区分已核验事实和方向性推断，最后生成可搜索、可筛选的单文件 HTML job-hunt-skill 报告。用户说‘帮我批量找岗位’、‘整理职位清单’、‘使用 job-hunt-skill’、‘根据简历搜工作’、‘把这些 LinkedIn 职位做成表格’、‘持续跟踪岗位’时必须使用。只发现和分析岗位；绝不自动申请、处理登录凭据或绕过访问限制。"
wcag-audit-patterns
by wshobson
Conduct WCAG 2.2 accessibility audits with automated testing, manual verification, and remediation guidance. Use when auditing websites for accessibility, fixing WCAG violations, or implementing accessible design patterns.
extract
by educlopez
"Refactoring pass — extracts repeated Tailwind class combos and markup into components, and lifts magic values into design tokens. Use when the codebase has obvious duplication, hardcoded hex values or pixel sizes, or when the user says \"clean this up\" / \"extract components\" / \"tokenize styles\". Invoke when the user asks for extract on their UI, or mentions 'extract' alongside design / UI / frontend work."
start
by educlopez
"Front door. Reads the current project (framework, tokens, brief, spec, harness) and reports what ui-craft can do right now, then routes you to the right next step. Run this first if you're new or unsure where to begin. No code changes. Invoke when the user asks for start on their UI, or mentions 'start' alongside design / UI / frontend work."
tokens
by educlopez
"Audit or establish the project's 3-layer token spine. Invoke when the user asks for tokens on their UI, or mentions 'tokens' alongside design / UI / frontend work."
remember
by educlopez
"Record a learned design constraint from a correction into the project brief. Invoke when the user asks for remember on their UI, or mentions 'remember' alongside design / UI / frontend work."
distill
by educlopez
"Reduction pass — cuts content, structure, visuals, and dead code that doesn't answer a user question or drive an action, respecting CRAFT_LEVEL. Use when the UI feels cluttered, has too many CTAs, walls of text, or decorative noise, or when the user says \"simplify this\" / \"it feels too busy\". Invoke when the user asks for distill on their UI, or mentions 'distill' alongside design / UI / frontend work."
pyvene-interventions
by majiayu000
Provides guidance for performing causal interventions on PyTorch models using pyvene's declarative intervention framework. Use when conducting causal tracing, activation patching, interchange intervention training, or testing causal hypotheses about model behavior.
blog-chart
by AgriciDaniel
Generate dark-mode-compatible inline SVG data visualization charts for blog posts. Supports horizontal bar, grouped bar, donut, line, lollipop, area, and radar charts with automatic platform detection (HTML vs JSX/MDX). Enforces chart type diversity, accessible markup (role=img, aria-label), source attribution, and transparent backgrounds. Use when user says "blog chart", "generate chart", "data visualization", "svg chart", "blog graph", "visualize data", or when the blog-write workflow identifies chart-worthy data points (3+ comparable metrics, trends, before/after data).
workflow-orchestration-patterns
by wshobson
Design durable workflows with Temporal for distributed systems. Covers workflow vs activity separation, saga patterns, state management, and determinism constraints. Use when building long-running processes, distributed transactions, or microservice orchestration.
embed-three-ws-avatar
by nirholas
Embed a live, animated three.ws 3D avatar in any website with the <agent-3d> web component. Use when you or the user want to embed, integrate, add, or show a 3D avatar, character, or agent on a site or app ("embed a 3D avatar on my site", "add an animated character to my landing page", "integrate three.ws", "put an avatar in my hero section"), wire avatar animations or moods from page code, let users design an avatar in the three.ws Avatar Studio from inside another app, or debug an existing agent-3d embed.
Launch Checklist
by product-on-purpose
A curated collection of 24 best-practice, plug-and-play product management “agent skills” plus templates and workflow bundles for consistent, professional PM outputs.
redesign
by superset-sh
Critique and improve the visual design of an existing UI component with concrete implementation guidance. Use when the user asks to redesign, restyle, reimagine, polish, or improve a component, screen, or interface, especially in React and Tailwind codebases.