avav25/ui-ux-design
.agents/skills/ui-ux-design/SKILL.md
UI/UX design systems, Figma workflows, accessibility checklists, browser-based visual audit with automated screenshots, component specification patterns, and design-to-code handoff procedures. Use when designing interfaces, creating design systems, auditing accessibility, reviewing existing UI via browser screenshots, specifying components, or preparing design handoff for developers.
development
Updated Apr 16, 2026
$ install --global
skillsauthnpx skillsauth add avav25/ai-assets 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, 12:59 AM36.7s5 files scanned
SKILL.md
- name:
- ui-ux-design
- description:
- UI/UX design systems, Figma workflows, accessibility checklists, browser-based visual audit with automated screenshots, component specification patterns, and design-to-code handoff procedures. Use when designing interfaces, creating design systems, auditing accessibility, reviewing existing UI via browser screenshots, specifying components, or preparing design handoff for developers.
- user-invocable:
- true
UI/UX Design
Systematic UI/UX design skill with design system creation guides, Figma workflow patterns, accessibility audit checklists, browser-based visual audit procedures, and design-to-code handoff templates. Produces consistent, accessible, conversion-optimized interfaces.
When to Use
- Creating or extending a design system (tokens, components, patterns)
- Designing new pages, features, or user flows
- Auditing existing UI for accessibility compliance
- Preparing design specifications for developer handoff
- Setting up Figma project structure and workflows
- Reviewing existing UI via automated browser screenshots and heuristic analysis
- Reviewing UI components against heuristics and platform guidelines
When NOT to Use
- Writing page content or copy (use
content-creationskill) - Implementing frontend code (use
frontend-engineerrole) - Conducting SEO audits (use
seo-reviewskill workflow) - Writing technical documentation (use
docsskill workflow)
Design System Creation
Step 1: Audit Existing UI
Before creating a design system:
- Screenshot inventory: Capture all existing screens and components
- Pattern extraction: Identify recurring colors, typography, spacing, components
- Inconsistency map: Document where the same concept is implemented differently
- Priority matrix: Rank components by frequency of use × inconsistency severity
Step 2: Define Foundations
Build from the ground up:
| Foundation | What to Define | Token Naming |
|---|---|---|
| Color | Brand, semantic, neutral, overlay palettes | color-{category}-{shade} |
| Typography | Font families, size scale, weights, line heights | font-{property}-{size} |
| Spacing | Base unit (4px or 8px), scale | spacing-{size} |
| Border radius | Scale from none to full | radius-{size} |
| Elevation | Shadow levels | shadow-{level} |
| Motion | Duration, easing curves | motion-{property}-{variant} |
| Breakpoints | Viewport thresholds | breakpoint-{name} |
Step 3: Build Components
Follow Atomic Design progression:
- Atoms: Button, Input, Label, Icon, Badge, Avatar, Checkbox, Radio, Toggle
- Molecules: Input Group, Search Bar, Card, Dropdown, Tooltip, Alert, Breadcrumb
- Organisms: Header, Footer, Sidebar, Form, Data Table, Modal, Navigation
For each component, document:
- Variants: Primary, secondary, outline, ghost, destructive
- Sizes: xs, sm, md, lg, xl
- States: Default, hover, focus, active, disabled, loading, error
- Accessibility: ARIA role, keyboard behavior, screen reader announcement
- Responsive: Behavior at each breakpoint
- Do / Don't: Usage examples and anti-patterns
Step 4: Document and Maintain
- Publish component library with live examples
- Version with semantic versioning
- Changelog for every update
- Deprecation notices with migration guides
See design-system-checklist.md for the full creation checklist.
Figma Workflow
See figma-workflow.md for detailed Figma project setup, component organization, Auto Layout patterns, and developer handoff procedures.
Quick Reference
| Figma Concept | Code Equivalent | |---|---| | Auto Layout | Flexbox / CSS Grid | | Component variants | React props / variant configs | | Design tokens (Variables) | CSS custom properties | | Constraints | CSS positioning / responsive rules | | Component instances | React component usage |
Accessibility Audit
See accessibility-checklist.md for the comprehensive WCAG 2.2 AA audit checklist.
Quick Audit (5-Minute Check)
- Tab through the page — can you reach and operate every interactive element?
- Zoom to 200% — does content reflow without horizontal scrolling?
- Check contrast — do all text elements meet 4.5:1 (normal) / 3:1 (large)?
- Screen reader test — do headings, landmarks, and alt text make sense?
- Keyboard-only — can you complete the primary task without a mouse?
Design-to-Code Handoff Template
When handing off designs to developers, provide:
## Component: [Name]
### Visual Spec
- Dimensions: [width × height or fluid]
- Spacing: [padding, margin in token values]
- Colors: [background, text, border in token values]
- Typography: [font, size, weight, line-height in token values]
- Border: [width, style, color, radius in token values]
- Shadow: [elevation token]
### Variants
- [variant-name]: [visual differences]
### States
- Default: [spec]
- Hover: [changes from default]
- Focus: [focus indicator spec]
- Active: [changes]
- Disabled: [opacity, cursor, interaction]
### Responsive Behavior
- Mobile (< 640px): [layout changes]
- Tablet (640–1024px): [layout changes]
- Desktop (> 1024px): [default layout]
### Interactions
- [trigger] → [animation: property, duration, easing]
### Accessibility
- Role: [ARIA role if not implicit]
- Keyboard: [key bindings]
- Screen reader: [announcement text]
### Code Reference
- Component: `<ComponentName variant="..." size="..." />`
- Tokens: `--token-name: value`
Integration
- Follows rules:
ui-ux-designerrole (design principles, accessibility, design systems) - Used by workflows:
ui-ux-designskill (primary),feature-devskill (UI features) - Companion resources:
design-system-checklist.md,figma-workflow.md,accessibility-checklist.md,visual-audit-checklist.md
Related Skills
avav25/knowledge-sync
development
VerifiedTrustedCommunity
Use this skill when running the recurring (daily) knowledge-base rescan for a repo that already has knowledge/.knowledge-sync.yml — the main-thread dispatcher that reads the config, computes the git delta since last_scanned_sha, maps changed paths to affected doc areas, early-exits cheaply when nothing changed, then fans out one Agent(content-writer) per affected area, applies the propose/direct update policy, advances the baseline only on success, and writes an L4 run log — all with the G1 untrusted-content choke-point, secret-scan, deny-list, and budget controls woven in. For first-time setup use /knowledge-sync-init.
1SKILL.mdUpdated May 24, 2026
avav25/knowledge-sync-init
development
VerifiedTrustedCommunity
Use this skill when bootstrapping scheduled knowledge-base sync for a repo that has no knowledge/.knowledge-sync.yml yet — to run one-time setup that detects the knowledge_root from CLAUDE.md/AGENTS.md, maps doc areas to source globs, records opt-in external sources (Linear/Notion/WebFetch, all disabled by default), captures a baseline last_scanned_sha, sets the per-area update policy, generates or seeds knowledge/CONVENTIONS.md, provisions the L4 memory dir, and offers to register the daily routine. Routes ongoing recurring sync operations to /knowledge-sync.
1SKILL.mdUpdated May 24, 2026
avav25/ai-skills-init
tools
VerifiedTrustedCommunity
Use this skill when bootstrapping a target repository to be ai-skills-aware — on the first run of any ai-skills workflow in a fresh repo, when adopting the ai-skills plugin in an existing repo, or after upgrading to a plugin version that adds new memory paths or templates, including when the user does not say "init" but asks to "set up" or "onboard" the repo — to detect codebase type, create CLAUDE.md + AGENTS.md scaffolding, initialize the .ai-skills-memory/ directory tree from L1 templates, and configure .gitignore. Idempotent — safe to re-run. Accepts `--codebase-type <type>` and `--overwrite`. Not for re-initializing only memory — use `/memory-init` instead.
1SKILL.mdUpdated May 18, 2026
avav25/plugin-author
tools
VerifiedTrustedCommunity
Use this skill when extending, repairing, or improving plugin assets, when ingesting a `/feedback` report as a fix-cycle backlog, or when you do not remember which lower-level command is right for the job — the umbrella workflow for ai-skills plugin-asset authoring and maintenance: creating, auditing, fixing, improving, refactoring, and migrating skills, agents, rules, hooks, prompts, schemas, and rubrics inside the plugin. Auto-classifies the request, loads the right knowledge skills (`@prompt-engineering`, `@context-engineering`, `@team-protocols`), and spawns the right subagents (`prompt-engineer`, `system-architect`, `python-engineer`, `software-engineer`, `qa-engineer`, `eval-judge`) via the `Agent` tool.
1SKILL.mdUpdated May 14, 2026