How do I trigger the UI skill in Claude Code?

The skill activates when you mention keywords like 'component', 'UI', 'hero', 'form', or 'feedback' in your instructions to Claude.

What types of UI elements can this skill create?

This skill specializes in generating modular UI components, including hero sections, layouts, and various types of feedback or inquiry forms.

Can this skill be used for authentication features?

No, the UI skill is specifically instructed not to load for authentication functions, database operations, or complex backend logic.

Does this skill handle backend database integration?

No, this skill is focused strictly on the presentation layer and explicitly excludes backend implementation, database operations, and business logic.

Frontend UI & Component Generator

Name: Frontend UI & Component Generator
Author: Chachamaru127

byChachamaru127

•

デザインツール

Generates production-ready UI components and interactive feedback forms to accelerate frontend development workflows.

The UI skill for Claude Code acts as a specialized frontend architect, enabling the autonomous generation of modular user interface elements and complex inquiry forms. By leveraging a structured Plan-Work-Review cycle, it interprets design requirements to create high-quality hero sections, feedback modules, and UI components while maintaining a strict boundary that excludes backend logic and database operations, ensuring a clean separation of concerns in your codebase.

主な機能

01Automated UI component generation for hero sections and landing pages

02Streamlined creation of interactive feedback and inquiry forms

03Domain-specific routing for specialized frontend sub-tasks

04Strict architectural enforcement to separate UI from business logic

05Seamless integration with file system tools for direct code implementation

064 GitHub stars

ユースケース

01Scaffolding frontend presentation layers based on user requirements

02Building standardized contact and feedback forms for web applications

03Rapidly prototyping website hero sections and visual components

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add chachamaru127/claude-code-harness ui

For use in Claude.ai and ChatGPT

Download Skill