Generates accessible, compliant UI components and front-end elements.
Install
mkdir -p .claude/skills/ui-tim-hub && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/11916" && unzip -o skill.zip -d .claude/skills/ui-tim-hub && rm skill.zipInstalls to .claude/skills/ui-tim-hub
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Builds UI components, landing page sections, hero sections, and contact forms. Use when creating front-end visual elements.Key capabilities
- →Generate UI components
- →Generate hero sections
- →Generate landing page sections
- →Generate contact forms
- →Apply accessibility rules
- →Apply design constraints
How it works
The skill applies constraints from ui-skills.md by default, and frontend-design.md when 'edgy/unique/expressive/brand-enhancing' styles are explicitly requested. It then classifies the user's request, reads the appropriate reference file, and generates the UI according to its content.
Inputs & outputs
When to use ui
- →Generate contact form
- →Build landing page section
- →Create accessible UI component
About this skill
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.mdwith highest priority. - Apply
${CLAUDE_SKILL_DIR}/references/frontend-design.mdonly 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
When not to use it
- →When explicit requests for gradients, glows, or heavy decorations are not made
- →When explicit requests for animations or custom easing are not made
Limitations
- →Gradients, glows, heavy decorations are only permitted when explicitly requested
- →Animations and custom easing are only permitted when explicitly requested
How it compares
This skill automatically applies design constraints and accessibility rules, unlike manual UI development.
Compared to similar skills
ui side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| ui (this skill) | 0 | 3mo | No flags | Beginner |
| ui-ux-pro-max | 0 | 2mo | Review | Beginner |
| ui-ux-pro-max | 0 | 2mo | Review | Intermediate |
| ui-ux-pro-max | 1,909 | 5mo | Review | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
You might also like
ui-ux-pro-max
darkmatter
UI/UX design intelligence for web and mobile. Includes 50+ styles, 161 color palettes, 57 font pairings, 161 product types, 99 UX guidelines, and 25 chart types across 10 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, and HTML/CSS). Actions: plan, build, cr
ui-ux-pro-max
majiayu000
Frontend UI/UX design intelligence - activate FIRST when user requests beautiful, stunning, gorgeous, or aesthetic interfaces. The primary skill for design decisions before implementation. 50 styles, 21 palettes, 50 font pairings, 20 charts, 8 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Nati
ui-ux-pro-max
nextlevelbuilder
UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 8 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient.
ui-design
TencentCloudBase
Professional UI design and frontend interface guidelines. Use this skill when creating web pages, mini-program interfaces, prototypes, or any frontend UI components that require distinctive, production-grade design with exceptional aesthetic quality.
design-with-taste
MaggieAppleton
Apply the "Family Values" design philosophy to every UI you build. Use this skill whenever creating frontends, components, apps, landing pages, dashboards, or any user-facing interface. Enforces three core principles — Simplicity (gradual revelation), Fluidity (seamless transitions), and Delight (se
common-ui-design
HoangNguyen0403
Design distinctive, production-grade frontend UI with bold aesthetic choices. Use when building web components, pages, interfaces, dashboards, or applications in any framework (React, Next.js, Angular, Vue, HTML/CSS).