ui-ux-design
Flagged{"isSafe":false,"isSuspicious":true,"riskLevel":"low","findings":[{"category":"prompt_injection","severity":"low","description":"The Stop hook defines a prompt that instructs the agent to evaluate task completion and respond with a fixed JSON payload, which could be used to influence or bypass normal behavior.","evidence":"The prompt text: 'Respond {\"ok\": true} if done, or {\"ok\": false, \"reason\": \"specific missing item\"} if not.'"},{"category":"prompt_injection","severity":"low","description":"The workflow references 'internal reasoning' as something to identify before coding, which risks prompting disclosure of chain-of-thought or internal deliberations.","evidence":"Step 1: Assess Context... 'Before coding, identify (internal reasoning):'"}],"summary":"The content is generally safe with no execution or exfiltration payloads. The primary concern is a prompt-injection style hook that could steer or constrain AI behavior, and an instruction to reveal internal reasoning. No dangerous shell commands, data exfiltration, or harmful actions are present."}
npx machina-cli add skill arvindand/agent-skills/ui-ux-design --openclawUI/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
Source
git clone https://github.com/arvindand/agent-skills/blob/main/skills/ui-ux-design/SKILL.mdView on GitHub Overview
UI-UX Design creates production-ready frontend interfaces with strong UX and visual craft. It outputs working code that is accessible, responsive, and aligned to brand references, including color, typography, and component patterns.
How This Skill Works
It follows a four-step workflow: 1) Assess context (problem, users, aesthetic direction, constraints), 2) Consult references for palette, fonts, and components, 3) Generate code with all interactive states, semantic HTML, mobile-first responsiveness, and CSS variables, and 4) Verify against a checklist (contrast, focus states, labels, empty and error states) before delivery.
When to Use It
- User requests UI components, pages, or applications
- User mentions forms, dashboards, landing pages, or modals
- User asks to design, build, or create any interface
- User wants to improve existing UI/UX
- You're delivering frontend interfaces with accessibility and design tokens
Quick Start
- Step 1: Assess context (problem, users, aesthetics, constraints)
- Step 2: Consult REFERENCES.md for palette, fonts, and components
- Step 3: Generate code with states, semantic HTML, responsive design, and CSS variables
Best Practices
- Implement all interactive states (hover, focus, active, disabled, loading, error)
- Use semantic HTML (button, nav, main) instead of div soup
- Apply mobile-first responsive design with CSS variables for maintainability
- Ensure WCAG-compliant contrast (4.5:1 text, 3:1 UI) and accessible focus outlines
- Label all form inputs and respect prefers-reduced-motion
Example Use Cases
- Dashboard UI with interactive cards and real-time widgets
- Responsive landing page with hero, features, and signup form
- Accessible form UI with labeled inputs and inline error messages
- Modal workflow with keyboard navigation and focus trapping
- Design system components: buttons, inputs, cards, and tokens aligned to a palette
