From agent-skills
Creates accessible, responsive frontend UIs including components, pages, dashboards, forms, and landing pages with semantic HTML, CSS variables, and interactive states.
npx claudepluginhub arvindand/agent-skills --plugin agent-skillsThis skill is limited to using the following tools:
Create functional, accessible, visually distinctive interfaces. Output is working code.
Searches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.
Searches prompts.chat for AI prompt templates by keyword or category, retrieves by ID with variable handling, and improves prompts via AI. Use for discovering or enhancing prompts.
Checks Next.js compilation errors using a running Turbopack dev server after code edits. Fixes actionable issues before reporting complete. Replaces `next build`.
Create functional, accessible, visually distinctive interfaces. Output is working code.
Activate automatically when:
Before coding, identify (internal reasoning):
Fetch implementation values from REFERENCES.md:
Produce working implementation with:
Run through checklist before delivering.
| Requirement | Standard |
|---|---|
| Contrast | 4.5:1 text, 3:1 UI components |
| Focus states | Visible outline on all interactive elements |
| Touch targets | Minimum 44×44px |
| Reduced motion | Respect prefers-reduced-motion |
| Labels | All inputs have associated labels |
| Empty states | Helpful message + clear action |
| Error states | Explain what happened + how to fix |
Match to context. See REFERENCES.md for characteristics.
| Style | Best For |
|---|---|
| Minimalism | Productivity, professional, portfolios |
| Glassmorphism | Dashboards, tech products |
| Neubrutalism | Creative, startups, distinctive brands |
| Editorial | Content sites, publications |
| Organic | Consumer apps, wellness, community |
| Dark Mode | User preference, low-light contexts |
Avoid these markers of generic AI output:
Copy and track:
- [ ] Context assessed (problem, users, aesthetic direction)
- [ ] REFERENCES.md consulted for palette + fonts
- [ ] All interactive states implemented
- [ ] Loading and error states included
- [ ] Contrast meets WCAG AA
- [ ] Semantic HTML used
- [ ] Focus states visible
- [ ] Form inputs labeled
- [ ] prefers-reduced-motion respected
- [ ] Responsive breakpoints tested
- [ ] Empty states handled
| Issue | Action |
|---|---|
| User dislikes direction | Propose 2-3 alternatives from Aesthetic Directions |
| Looks too generic | Check Anti-Patterns, apply distinctive typography |
| Accessibility concerns | Verify contrast, focus states, semantic HTML |
| States incomplete | Walk through checklist systematically |
License: MIT - See LICENSE for complete terms Author: Arvind Menon