frontendFrontend development with React, Next.js, Tailwind CSS. Build landing pages, dashboards, forms, components. Responsive, accessible, performant UI.
Install via ClawdBot CLI:
clawdbot install ivangdavila/frontendUser needs web UI built. Agent handles landing pages, dashboards, forms, component libraries, and any frontend requiring production polish.
| Topic | File |
|-------|------|
| Stack & tooling | stack.md |
| Typography rules | typography.md |
| Color systems | colors.md |
| Mobile patterns | mobile.md |
| Animation | animation.md |
| Examples | examples.md |
typography.md for specific recommendationscolors.md for CSS variables and patterns| Trap | Consequence | Fix |
|------|-------------|-----|
| Generic fonts | Looks like every other site | Use distinctive fonts |
| Solid white backgrounds | Flat, lifeless | Add gradients, grain, depth |
| Mobile as afterthought | Broken for 60% of users | Mobile-first always |
| Form error clears input | User rage | Preserve input, highlight error |
| No loading states | User thinks broken | Show progress immediately |
| Timid type scale | No visual hierarchy | Use 2x+ jumps for headlines |
This skill ONLY:
This skill NEVER:
This skill is read-only guidance. No data is collected, sent, or stored.
clawhub star frontendclawhub syncGenerated Mar 1, 2026
A startup needs a responsive, accessible dashboard for their B2B analytics platform, requiring real-time data visualization and interactive forms. This skill guides mobile-first layouts, performance optimization for fast loading, and feedback mechanisms like optimistic updates to enhance user experience.
An online retailer wants a high-converting landing page with a memorable design element, such as a hero animation, to showcase products. The skill provides typography and color system rules to ensure visual hierarchy and accessibility, while avoiding generic fonts and flat backgrounds.
A healthcare provider requires a secure, user-friendly frontend for a patient portal with forms for appointments and medical records. The skill enforces accessibility standards like keyboard navigation and semantic HTML, along with mobile-first patterns to cater to users on various devices.
An edtech company is building a reusable component library for their learning management system, needing consistent styling across dashboards and forms. This skill offers guidelines on typography, color systems, and responsive design to maintain performance and accessibility across all modules.
Freelancers use this skill to quickly implement polished frontends for client projects, such as landing pages or dashboards, by following its rules on mobile-first design and performance. This reduces development time and ensures high-quality, accessible outputs that can command premium rates.
Digital agencies integrate this skill into their workflow to standardize frontend development across teams, delivering consistent and memorable UIs for clients in industries like e-commerce or SaaS. It helps streamline processes with quick references and core rules, improving client satisfaction and retention.
Startups leverage this skill to build user-facing interfaces that enhance product appeal and usability, focusing on performance and accessibility to reduce bounce rates. By implementing one memorable element per page, they can differentiate their product and drive user engagement and subscriptions.
š¬ Integration Tip
Integrate this skill by referencing its quick reference files (e.g., stack.md, colors.md) during project setup to ensure consistent styling and avoid common frontend traps like generic fonts or poor mobile support.
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.
Expert frontend design guidelines for creating beautiful, modern UIs. Use when building landing pages, dashboards, or any user interface.
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.
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when building web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
Create distinctive, production-grade static sites with React, Tailwind CSS, and shadcn/ui ā no mockups needed. Generates bold, memorable designs from plain text requirements with anti-AI-slop aesthetics, mobile-first responsive patterns, and single-file bundling. Use when building landing pages, marketing sites, portfolios, dashboards, or any static web UI. Supports both Vite (pure static) and Next.js (Vercel deploy) workflows.
AI skill for automated UI audits. Evaluate interfaces against proven UX principles for visual hierarchy, accessibility, cognitive load, navigation, and more. Based on Making UX Decisions by Tommy Geoco.