building-componentsReact component building and composition best practices. Use when creating, reviewing, or refactoring React components. Covers component structure, props pat...
Install via ClawdBot CLI:
clawdbot install EaveLuo/building-componentsGrade Fair — based on market validation, documentation quality, package completeness, maintenance status, and authenticity signals.
Generated Mar 21, 2026
Startups building web applications with React can use this skill to ensure new components are modular and reusable, speeding up development and reducing technical debt. It helps teams establish consistent patterns for props and composition, which is crucial when scaling the codebase with multiple developers.
E-commerce companies can apply these guidelines when refactoring product display components, such as cards or modals, to improve maintainability and performance. By following single responsibility and composition principles, they can create flexible UI elements that adapt to different product types and promotions.
Software-as-a-Service providers can use this skill during UI redesigns to break down complex components into smaller, composable pieces. This facilitates easier updates and testing, ensuring the interface remains user-friendly and scalable as new features are added.
Online learning platforms can leverage these best practices when building interactive lesson components, such as quizzes or progress trackers. Adhering to props design and state management guidelines helps create reusable modules that integrate seamlessly across different courses and user interfaces.
Publishing companies can apply this skill when creating or reviewing article and media display components to ensure consistency and reusability. Using composition techniques allows for flexible layouts that can handle various content types, from text to embedded videos.
Companies offering subscription-based software to businesses can use this skill to build scalable React components that reduce development costs and improve product reliability. This supports recurring revenue by enabling faster feature delivery and easier maintenance for enterprise clients.
Agencies providing custom web development services can apply these guidelines to deliver high-quality, maintainable code for client projects. This enhances client satisfaction and retention by reducing long-term support costs and enabling efficient project handoffs.
Maintainers of open source React libraries can use this skill to ensure their components follow best practices, attracting more contributors and users. This can lead to revenue through sponsorships, donations, or premium support offerings based on community adoption.
💬 Integration Tip
Integrate this skill into development workflows by using it as a reference during code reviews and pairing sessions to enforce consistent component patterns across the team.
Scored Apr 19, 2026
UI/UX design intelligence and implementation guidance for building polished interfaces. Use when the user asks for UI design, UX flows, information architecture, visual style direction, design systems/tokens, component specs, copy/microcopy, accessibility, or to generate/critique/refine frontend UI (HTML/CSS/JS, React, Next.js, Vue, Svelte, Tailwind). Includes workflows for (1) generating new UI layouts and styling, (2) improving existing UI/UX, (3) producing design-system tokens and component guidelines, and (4) turning UX recommendations into concrete code changes.
Professional Figma design analysis and asset export. Use for extracting design data, exporting assets in multiple formats, auditing accessibility compliance, analyzing design systems, and generating comprehensive design documentation. Read-only analysis of Figma files with powerful export and reporting capabilities.
Complete workflow for creating distinctive design systems from scratch. Orchestrates aesthetic documentation, token architecture, components, and motion. Use when starting a new design system or refactoring an existing one. Triggers on create design system, design tokens, design system setup, visual identity, theming.
Create logos, interfaces, and visual systems with principles of hierarchy, branding, and usability.
UI design system toolkit for Senior UI Designer including design token generation, component documentation, responsive design calculations, and developer han...
Comprehensive UI design skill covering fundamentals, patterns, and anti-patterns. Layout, typography, color, spacing, accessibility, motion, and component design. Use when building any web interface, reviewing design quality, or creating distinctive UIs.