skills.rest
samura-dev
samura-devCOMMUNITY
Explore all skills by this author →
GitHub

ui-kit

Generate a self-contained HTML UI Kit from project components and design foundations.

Updated Mar 4, 2026
Search Tags:#html generation#design system#component library#frontend development#pdf export#ui kit
One-click install
npx skills add https://github.com/samura-dev/antigravity-kit --skill ui-kit
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-kit
Source: https://github.com/samura-dev/antigravity-kit/tree/main/.agent/skills/ui-kit
Command: npx skills add https://github.com/samura-dev/antigravity-kit --skill ui-kit

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires puppeteer, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill automates the creation of comprehensive and scalable UI Kits for projects, ensuring consistency and adherence to design principles.

Core Features & Use Cases

  • Automated UI Kit Generation: Creates a self-contained HTML file representing the project's UI components and foundations.
  • Two-Phase Process: Generates HTML first, allowing for operator review and edits, before proceeding to PDF generation upon explicit command.
  • Use Case: A designer or developer can quickly generate a visual reference of all buttons, input fields, color palettes, and typography used in a project, which can then be exported as a PDF for documentation or sharing.

Quick Start

Use the ui-kit skill to build the project's UI Kit.

Frequently Asked Questions about ui-kit

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

FAQPage Schema
How do I generate a UI kit from existing project components?▼

You can export the generated UI kit as a PDF document. The skill operates a two-phase process where it first generates an HTML file for operator review, and then explicitly converts that HTML to PDF upon command.

Does the PDF export feature require Puppeteer to work?▼

Yes, you can review and edit the generated UI kit. The process requires a two-phase approach where the HTML generation happens first, allowing operators to review and make edits before proceeding to PDF export.

Does the PDF export feature require Puppeteer to work?▼

Yes, the PDF export feature requires Puppeteer. The skill depends on Puppeteer to automate the conversion of the reviewed HTML UI kit file into a PDF document for sharing and design documentation purposes.

Can I edit the HTML output before exporting the component library documentation?▼

Yes, you can edit the HTML output before exporting. The skill uses a two-phase process that generates the HTML component library first, allowing for operator review and edits before proceeding to PDF generation upon explicit command.

Related Skills

Explore More Design & Creative Skills→
qazuorqazuor

frontend-design

Guide UI teams through pre-coding design foundations for typography, color, and layout.

Community
Basic
neubigneubig
3

openhands-slides

Create branded reveal.js slide decks as self-contained HTML files.

Community
Intermediate
praveenpererapraveenperera
4

tailwindplus

Catalog Tailwind Plus UI components in HTML, React, and Vue formats.

Community
Advanced
jorgeasaurusjorgeasaurus
12

ckm:design

Design logos, UI components, and visual content with Gemini AI.

Community
Advanced