Logo
ClawHub Skills Lib
HomeCategoriesUse CasesTrendingStatisticsBlog
HomeCategoriesUse CasesTrendingStatisticsBlog
ClawHub Skills Lib
ClawHub Skills Lib

Browse 50.000+ community-built AI agent skills for OpenClaw. Updated daily from clawhub.ai.

Explore

  • Home
  • Categories
  • Use Cases
  • Trending
  • Blog

Categories

  • Development
  • AI & Agents
  • Productivity
  • Communication
  • Data & Research
  • Business
  • Platforms
  • Lifestyle
  • Education
  • Design

Use Cases

  • AI Code Generation
  • Code Review & Testing
  • DevOps & Cloud
  • Security & Compliance
  • Build an AI Agent
  • Agent Memory & RAG
  • Multi-Agent Orchestration
  • Browser & Web Automation
  • Financial & Market Data
  • Crypto & Web3
  • Real-Time Web Search
  • News & Media Monitoring
  • Academic Research
  • Data & Analytics
  • AI Image Generation
  • Voice & Audio AI
  • AI Video Creation
  • Content Writing
  • Task & Project Management
  • Knowledge Management
  • Email & Messaging
  • SEO & Content Marketing
  • Sales & CRM
  • Workflow Automation
  • Social Media
  • Chinese Platforms
  • E-Commerce
  • Education & Tutoring
  • HR & Recruiting
  • Legal & Compliance
  • AI Code Generation
  • Code Review & Testing
  • DevOps & Cloud
  • Security & Compliance
  • Build an AI Agent
  • Agent Memory & RAG
  • Multi-Agent Orchestration
  • Browser & Web Automation
  • Financial & Market Data
  • Crypto & Web3
  • Real-Time Web Search
  • News & Media Monitoring
  • Academic Research
  • Data & Analytics
  • AI Image Generation
  • Voice & Audio AI
  • AI Video Creation
  • Content Writing
  • Task & Project Management
  • See all use cases →
  • AI Code Generation
  • Code Review & Testing
  • DevOps & Cloud
  • Security & Compliance
  • Build an AI Agent
  • Agent Memory & RAG
  • Multi-Agent Orchestration
  • Browser & Web Automation
  • Financial & Market Data
  • See all use cases →
© 2026 ClawHub Skills Lib. All rights reserved.Built with Next.js · Neon · Prisma
Home/Use Cases/⚡ AI Code Generation/🖥️ Frontend & UI

🖥️ Frontend & UI AI Skills

Generate React, Vue, and other frontend components, styles, and page layouts from descriptions.

1,524 skillsPart of ⚡ AI Code Generation
Lang:

1,524 skills found

Page 1 of 64

🤖Coding Agents & IDEs

Critical Code Reviewer

critical-code-reviewer
ziad-hsn
v0.1.0
View Details

Conduct rigorous, adversarial code reviews with zero tolerance for mediocrity. Use when users ask to "critically review" my code or a PR, "critique my code", "find issues in my code", or "what's wrong with this code". Identifies security holes, lazy patterns, edge case failures, and bad practices across Python, R, JavaScript/TypeScript, SQL, and front-end code. Scrutinizes error handling, type safety, performance, accessibility, and code quality. Provides structured feedback with severity tiers (Blocking, Required, Suggestions) and specific, actionable recommendations.

211
6.2k
3
8mo ago
🌐Web & Frontend

Shadcn Ui

shadcn-ui
jgarrison929
v1.0.0
View Details

Use when building UI with shadcn/ui components, Tailwind CSS layouts, form patterns with react-hook-form and zod, theming, dark mode, sidebar layouts, mobile navigation, or any shadcn component question.

67
8.6k
8
8mo ago
🤖Coding Agents & IDEs

Qwen

qwen
ivangdavila
v1.0.0
View Details

Build and route Qwen chat, coding, reasoning, and vision workflows across hosted and self-hosted endpoints with safer debugging.

39
1.1k
1
5mo ago
🌐Web & Frontend

Tailwind

