add-rokt-icons

Register Rokt/Untitled UI icons into the Aquarium library.

7|Updated Dec 5, 2023
One-click install
npx skills add https://github.com/mParticle/aquarium --skill add-rokt-icons
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: add-rokt-icons
Source: https://github.com/mParticle/aquarium/tree/main/.claude/skills/add-rokt-icons
Command: npx skills add https://github.com/mParticle/aquarium --skill add-rokt-icons

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Icon gaps hinder design-to-development workflows, making it slow to find and consistently use icons across the Aquarium library.

Core Features & Use Cases

  • Input handling: Accepts Figma URLs, direct icon names, or screenshots to determine required icons.
  • Pre-flight checks and registration: Verifies icons exist in @untitledui/icons, updates code and docs across the repository, and adheres to the Rokt naming conventions.
  • Documentation and usage: Generates updated docs so designers and developers can reference the new icons quickly.

Quick Start

Provide the icon sources (Figma URL, direct names, or a screenshot) and I will register the corresponding Rokt icons in Aquarium.

Frequently Asked Questions about add-rokt-icons

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I register Figma icons into a design system codebase?

To register Figma icons into a design system codebase, you provide Figma URLs, direct names, or screenshots to identify required icons and automatically update repository files and documentation with the correct naming conventions.

Can I add Rokt icons to my component library using a screenshot?

Yes, you can add Rokt icons using a screenshot as input. The workflow detects the required icons from the image and registers them into the Aquarium library with the appropriate Rokt prefix.

How do I ensure new icons exist in the @untitledui/icons package before adding them?

To ensure new icons exist in the @untitledui/icons package, the registration workflow performs pre-flight checks to verify icon availability before updating your code and documentation files.

What files need to be updated to integrate new design system icons into a codebase?

Integrating new design system icons requires updating three repository files: src/components/icons/index.ts, src/components/index.ts, and the corresponding MDX documentation file for consistent code and docs.

Does registering Rokt icons in Aquarium include build and TypeScript validation?

Yes, registering Rokt icons in Aquarium includes build and TypeScript validations. The workflow performs these checks after updating repository files to ensure the icons integrate without code errors.

Why do my design system icons need a Rokt prefix in the Aquarium library?

Design system icons need a Rokt prefix in the Aquarium library to adhere to specific naming conventions, ensuring consistent icon usage across components and accurate documentation references for developers.