arshia2114/ui-ux-design
skills/ui-ux-design/SKILL.md
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.
development
Updated Apr 16, 2026
$ install --global
skillsauthnpx skillsauth add arshia2114/agent-skills ui-ux-designInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 16, 2026, 8:52 AM8.4s2 files scanned
SKILL.md
- name:
- ui-ux-design
- description:
- 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.
- allowed-tools:
- Read, Write, Edit
- - type:
- prompt
- prompt:
- Check if UI/UX task is complete based on what was asked. If task was advice/consultation only - no code checklist applies. If code was written: verify interactive states, semantic HTML, focus states, labels (for forms), and contrast were considered for what was built. Only flag missing items that apply to the specific output. Respond {\"ok\": true} if done, or {\"ok\": false, \"reason\": \"specific missing item\"} if not.
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
Related Skills
arshia2114/skill-crafting
development
VerifiedTrustedCommunity
Create, fix, and validate skills for AI agents. Use when user says 'create a skill', 'write a skill', 'build a skill', 'fix my skill', 'skill not working', 'analyze my skill', 'run skill analysis', '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', 'could we create a skill', 'should this be a skill', 'check if this could be a skill', or 'any reusable patterns in this session'.
SKILL.mdUpdated Apr 16, 2026
arshia2114/maven-tools
tools
VerifiedTrustedCommunity
JVM dependency intelligence via Maven Tools MCP server. Use when user asks about Java/Kotlin/Scala dependencies, versions, upgrades, CVEs, or licenses. Use when analyzing pom.xml, build.gradle, or any Maven Central dependency. Use when user says 'check my dependencies', 'should I upgrade X', 'is this version safe', or 'what's the latest version of Y'.
SKILL.mdUpdated Apr 16, 2026
arshia2114/github-navigator
tools
VerifiedTrustedCommunity
GitHub operations via gh CLI. CRITICAL: Always use instead of WebFetch for ANY github.com URL. Use when user provides GitHub URL, says 'facebook/react', 'show README', 'list issues', 'check PR', 'clone repo', 'analyze this repo', 'understand the architecture', 'how is X structured', 'explore the codebase'. For deep analysis of external repos, clones locally.
SKILL.mdUpdated Apr 16, 2026
arshia2114/context7
tools
VerifiedTrustedCommunity
Fetch up-to-date library documentation via Context7 REST API. Use when needing current API docs, framework patterns, or code examples for any library. Use when user asks about React, Next.js, Prisma, Express, Vue, Angular, Svelte, or any npm/PyPI package. Use when user says 'how do I use X library', 'what's the API for Y', or needs official documentation. Lightweight alternative to Context7 MCP with no persistent context overhead.
SKILL.mdUpdated Apr 16, 2026