tailwind
xueyetianya
v1.0.0
View Details

Tailwind reference tool. Use when working with tailwind in frontend contexts.

36
965
5mo ago
🤖Coding Agents & IDEs

CodeGraph

codegraph
sg345662365-oss
v1.0.0
View Details

Build and query AST summaries + call graphs for codebases. Use when exploring a project's structure, finding function definitions, tracing call chains, under...

8
815
4mo ago
🤖Coding Agents & IDEs

Db Explorer

db-explorer
bytesagain1
v2.0.4
View Details

Reference tool for devtools — covers intro, quickstart, patterns and more. Quick lookup for Db Explorer concepts, best practices, and implementation patterns.

2
467
5mo ago
🌐Web & Frontend

test

vibepolish-202610
shenfang055-gif
v1.0.0
View Details

Use when opening a single-file HTML demo or unbundled static HTML/CSS/JS project in VibePolish, with a connected CDP style provider for WYSIWYG editing and export.

1
103
10d ago
🌐Web & Frontend

Clone a website section to code

clone-section
soraiabarroso
v1.0.0
View Details

Rebuild any section of a live site as Tailwind, React, Vue or HTML

+1
1
92
9d ago
🤖Coding Agents & IDEs

build-game-plus

build-game-plus
paradoxfuzzle
v0.1.0
View Details

Build playable browser games (2D canvas or 3D Three.js) from natural language, with an automated screenshot verification loop the agent runs before claiming the game works — no unverifiable "should look fine" claims. Persists games in a stable workspace (games/<slug>/, not /tmp), iterates via targeted edits, publishes to https://jerithai.com/games/<slug>/ via the existing nginx + Cloudflare tunnel. Reuses the full 3D pattern library from the original build-game skill and adds 2D canvas, genre-appropriate engine choice, and verify-before-deliver as a hard gate.

1
124
12d ago
🌐Web & Frontend

Vue3全家桶 Antd

vue3-antd-commons-skill
li-4568
v1.0.1
View Details

Vue3全家桶+Ant Design+publish-commons开发技能总结,包含核心特性、TypeScript集成、主题定制、网络请求等内容

0
942
5mo ago
🌐Web & Frontend

Frontend Design Pro — 专业前端设计规范

frontend-design-pro
antonia-sz
v1.0.0
View Details

前端设计质量提升 skill。让 AI 生成的 UI/前端代码更专业,避免常见设计反模式。 参考 impeccable 项目的设计语言规范,提供 audit/polish/critique 等设计审查命令。 触发词:/audit /polish /critique /colorize /animate /bold...

+2
0
10.1k
13
5mo ago
🤖Coding Agents & IDEs

Lobster Context Budget

lobster-context-budget
wangxiaofei860208-source
v1.0.0
View Details

Audits Claude Code context window consumption across agents, skills, MCP servers, and rules. Identifies bloat, redundant components, and produces prioritized...

0
745
5mo ago
🤖Coding Agents & IDEs

Craftwork

craftwork
gaurangbhattspaceo
v1.0.0
View Details

9 engineering disciplines for AI agents — TDD, debugging, code review, planning, and multi-agent coordination. Build software like it matters.

0
1k
5mo ago
🤖Coding Agents & IDEs

Low-Visibility Fix

low-visibility-fix
vincentjiang06
v0.1.0
View Details

Audit existing mobile UI (WeChat mini-program / H5 / app) for FIELD low-visibility conditions — low light, glare, gloves, wet hands, vibration — and emit a s...

0
485
4mo ago
🤖Coding Agents & IDEs

golang-testing

golang-testing
samber
v1.3.0
View Details

Production-ready Golang tests — table-driven tests, testify suites and mocks, parallel tests, fuzzing, fixtures, goroutine leak detection with goleak, snapshot testing, code coverage, integration tests, idiomatic test naming. Use when writing or reviewing Go tests, choosing a testing approach, setting up Go test CI, or debugging flaky/slow tests. For testify-specific APIs see `samber/cc-skills-golang@golang-stretchr-testify`; for measurement methodology see `samber/cc-skills-golang@golang-benchmark`.

