sc-ux

Solid

SI-Coder user experience skill for usable, accessible, predictable web interactions: navigation, information architecture, feedback, keyboard behavior, errors/recovery, forms, loading/empty states, responsive task priority, and desktop workbench ergonomics.

Web & Frontend 14 stars 4 forks Updated 2 weeks ago MIT

Install

View on GitHub

Quality Score: 83/100

Stars 20%
39
Recency 20%
90
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
50
License 10%
100
Description 5%
100

Skill Content

# sc-ux — usable before impressive ## Language Keep durable instructions in English. Reply in the user's language unless requested otherwise. ## Core model Optimize for task completion, comprehension, control, recovery, and accessibility. Do not equate fewer visible controls with better UX; hide complexity only when users can still discover, understand, and recover from actions. Before changing a flow, identify: - primary user jobs and frequency, - user expertise and likely mental model, - entry points and navigation path, - current state model, - irreversible/destructive actions, - latency and failure points, - keyboard/touch/pointer requirements, - accessibility requirements, - responsive task priority, - explicit scope exclusions. ## Usability gates Every important flow should satisfy: 1. Status is visible: users can tell what is happening, what changed, and what is selected. 2. Language matches the user's task, not internal architecture. 3. Users retain control: cancel/back/undo/retry where meaningful. 4. Patterns are consistent across the product unless a difference communicates meaning. 5. Prevent errors before explaining them. 6. Prefer recognition over memory: labels, context, recent choices, and visible affordances beat hidden recall. 7. Frequent tasks are efficient without making first use opaque. 8. Interfaces contain only information/actions that earn their place. 9. Errors explain impact and next recovery action. 10. Help appears near the blocking context rat...

Details

Author
rahmanef63
Repository
rahmanef63/si-coder-agent
Created
6 months ago
Last Updated
2 weeks ago
Language
JavaScript
License
MIT

Integrates with

Bundled in these plugins

Similar Skills

Semantically similar based on skill content — not just same category

Web & Frontend Solid

sc-ui

SI-Coder visual interface quality skill. Design, audit, and refine web UI with strong hierarchy, typography, spacing, color, density, motion, component states, responsive craft, and an anti-AI-slop filter while preserving an existing product's design DNA by default.

14 Updated 2 weeks ago
rahmanef63
Web & Frontend Listed

usability-ux-universal-design

Use for ANY user-facing feature, flow, screen, form, navigation, empty/loading/error state, or piece of UI copy to make it user-friendly, intuitive, and approachable for the widest possible range of people — universal and inclusive design for anyone, across any ability, context, language level, and situation. Covers the universal-design principles, established usability heuristics, reducing cognitive load, plain-language content, error prevention and forgiving recovery, and lightweight usability testing/research. Trigger proactively on new UI or flows, redesigns, navigation/IA, onboarding, wizards, forms, empty/loading/error/success states, microcopy/labels/tooltips, confirmations, "is this intuitive/confusing," "hard to use," UX, usability, user-friendly — even without those words, whenever a human will interact with what you're building.

0 Updated 4 weeks ago
techfleetworks
Web & Frontend Listed

ui-ux-design

Apply senior UX/UI engineering principles when building or modifying any user-facing interface. Use this skill whenever creating components that display data, handle user input, manage state transitions, or need accessibility and responsive design — including pages, forms, modals, dashboards, data tables, settings panels, onboarding flows, and error handling. Also use when reviewing existing UI for usability issues, or when you need implementation patterns for common components (tables, filters, navigation, search). This complements the frontend-design skill (which focuses on visual aesthetics) by ensuring interfaces actually work well for real humans.

0 Updated 1 months ago
emcquesten