设计技能

Tailwind CSS v4 principles. CSS-first configuration, container queries, modern patterns, design token architecture.

中文简介正在准备中。当前显示原文说明。

Create aesthetically beautiful interfaces following proven design principles. Use when building UI/UX, analyzing designs from inspiration sites, generating design images with ai-multimodal, implementing visual hierarchy and color theory, adding micro-interactions, or creating design documentation. Includes workflows for capturing and analyzing inspiration screenshots with chrome-devtools and ai-multimodal, iterative design image generation until aesthetic standards are met, and comprehensive design system guidance covering BEAUTIFUL (aesthetic principles), RIGHT (functionality/accessibility), SATISFYING (micro-interactions), and PEAK (storytelling) stages. Integrates with chrome-devtools, ai-multimodal, media-processing, ui-styling, and web-frameworks skills.

中文简介正在准备中。当前显示原文说明。

Translate Figma nodes into production-ready code with 1:1 visual fidelity using the Figma MCP workflow (design context, screenshots, assets, and project-convention translation). Trigger when the user provides Figma URLs or node IDs, or asks to implement designs or components that must match Figma specs. Requires a working Figma MCP server connection.

中文简介正在准备中。当前显示原文说明。

Mobile-first design thinking and decision-making for iOS and Android apps. Touch interaction, performance patterns, platform conventions. Teaches principles, not fixed values. Use when building React Native, Flutter, or native mobile apps.

中文简介正在准备中。当前显示原文说明。

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.

中文简介正在准备中。当前显示原文说明。

Architectural decision-making framework. Requirements analysis, trade-off evaluation, ADR documentation. Use when making architecture decisions or analyzing system design.

中文简介正在准备中。当前显示原文说明。

Shared vocabulary for designing deep modules. Use when the user wants to design or improve a module's interface, find deepening opportunities, decide where a seam goes, make code more testable or AI-navigable, or when another skill needs the deep-module vocabulary.

中文简介正在准备中。当前显示原文说明。

Author, review, or batch-produce SVG icon hover gestures and icon↔icon morphs (Hugeicons/Lucide/Phosphor). Use for animated icon, icon hover, per-icon gesture, icon morph, menu↔cross, stroke-dashoffset draw-on, pathLength, transform-box. Not for page transitions, Lottie, or general UI chrome motion.

中文简介正在准备中。当前显示原文说明。

Guide for managing the Agent Registry - database-backed agent configuration system. Use when asked to "configure agents", "manage skills", "set tool permissions", "create context rules", or when working with agent assignments per platform/chat. Covers dashboard UI, API endpoints, CLI commands, and MCP tools.

中文简介正在准备中。当前显示原文说明。

Visual context analyzer for AI agents. Provides screenshots, accessibility scans, DOM snapshots, and element descriptions for web pages. Use when you need to see what a web page looks like, analyze accessibility issues, inspect DOM structure, or get detailed element information. Triggers on requests like "take a screenshot", "check accessibility", "what does this page look like", "analyze the UI", "inspect this element", or any visual/UI analysis task.

中文简介正在准备中。当前显示原文说明。

Design and optimize AI agent action spaces, tool definitions, and observation formatting for higher completion rates.

中文简介正在准备中。当前显示原文说明。

Design AI agents with recommended patterns and architectures

中文简介正在准备中。当前显示原文说明。

Guidelines for designing tools and action spaces for AI agents. Use when building agent harnesses, designing tool interfaces, creating elicitation mechanisms, or optimizing agent-tool interactions. Covers progressive disclosure, tool design patterns, and lessons from Claude Code development.

中文简介正在准备中。当前显示原文说明。

Design and build AI agents for any domain. Use when users: (1) ask to "create an agent", "build an assistant", or "design an AI system" (2) want to understand agent architecture, agentic patterns, or autonomous AI (3) need help with capabilities, subagents, planning, or skill mechanisms (4) ask about Claude Code, Cursor, or similar agent internals (5) want to build agents for business, research, creative, or operational tasks Keywords: agent, assistant, autonomous, workflow, tool use, multi-step, orchestration

中文简介正在准备中。当前显示原文说明。

Interactive element picker for web pages. Opens a browser with click-to-select UI overlay. Use when you need to let users visually select DOM elements, identify element selectors, or get detailed element information interactively. Triggers on "select an element", "pick element", "let me choose", "which element", or any interactive element selection task. Integrates with agent-eyes for visual context.

中文简介正在准备中。当前显示原文说明。

Design effective AI agent systems with clear architecture, capability planning, and tool integration. Use when building agent systems, designing agent workflows, planning tool ecosystems, defining agent roles and boundaries, or architecting multi-agent systems. Covers agent patterns, agentic loops, capability design, and system composition.

中文简介正在准备中。当前显示原文说明。

Best practices for designing Claude Code agent files (.claude/agents/*.md). This skill should be used when writing or reviewing agent markdown files to ensure proper design with focused domains, correct tool access, reusable definitions, and separation of capabilities from lifecycle. Combines Anthropic's official guidance with battle-tested patterns from agent team usage.

中文简介正在准备中。当前显示原文说明。

Use when the user asks to design multi-agent systems, create agent architectures, define agent communication patterns, or build autonomous agent workflows.

中文简介正在准备中。当前显示原文说明。

Agent skill for arch-system-design - invoke with $agent-arch-system-design

中文简介正在准备中。当前显示原文说明。

Build custom AI agents in Claude Code from a user's problem statement. This skill analyzes the user's use case, asks smart clarifying questions, researches the internet for similar agents (GitHub repos, blogs, Claude Code community patterns), and then architects and builds production-ready Claude Code agents — including subagents, skills, hooks, slash commands, MCP integrations, and CLAUDE.md configuration. Use this skill whenever the user wants to create an agent, build an automation workflow, set up a Claude Code subagent, design a multi-agent system, or says things like 'build me an agent for...', 'automate this with Claude Code', 'I want a subagent that...', 'help me create a workflow', 'set up an agent pipeline', or any variation of wanting Claude Code to do something specialized. Also trigger when the user mentions agent architecture, agent SDK, agentic workflows, or task delegation in Claude Code — even if they don't use the word 'agent' explicitly.

中文简介正在准备中。当前显示原文说明。

Use when designing an autonomous agent, planning agent architecture, building a scheduled automation, or creating a Claude Code agent workflow. Triggers: 'design an agent', 'build an automation', 'agent architecture', 'automate this workflow', 'create a scheduled agent', 'shell script agent'.

中文简介正在准备中。当前显示原文说明。

Implement or update iOS SwiftUI UI from Figma designs; also use for implementation plans, token mapping, or asset export for that UI.

中文简介正在准备中。当前显示原文说明。

REQUIRED before writing code for any feature touching auth, payments, credentials, tokens, sessions, file upload, user data, untrusted input, deserialization, network endpoints, or data deletion. Scope by that surface, not the task label — a research/experimental/local-only feature with none of it doesn't need this. Invoke it, record answers inline in the design doc or PR description, then write the code. Skipping this is how auth bypass, token leakage, and delete-the-wrong-record bugs ship. If the feature touches any of those surfaces and this hasn't run, the design is incomplete — do not proceed to implementation.

中文简介正在准备中。当前显示原文说明。

Monetization and pricing strategy specialist. Use this agent to design revenue models, set price points based on value perception, and create compounding referral loops. It focuses on the "Cuan" (Revenue) aspect of the 1-Man Army pipeline.

中文简介正在准备中。当前显示原文说明。