Ui Designer Skill
by belokonm · development · go, bash, react, testing, skill
Use when user needs visual UI design, interface creation, component systems, design systems, interaction patterns, or accessibility-focused user interfaces.
Source: https://github.com/belokonm/claude-supercode-skills
Install
git clone https://github.com/belokonm/claude-supercode-skillsTags: go, bash, react, testing, skill
⭐ 3 GitHub stars · Source: skillsdirectory
About development MCP servers and Claude skills
development MCP servers extend what AI agents can do inside Claude Code, Cursor, Copilot, Codex, and Windsurf. The Skiln directory indexes 16,000+ such integrations across 22 categories.
Ui Designer Skill is one of hundreds of development entries indexed on Skiln. Browse the full development category or the complete directory of Claude skills, MCP servers, agents, commands, and hooks.
Related development MCPs and skills
- Intake Triage by ThomasMoreAI
Classify an incoming legal-work request and route it to the right team.
- Clean Code Reviewer by hylarucoder
Produces a severity-rated (高/中/低) Clean Code findings report across 7 dimensions (naming, function size/SRP, duplication/DRY, over-engineering/YAGNI, magic numbers, structural clarity, project conventions), each with a location and a behavior-preserving refactor suggestion — never changing functionality. Use whenever the user asks for a code review, quality check, refactor advice, or code-smell / Clean Code analysis, OR points at a file/function/diff and asks if it is well-written, too long, ...
- Create Visual Card by hylarucoder
Generate a magazine-quality visual card as a single self-contained HTML file (embedded CSS, Swiss-grid + bold-type design system), then screenshot it to a shareable PNG and hand back both files. Use this whenever the user wants content turned into a visually rich card or shareable image — even if they don't say the word "card." Triggers: make/create/generate/design a visual card, info card, knowledge card, quote card, social card, summary/takeaway/cheatsheet card; 信息卡, 知识卡片, 金句卡, 语录卡, 做张卡片, 设...
- Geju by hylarucoder
Produces a bold, high-altitude direction judgment (格局判断): a sharp thesis on the right target model, a kill-list of what to delete / merge / split / reframe, a Conservative-vs-Clean-vs-Staged options table, and a verification path (first proof point + falsifier) that keeps the bold call testable. Use whenever the user wants to think bigger, open the design space, or challenge a conservative / incremental / over-compatible proposal — proactively, even when unnamed. Triggers: 打开格局, 格局太小, 你格局小了, ...
- Hai Visual Report by hylarucoder
Generates a complete, self-contained multi-section HTML report — header + one-line verdict, Mermaid structure map, decision matrix, risk/proof table, and next-move block — from an idea, requirement, PRD, goal, review, architecture topic, plan, or proposal, and returns the generated file path. Use whenever the user wants content turned into a visual report, visualized page, HTML report, webpage version, dashboard, or slides/PPT-like web artifact — and trigger even on casual phrasings: 可视化一下, 做...
- React Component Diagnosis by hylarucoder
深度诊断单个 React 组件的架构设计质量,产出一份结构化体检报告:7 维度评分卡(使用者 API、数据流、可测试性、可扩展性、性能、心智模型、边界契约,每维 1-5 分 + 代码证据)、设计亮点、按 P0/P1/P2 分级且标注工作量的改进建议——所有评分基于逐行读代码后发现的具体问题(useMemo 依赖、useEffect cleanup、类型断言、每帧重复计算等),而非扫一眼目录得出的表面评价。当用户请求组件诊断、组件设计审查、架构分析、组件体检、组件 API/props 设计评估时使用,即使没说出"诊断"二字也应主动触发:用户指向一个组件目录或 .tsx 文件问"这个组件设计得怎么样"、"帮我看看这个组件"、"这个写得怎么样"、"是否需要重构"、"为什么每次都 re-render"、"useEffect 写对了吗"、"props 设计合理吗",或用英文说 "review this React component"、"is this component well designed"、"audit this component"、"should I refactor th...
- Ai Sdk Handler by majiayu000
Integrate Vercel AI SDK for LLMs, Chatbots, Generative UI, and Agentic Workflows.
- Aif Grounded by majiayu000
Reliability gate for answers. Forces evidence-based reasoning, explicit uncertainty, and “insufficient information” instead of guesses. Use when user says “be 100% sure”, “no hallucinations”, “only if verified”, “grounded answer”, or when stakes are high.
Frequently asked questions
How do I install Ui Designer Skill?
Add the install command above to your Claude Code, Cursor, or Windsurf MCP configuration. Most servers register via npx, a local command, or a Docker image. Refer to the source repository for environment variables and credential requirements.
Which clients support Ui Designer Skill?
Any MCP-compatible client works: Claude Desktop, Claude Code CLI, Cursor, Windsurf, Zed, and VS Code with the official MCP extension. OpenAI Codex and GitHub Copilot increasingly support MCP via adapter bridges.
Is Ui Designer Skill free?
The server itself is typically open source. Any upstream service (API keys, paid tiers, hosted infrastructure) may have its own pricing. Check the source repository for details.