generating-components_skill

This skill helps you generate cohesive UI components using Gemini Design, 21st.dev inspiration, and shadcn/ui with animated, accessible results.

TypeScript

2

GitHub Stars

1

Bundled Files

2 months ago

Catalog Refreshed

4 months ago

First Indexed

Readme & install

Copy the install command, review bundled files from the catalogue, and read any extended description pulled from the listing source.

Installation

Preview and clipboard use veilstrat where the catalogue uses aiagentskills.

npx veilstrat add skill fusengine/agents --skill generating-components

SKILL.md6.9 KB

Overview

This skill automates generation of UI components, forms, buttons, cards, and hero sections using AI-driven design tools and component libraries. It enforces a strict workflow that combines Gemini Design MCP, 21st.dev inspiration, and post-generation validation to produce consistent, animated, and production-ready components. The goal is fast, token-matched UI output that fits existing codebases and accessibility guidelines.

How this skill works

Before any generation, spawn three specialist agents to explore the codebase, verify component patterns, and fetch inspiration from 21st.dev. Use Gemini Design MCP to create, modify, or produce snippets of UI code rather than hand-coding components. After generation, run a validation agent and delegate to a framework expert to ensure SOLID structure, framework conventions, and integration readiness.

When to use it

Creating new UI components that must match an existing design system or tokens
Replacing or updating components with animated, accessible implementations
Prototyping hero sections, feature grids, pricing cards, or forms quickly
Generating copy-paste components from shadcn/ui or 21st.dev inspiration
Ensuring components include required Framer Motion animations and accessibility

Best practices

Always run the three-agent setup: codebase explorer, research expert, and 21st.dev inspiration agent before generation
Use Gemini Design MCP for all code output; do not hand-write UI code
Match existing design tokens and banned-font rules exactly to avoid inconsistencies
Include Framer Motion animations and hover/focus states on every component
Keep generated component files under ~100 lines and delegate to a framework expert for SOLID validation

Example use cases

Generate a glassmorphism hero section that matches the project token set and includes staggered Framer Motion animations
Create a responsive feature grid or pricing card using 21st.dev patterns and shadcn/ui building blocks
Produce form components with validation-friendly markup and accessible focus states for WCAG 2.2 compliance
Modify an existing Button component to add hover animations using Gemini modify workflow
Quickly generate a loading spinner or snippet for insertion into multiple components

FAQ

No. The workflow requires using Gemini Design for all UI generation to enforce consistency and Anti-AI-Slop rules.

What if the project uses a banned font?

Replace banned fonts (Inter, Roboto, Arial) with approved alternatives like Clash Display, Satoshi, or Syne before generating components.

When do I call a framework expert?

After Gemini generates the component, detect the framework from project files and launch the appropriate framework expert for SOLID and integration validation.