ui-skillsOpinionated constraints for building better interfaces with agents.
Install via ClawdBot CLI:
clawdbot install CorrectRoadH/ui-skillsGrade Good — based on market validation, documentation quality, package completeness, maintenance status, and authenticity signals.
Generated Mar 1, 2026
Develop a responsive admin dashboard for a SaaS platform, ensuring accessibility with component primitives like Base UI and using Tailwind CSS for styling. Implement loading skeletons and error handling near actions, while adhering to animation constraints for performance.
Create an e-commerce product page with accessible buttons, alert dialogs for cart removal, and micro-animations using tw-animate-css. Use text-balance for headings and respect prefers-reduced-motion to enhance user experience across devices.
Design a financial dashboard displaying data tables with tabular-nums and using structural skeletons for loading states. Ensure fixed z-index scales and avoid animating layout properties to maintain performance during data updates.
Build a booking interface for healthcare appointments with accessible form components and alert dialogs for confirmations. Use h-dvh for viewport height and safe-area-inset for mobile compatibility, while limiting accent colors per view.
Develop an interactive learning platform with accessible primitives and animations only on compositor props. Use cn utility for class logic and ensure empty states have clear next actions to guide users through courses.
Offer this UI skill package as part of a subscription service for developers building enterprise dashboards, providing ongoing updates and support. Revenue is generated through monthly or annual fees from clients.
Use this skill package in a web development agency to deliver high-quality, accessible interfaces for clients in industries like e-commerce or finance. Revenue comes from project-based contracts and maintenance fees.
Leverage this package as a freelance consultant to help startups implement opinionated UI constraints, offering expertise in Tailwind CSS and accessibility. Revenue is earned through hourly rates or fixed-price engagements.
💬 Integration Tip
Integrate this skill package by first adopting Tailwind CSS and motion/react for animations, then gradually enforcing constraints like accessible primitives and performance rules in existing projects.
Scored Apr 15, 2026
Guide for creating effective skills. This skill should be used when users want to create a new skill (or update an existing skill) that extends Claude's capabilities with specialized knowledge, workflows, or tool integrations.
Use when starting any conversation - establishes how to find and use skills, requiring Skill tool invocation before ANY response including clarifying questions
Control and operate Opencode via slash commands. Use this skill to manage sessions, select models, switch agents (plan/build), and coordinate coding through Opencode.
Ship production code with AI agents through acceptance contracts, micro diffs, red green loops, and deterministic handoff checkpoints.
A comprehensive skill for using the Cursor CLI agent for various software engineering tasks (updated for 2026 features, includes tmux automation guide).
Provides a 7-step debugging protocol plus language-specific commands to systematically identify, verify, and fix software bugs across multiple environments.