frontend-builderGenerates production-ready React TSX frontend components from natural-language UI goals for non-programmers, including setup instructions and dependencies.
Install via ClawdBot CLI:
clawdbot install h4gen/frontend-builderGrade Fair — based on market validation, documentation quality, package completeness, maintenance status, and authenticity signals.
Calls external URL not in known-safe list
https://clawhub.aiAudited Apr 17, 2026 · audit v1.0
Generated Mar 21, 2026
A startup founder needs a real-time analytics dashboard to monitor user engagement and revenue metrics. The skill generates a responsive dashboard with charts, tables, and cards, using shadcn-ui components and mock data, ready for integration with backend APIs.
An e-commerce manager requires an admin interface to manage orders, inventory, and customer data. The skill produces a compact, dark-themed panel with tabs, forms, and tables, including setup commands for shadcn-ui components like sheet and badge.
A healthcare provider needs a landing page to display patient metrics and treatment outcomes with interactive charts. The skill outputs a balanced-layout component using recharts for visualizations, with accessibility features and TypeScript types for data safety.
A marketing team wants a high-conversion landing page for a new product launch, with strong visual elements and mobile responsiveness. The skill coordinates design aesthetics from frontend-design-ultimate and shadcn-ui primitives to create a single TSX file with theme toggle support.
An edtech company needs an admin screen for course management and student progress tracking. The skill generates a spacious layout with cards, badges, and tables, including assumptions for default inputs like light theme and generic React framework.
Freelancers use this skill to quickly prototype client UIs based on natural-language requirements, reducing development time and allowing focus on backend integration. Revenue comes from project-based fees or hourly rates for customization.
Digital agencies integrate the skill into their workflow to deliver production-ready frontend components for multiple clients, streamlining design-to-code processes. Revenue is generated through retainer contracts or packaged service deals.
SaaS companies embed this skill as a feature to allow non-technical users to build custom dashboards or interfaces within their platform, driving user engagement and upsells. Revenue sources include subscription tiers and premium add-ons.
💬 Integration Tip
Ensure Node.js 18+ and npm are installed locally, and run the provided setup commands to install required skills and shadcn-ui components before copying the generated TSX file into a React project.
Scored Apr 19, 2026
Connect to 100+ APIs (Google Workspace, Microsoft 365, GitHub, Notion, Slack, Airtable, HubSpot, etc.) with managed OAuth. Use this skill when users want to...
Fetch and read transcripts from YouTube videos. Use when you need to summarize a video, answer questions about its content, or extract information from it.
Skill 查找器 | Skill Finder. 帮助发现和安装 ClawHub Skills | Discover and install ClawHub Skills. 回答'有什么技能可以X'、'找一个技能' | Answers 'what skill can X', 'find a skill'. 触发...
Query, design, migrate, and optimize SQL databases. Use when working with SQLite, PostgreSQL, or MySQL — schema design, writing queries, creating migrations, indexing, backup/restore, and debugging slow queries. No ORMs required.
Extract text from PDFs with OCR support. Perfect for digitizing documents, processing invoices, or analyzing content. Zero dependencies required.
Complete toolkit for programmatic video creation with Remotion + React. Covers animations, timing, rendering (CLI/Node.js/Lambda/Cloud Run), captions, 3D, charts, text effects, transitions, and media handling. Use when writing Remotion code, building video generation pipelines, or creating data-driven video templates.