Remix Icon
Implement 3,100+ open-source icons with RemixIcon in web & mobile apps
What You Can Do
You can quickly integrate RemixIcon into web applications, mobile apps, and design systems to add professional, consistent iconography. The skill guides you through multiple implementation methods—webfonts, SVG, React components, and Vue—so you can choose the approach that fits your project architecture. You'll learn naming conventions, styling techniques, and best practices for maintaining visual consistency across navigation, buttons, status indicators, and custom components.
Features
Example Output
React Component Implementation:
import { RiHomeLine, RiSearchLine, RiHeartFill } from '@remixicon/react';
export function Navigation() {
return (
<nav>
<RiHomeLine size={24} className="nav-icon" />
<RiSearchLine size={24} />
<RiHeartFill size={24} color="#ff0000" />
</nav>
);
}
Webfont HTML Usage:
<button><i class="ri-arrow-right-line"></i> Next</button>
<span class="ri-check-line" style="color: green; font-size: 20px;"></span>
Vue 3 Component:
<template>
<div class="toolbar">
<RiSaveLine size="24" />
<RiDeleteBinFill size="24" color="red" />
</div>
</template>
What's Included
- SKILL.md: Complete RemixIcon implementation guide with installation, naming conventions, and usage patterns
- Icon Browser Checklist: Reference for common icon categories (navigation, media, status, UI controls)
- Integration Templates: Code snippets for webfont, SVG, React, and Vue 3 implementations
- Styling & Customization Framework: CSS techniques for sizing, colors, animations, and responsive behavior
- Design System Workflow: Best practices for maintaining icon consistency across projects
Who It's For
- Frontend developers building web applications and design systems
- React and Vue developers integrating component-based iconography
- UI/UX designers prototyping interfaces with consistent icon sets
- Mobile app developers using icon libraries for cross-platform consistency
- Product teams establishing visual design standards and component libraries
Best For
- Adding icons to navigation menus, toolbars, and button components
- Building reusable icon systems within design frameworks
- Creating status indicators, alerts, and interactive UI feedback
- Prototyping and mockups requiring professional iconography
- Establishing bilingual or international design systems
You might also like
Optimize banquet menus for profitability while balancing food costs, guest preferences, and kitchen capacity constraints. Generate staffing deployment plans, service timelines, and station assignments that ensure smooth execution. Manage dietary requirements and preferences while maintaining kitchen efficiency and guest satisfaction.
This skill analyzes your food and beverage costs against established standards, pinpointing variances and their root causes with quantified financial impact. You get detailed variance reports, root cause analysis, and prioritized corrective actions ranked by profitability impact. It's designed for restaurant managers, food service directors, and cost analysts who need to optimize F&B spending and quickly identify where money is leaking.
You can generate production-ready web interfaces, dashboards, forms, and navigation structures grounded in actual design system best practices. This skill provides access to 60+ documented UI component patterns sourced from industry standards, ensuring your designs follow modern conventions for restraint, typography hierarchy, color strategy, and spacing. Every interface Claude generates will feel polished and professional—not templated.
Upload your food and beverage cost data and receive comprehensive variance analysis, trend identification, and actionable cost reduction recommendations. The skill automatically categorizes expenses, compares actual vs. budgeted costs, and generates clear reports highlighting areas of concern and opportunity. You get variance percentages, trends across periods, and specific remediation strategies all in one structured output.
You can rapidly build user interfaces by leveraging pre-built, fully accessible React components that you own and control. Claude helps you select the right shadcn/ui components for your needs, customize them with Tailwind CSS, implement complex patterns like forms with validation, data tables, and charts, and integrate them seamlessly into Next.js, Vite, Remix, or Astro projects.
You can systematically evaluate your design system's health using structured frameworks that assess component consistency, design token usage, documentation completeness, and developer adoption. The skill generates prioritized gap analysis reports that quantify issues—like duplicate components, token sprawl, or implementation friction—and translates findings into executive-ready roadmaps with business cases for remediation. You'll move beyond subjective design assessments to data-backed improvement strategies.
by calesthio
Design production-ready UI components that serve as foundations for scalable design systems. You define clear component APIs, TypeScript/JSDoc prop interfaces, comprehensive variant systems (states, sizes, themes, interactions), and full accessibility markup including ARIA labels and semantic HTML. Claude generates complete Storybook stories and documentation to enable seamless developer handoff and cross-team component consumption.
by az9713
You can comprehensively evaluate healthcare datasets for open data readiness, generating detailed assessment reports with actionable remediation steps. Claude analyzes data quality, metadata completeness, privacy compliance, and accessibility standards, then produces structured documentation that meets FAIR principles and healthcare governance requirements. You'll accelerate your open data initiatives by automating compliance checks and creating publication-ready documentation in minutes.