菜单
Generates Mermaid, Excalidraw JSON, or DBML diagrams. Use when the user asks to "diagram X", "draw the architecture", "generate an ER diagram", "create a sequence diagram", or invokes /sdd:diagram. Accepts a free-text description with `--format` and `--save` flags.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Generates a complete, production-ready UI from a natural-language prompt — React + Tailwind, grounded in all 8 UIX reference books + WCAG 2.2, ROIN baseline always on. Asks 4 targeted questions then writes a self-contained .tsx file and compiles it to a browser-openable preview.html. Auto-activates on "design a [X] from scratch", "build me a UI for [X]", "create a full [X] page", "generate a UI for [X]", or /uix:generate-design.
This skill should be used when the user asks to "analyze this file", "check this code", "scan for violations", "find clean code issues", "review code quality", "check file length", "audit this project", "what's wrong with this code", or when a file looks messy or overly long. Scans files for clean code violations and outputs a grouped report of critical issues, warnings, and style suggestions.
This skill should be used when the user asks to "refactor this file", "clean up this code", "extract this function", "break this function apart", "pull this out into a method", "simplify this switch", "turn this into a table", "inline this", "replace magic number", or mentions a specific refactoring by name. Applies one named, surgical refactoring from the textbook catalog (Extract Method, Table-Driven, Replace Conditional with Polymorphism, etc.) and shows exactly what changed.
This skill should be used when the user asks to "clean my code", "make it human readable", "make this readable", "rewrite this cleanly", "refactor this", "clean up this function", "simplify this code", "make this code better", "fix code quality", "clean this file", "this code is messy", "improve this code", or when code has visible violations like long functions, deep nesting, poor names, or missing interfaces. Produces a clean version preserving all behavior, with reasoning for each change.
This skill should be used when the user asks to "check error handling", "find silent failures", "fix silent errors", "add input checks", "fail fast", "make this safer", "check for hidden errors", "defensive programming", or mentions empty catch blocks, swallowed exceptions, or missing validation. Detects and optionally fixes Rule 12 violations — silent error swallowing and missing guard clauses.
This skill should be used when the user asks to "suggest a better structure", "apply a design pattern", "this switch is too big", "simplify this class", "apply strategy pattern", "apply command pattern", "apply factory pattern", "fix this structure", "replace switch with polymorphism", or mentions restructuring a class or giant switch statement. Detects and optionally applies well-known design patterns (Strategy, Command, Factory, State) from OOP vs. Functional Programming.
| name | diagram |
| description | Generates Mermaid, Excalidraw JSON, or DBML diagrams. Use when the user asks to "diagram X", "draw the architecture", "generate an ER diagram", "create a sequence diagram", or invokes /sdd:diagram. Accepts a free-text description with `--format` and `--save` flags. |
| argument-hint | <description> [--format=mermaid|excalidraw|dbml] [--save=./path.ext] |
| allowed-tools | Read, Write, Grep |
Convert a description into a syntactically valid diagram. Broken syntax is worse than no diagram.
--format=mermaid|excalidraw|dbml, --save=<path>. Default mermaid. Infer from description when possible: ER / schema → DBML, whiteboard → Excalidraw, else Mermaid.graph TD), sequence, ER, state, class, C4.references/mermaid-cheatsheet.md + examples/mermaid-c4.mdreferences/excalidraw-json-schema.md + examples/excalidraw-microservices.jsonreferences/dbml-syntax.md + examples/dbml-ecommerce.dbmlIndexes {} where they matter + Note: per tableRef: references existing tableselementId existsmermaid / json / ```dbml). Excalidraw: add "File → Open → paste." DBML: add "paste at https://dbdiagram.io."--save=<path> was given, write the file. Otherwise offer to save.