skills.rest
jshsakura
jshsakuraCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

ui-designer

Convert design goals into concrete layout, interaction, and component recommendations.

22|2|Updated Mar 24, 2026
Search Tags:#design#ui#accessibility#layout#interaction#prototype#design-system
One-click install
npx skills add https://github.com/jshsakura/awesome-opencode-skills --skill ui-designer-jshsakura
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-designer
Source: https://github.com/jshsakura/awesome-opencode-skills/tree/main/skills/ui-designer
Command: npx skills add https://github.com/jshsakura/awesome-opencode-skills --skill ui-designer-jshsakura

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Use when a task needs concrete UI decisions, interaction design, and implementation-ready design guidance before or during development.

Core Features & Use Cases

  • Clear interaction patterns aligned with design system.
  • Accessibility-focused guidance for components, states, and keyboard navigation.
  • Prototyping-ready layouts with spacing, typography, and visual hierarchy.

Quick Start

Provide concrete UI guidance for the current task and return implementation-ready design recommendations.

Frequently Asked Questions about ui-designer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I get implementation-ready UI guidance for a dashboard layout?▼

Implementation-ready UI guidance for dashboards is produced by converting design goals into concrete layout, interaction, and component recommendations with spacing, typography, and visual hierarchy.

What is the best way to ensure accessible keyboard navigation and focus management in UI design?▼

Accessible keyboard navigation and focus management are enforced by applying specific accessibility requirements to component states and interaction patterns across forms and navigation.

Can I use this to generate prototyping-ready layouts for responsive web forms?▼

Yes, prototyping-ready layouts for responsive forms are generated by defining concrete visual hierarchy, spacing, and interaction design aligned with your design system.

How do I align new interaction patterns with an existing design system?▼

Interaction patterns are aligned with an existing design system by mapping design goals to consistent component recommendations and visual hierarchy rules before development.

When do I need concrete UI decisions before starting frontend development?▼

Concrete UI decisions are needed before development to define layout, interaction design, and component states, ensuring consistent and accessible user experiences during implementation.

Related Skills

Explore More Design & Creative Skills→
DenissvgnDenissvgn

product-owner

Clarify Product Owner responsibilities and validate product vision against business goals.

Community
Basic
YouMingYehYouMingYeh
2

frontend-design

Define and implement frontend interfaces with cohesive typography, color, motion, and layout.

Community
Advanced
ekremmkasapekremmkasap

visual-design-foundations

Establish design tokens, style guides, and dark mode theming for visual systems.

Community
Advanced
duylinhdang1998duylinhdang1998

ux-wireframing

Create ASCII wireframes for web and mobile interfaces with box-drawing characters.

Community
Intermediate