AutoAcct Component Generator

Generate typed React components with TSX, JSDoc, and export indices from design-system.json.

Updated Jan 21, 2026

Search Tags:#React #TypeScript #generate #UI components #design-system #component generator #Muji Dark

Ready to run

npx skills add https://github.com/Waytid-way/AutoAcct --skill autoacct-component-generator

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: AutoAcct Component Generator
Source: https://github.com/Waytid-way/AutoAcct/tree/main/frontend/.antigravity/skills/autoaccl-component-generator
Command: npx skills add https://github.com/Waytid-way/AutoAcct --skill autoacct-component-generator

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill automates the creation of production-ready React components that adhere to AutoAcct’s Muji Dark minimalist design system, reducing design and implementation time.

Core Features & Use Cases

Automated generation of React components that strictly follow the design tokens and styling rules defined in design-system.json.
Type-safe, well-documented components with exported indices ready for integration into a frontend project.
Use Case: A developer requests a Button or Card; the skill returns a ready-to-use TSX file, props interface, and a corresponding index export.

Quick Start

To generate a Button component, say build a Button and specify variant and size; the system will produce a TSX file with typed props, JSDoc, and Tailwind-compatible class names that align with the Muji Dark aesthetic.

Frequently Asked Questions about AutoAcct Component Generator

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

FAQPage Schema

How do I generate React UI components that automatically match a specific design system?▼

To generate React UI components that match a design system, this Skill consumes a design-system.json file and outputs ready-to-use TSX files with typed props, JSDoc, and Tailwind-compatible class names adhering to the Muji Dark aesthetic.

Can I auto-generate TypeScript React components with accessibility attributes and JSDoc?▼

Yes, you can auto-generate TypeScript React components with built-in accessibility attributes, typed props, and JSDoc documentation by specifying the component type such as a button, card, or modal.

What is the best way to enforce design system compliance when creating frontend UI components?▼

The best way to enforce design system compliance is to automate generation using a design-system.json configuration, ensuring the output TSX files and CSS utility classes avoid hard-coded values and strictly follow the defined tokens.

Does this component generator support exporting indices for React projects?▼

Yes, the component generator supports exporting indices for React projects by providing a ready-to-use TSX file alongside a corresponding index export for immediate integration into your frontend workflow.

How do I generate a type-safe Button component with Tailwind-compatible class names?▼

To generate a type-safe Button component, request it by specifying the variant and size; the system produces a TSX file with a typed props interface, JSDoc, and Tailwind-compatible class names aligned with the Muji Dark design system.

What React UI components can I create using this automated generation tool?▼

You can create production-ready React UI components including buttons, cards, modals, forms, alerts, and badges, all strictly adhering to the Muji Dark minimalist design system.