0
1.7k
2mo ago
🤖Coding Agents & IDEs

Initialize Project Structure

init-project-structure
adelvillar1
v1.0.0
View Details

Use when starting a new project from scratch and the user wants the full plan/build/recap/document workflow scaffolded. Creates slim CLAUDE.md, gitignored CL...

+3
0
660
5mo ago
🤖Coding Agents & IDEs

SuperDev

super-dev-skills
weedfire
v1.0.1
View Details

全栈开发套件,集需求深访、TDD、感官级UI/UX审计、供应链安全门禁与记忆自进化于一体,确保安全高质交付。

0
756
1
5mo ago
🤖Coding Agents & IDEs

System Architect

afrexai-system-architect
v1.0.0
View Details

Principal-level system architect guiding structured requirements capture, pattern selection, layered design, data architecture, and API standards for scalabl...

+1
0
643
8mo ago
🤖Coding Agents & IDEs

aws-compute

aws-compute
aws
View Details

Provisions, scales, and operates Amazon EC2 virtual-machine workloads: instance-type selection (Graviton/Arm64, burstable T credits, GPU, instance store vs EBS), launch templates, Auto Scaling groups (scaling policies, instance refresh, mixed instances, Spot, warm pools, lifecycle hooks), IMDSv2, placement groups, Elastic IPs, AMI lifecycle, and Systems Manager fleet operations (Session Manager, Run Command, Patch Manager). Applies to EC2 instance and fleet questions, InsufficientInstanceCapacity, CPU-credit/surplus charges, IMDSv2 401s, instances stuck in Pending:Wait, ASG not replacing unhealthy instances, status-check failures, SSH refused/timed out, or instances missing as SSM managed nodes. For a single secure instance launch, the launching-ec2-instance-with-best-practices skill is more appropriate; for instance profiles, see setting-up-ec2-instance-profiles; for Image Builder, see creating-ec2-image-builder-pipeline. Does NOT cover Lambda, ECS/Fargate, EKS, VPC/ALB/NLB design, or IAM policy authoring.

0
589
3mo ago
🌐Web & Frontend

Site Cloner

site-cloner
michelle447
v1.0.0
View Details

Clone any live website into a self-contained, dependency-free HTML file with all content, styles, fonts, and images extracted and preserved. Use when asked t...

+1
0
793
5mo ago
🤖Coding Agents & IDEs

Coding Agent (Claude Print + PTY Rules)

coding-agent-claude-print
danielsinewe
v0.1.0
View Details

Delegate coding tasks to Codex, Claude Code, or Pi agents via background process. Use when: (1) building/creating new features or apps, (2) reviewing PRs (sp...

+3
0
785
5mo ago
🌐Web & Frontend

HarnessFE

harness-fe
paul-leo
v1.0.0
View Details

Debug, inspect, and drive any frontend app that has the Harness-FE Vite/Webpack plugin installed. Use this when the user reports a UI bug, asks "why is this...

0
680
1
4mo ago
🌐Web & Frontend

Implement From Design

fec-implement-from-design
bovinphang
v2.9.0
View Details

Use when implementing UI from Figma, Sketch, MasterGo, Pixso, Modao, MockingBot, screenshots, design selections, design tokens, or design-to-code tasks for production frontend components/pages; Chinese triggers include design draft, implementation by design.

0
761
27d ago
🤖Coding Agents & IDEs

Software Concept Architect · Build — Turn Models into Independent Modules

software-concept-architect-build
agenticweb4
v1.1.0
View Details

Turn Models into Independent Modules

0
538
16d ago
…

Other ⚡ AI Code Generation Phases

🏗️
Project Scaffolding
Generate complete project structures, starter templates, and boilerplate from plain descriptions.
⚡
Autocomplete & Inline
Complete functions in context, generate docstrings, and convert pseudocode to working implementations.
🔄
Refactoring
Refactor legacy code, apply design patterns, migrate APIs, and improve code structure.