Skill

ui

Use this skill whenever the user asks to create UI components, build a hero section, design a landing page section, create feedback or contact forms, or generate front-end visual elements. Also use when the user mentions component generation, form creation, or UI scaffolding. Do NOT load for: authentication features, backend API implementation, database operations, or business logic. Generates UI components, hero sections, and feedback/contact forms with production-ready styling.

Install

npx claudepluginhub tim-hub/powerball-harness --plugin harness

Tool Access

This skill is limited to using the following tools:

ReadWriteEditBash

Preview

A group of skills responsible for generating UI components and forms.

Supporting Assets

references/component-generation.mdreferences/feedback-forms.mdreferences/frontend-design.mdreferences/ui-skills.md

SKILL.md

Similar Skills

using-git-worktrees

Creates isolated Git worktrees for feature branches with prioritized directory selection, gitignore safety checks, auto project setup for Node/Python/Rust/Go, and baseline verification.

superpowers

169.2k

subagent-driven-development

3 files

Executes implementation plans in current session by dispatching fresh subagents per independent task, with two-stage reviews: spec compliance then code quality.

superpowers

169.2k

dispatching-parallel-agents

Dispatches parallel agents to independently tackle 2+ tasks like separate test failures or subsystems without shared state or dependencies.

superpowers

169.2k

Stats

Stars1

Forks0

Last CommitApr 11, 2026

Actions

View Source View Plugin View on GitHub View README

UI Skills

A group of skills responsible for generating UI components and forms.

Constraint Priority and Application Conditions

By default, apply constraints from ${CLAUDE_SKILL_DIR}/references/ui-skills.md with highest priority.
Apply ${CLAUDE_SKILL_DIR}/references/frontend-design.md only when "edgy/unique/expressive/brand-enhancing" styles are explicitly requested.
UI Skills MUST/NEVER rules are maintained by default. However, the following exceptions are permitted only when explicitly requested by the user:
- Gradients, glows, heavy decorations
- Animations (additions/enhancements)
- Custom easing

Feature Details

Feature	Details
Constraint set	See references/ui-skills.md / references/frontend-design.md
Component generation	See references/component-generation.md
Feedback forms	See references/feedback-forms.md

Execution Steps

Apply constraint set (following priority order)
Quality gate (Step 0)
Classify the user's request
Read the appropriate reference file from "Feature Details" above
Generate according to its content

Step 0: Quality Gate (a11y Checklist)

Ensure accessibility when generating UI components:

♿ Accessibility Checklist

Generated UI should meet the following:

### Required Items
- [ ] Set alt attributes on images
- [ ] Associate labels with form elements
- [ ] Keyboard navigable (Tab for focus movement)
- [ ] Focus state is visually distinguishable

### Recommended Items
- [ ] Do not rely on color alone for conveying information
- [ ] Contrast ratio 4.5:1 or higher (text)
- [ ] Appropriate use of aria-label / aria-describedby
- [ ] Heading structure (h1 -> h2 -> h3) is logical

### Interactive Elements
- [ ] Appropriate labels on buttons ("View product details" instead of "Details")
- [ ] Focus trap for modals/dialogs
- [ ] Error messages are read by screen readers

For VibeCoders

♿ Making Designs Accessible to Everyone

1. **Add descriptions to images**
   - Instead of "product image", use "red sneakers, front view"

2. **Make clickable areas keyboard-navigable too**
   - Navigate with Tab key, confirm with Enter

3. **Don't rely on color alone for judgment**
   - Not just red=error, but also icon+text