ReddRadar
Agent skill
ui-ux-design
Create production-grade frontend interfaces with strong UX and visual craft. Use when building web components, pages, dashboards, forms, landing pages, or any UI. Use when user says 'build a form', 'create a dashboard', 'design a component', 'make a landing page', or asks for UI/UX work.
Install this agent skill to your Project
npx add-skill https://github.com/arvindand/agent-skills/tree/main/skills/ui-ux-design
SKILL.md
UI/UX Design
Create functional, accessible, visually distinctive interfaces. Output is working code.
When to Use
Activate automatically when:
- User requests UI components, pages, or applications
- User mentions forms, dashboards, landing pages, modals
- User asks to "design", "build", or "create" any interface
- User wants to improve existing UI/UX
Workflow
Step 1: Assess Context
Before coding, identify (internal reasoning):
- Problem being solved
- Target users
- Aesthetic direction (see REFERENCES.md)
- Constraints (framework, brand, accessibility level)
Step 2: Consult References
Fetch implementation values from REFERENCES.md:
- Color palette (with WCAG-compliant values)
- Font pairing
- Component patterns (button, input, card, etc.)
- Spacing and typography tokens
Step 3: Generate Code
Produce working implementation with:
- All interactive states (hover, focus, active, disabled, loading, error)
- Semantic HTML (button, nav, main—not div soup)
- Mobile-first responsive design
- CSS variables for maintainability
Step 4: Verify
Run through checklist before delivering.
Output Requirements
| 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 |
Aesthetic Directions
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 |
Anti-Patterns
Avoid these markers of generic AI output:
- Purple/blue gradients on white
- Inter/Roboto/system fonts everywhere
- Cookie-cutter card layouts
- Rounded rectangles with soft shadows on everything
- Color-only meaning (no icons/text backup)
- Removed focus outlines
- Error messages without solutions
Checklist
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
Recovery
| 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
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
arvindand/agent-skills
github-navigator
GitHub operations via gh CLI. CRITICAL: Use instead of WebFetch for any `github.com` URL or GitHub repo path like `owner/repo`. Use when the user asks to inspect repositories, files, issues, pull requests, releases, Actions runs, or repository structure. Use when the user says 'show README', 'list issues', 'check PR', 'clone repo', or 'analyze this repo'.
arvindand/agent-skills
maven-tools
JVM dependency intelligence via Maven Tools MCP server. Use when the user asks about Maven or Gradle dependencies, JVM library versions, safe upgrades, CVEs, license risks, release history, or project dependency health. Use when reviewing `pom.xml`, `build.gradle`, `build.gradle.kts`, or Maven coordinates. Use when the user says 'check my dependencies', 'should I upgrade X', or 'is this version safe'.
arvindand/agent-skills
skill-crafting
Create, fix, and validate skills for AI agents. Use when user says 'create a skill', 'build a skill', 'fix my skill', 'skill not working', 'analyze my skill', 'validate skill', 'audit my skills', 'check character budget', 'create a skill from this session', 'turn this into a skill', 'make this reusable', 'can this become a skill', 'should this be a skill', or asks for reusable patterns in the session.
arvindand/agent-skills
context7
Documentation lookup via Context7 REST API. Use when the user needs current library APIs, framework patterns, migration guidance, or official code examples for React, Next.js, Prisma, Express, Vue, Angular, Svelte, or other npm/PyPI packages. Use when the user says 'how do I use X library', 'what's the API for Y', or asks for official documentation.
davila7/claude-code-templates
verl-rl-training
Provides guidance for training LLMs with reinforcement learning using verl (Volcano Engine RL). Use when implementing RLHF, GRPO, PPO, or other RL algorithms for LLM post-training at scale with flexible infrastructure backends.
davila7/claude-code-templates
openrlhf-training
High-performance RLHF framework with Ray+vLLM acceleration. Use for PPO, GRPO, RLOO, DPO training of large models (7B-70B+). Built on Ray, vLLM, ZeRO-3. 2× faster than DeepSpeedChat with distributed architecture and GPU resource sharing.
Didn't find tool you were looking for?