skills.rest
fakhriaditiarahman
fakhriaditiarahmanCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

ui-designer

Designs responsive UI components and layout systems using CSS Grid and Flexbox.

1|Updated Jan 20, 2026
Search Tags:#responsive design#design tokens#frontend development#ui design#component design#layout systems
One-click install
npx skills add https://github.com/fakhriaditiarahman/Your-Skill-Agent --skill ui-designer-fakhriaditiarahman
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-designer
Source: https://github.com/fakhriaditiarahman/Your-Skill-Agent/tree/main/.agent/skills/ui-designer
Command: npx skills add https://github.com/fakhriaditiarahman/Your-Skill-Agent --skill ui-designer-fakhriaditiarahman

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill addresses the challenge of translating design concepts into functional, visually appealing, and technically feasible user interfaces, ensuring consistency and adherence to modern design principles.

Core Features & Use Cases

  • Component Design: Creates reusable UI components based on atomic design principles.
  • Layout Systems: Designs responsive and adaptive layouts using CSS Grid and Flexbox.
  • Visual Design: Implements color theory, typography, and iconography for aesthetic appeal.
  • Design-to-Code: Provides guidance on translating design tokens and patterns into code (e.g., Tailwind CSS, CSS-in-JS).
  • Use Case: Design a responsive card component for a product listing page that adapts its layout and content presentation across mobile, tablet, and desktop viewports, including hover states and accessibility considerations.

Quick Start

Design a responsive card component for a product listing page with hover states and accessibility considerations.

Frequently Asked Questions about ui-designer

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

FAQPage Schema
How do I design responsive layout systems using CSS Grid and Flexbox?▼

Design-to-code workflows translate design tokens into frontend code. This Skill provides guidance on mapping visual design elements and patterns into code implementations like Tailwind CSS or CSS-in-JS for functional user interfaces.

What is atomic design and how does it apply to component design?▼

Atomic design is a methodology for creating reusable UI components from basic elements. This Skill implements component design by generating atomic design elements that ensure visual consistency and adherence to modern design principles across interfaces.

Can I use this to build a responsive card component with hover states?▼

Yes, you can build a responsive card component with hover states. The Skill designs interactive prototypes and UI components for product listing pages, including accessibility considerations and viewport-specific layout adaptations.

Does this Skill work with Tailwind CSS for frontend development?▼

Tailwind CSS is supported for frontend development workflows. The Skill translates design tokens and visual design patterns into code, providing guidance on implementing color theory, typography, and iconography using frameworks like Tailwind CSS.

What's the best way to implement color and typography systems in UI design?▼

Implementing color and typography systems requires applying color theory and font hierarchy for aesthetic appeal. This Skill designs visual design elements by creating structured design tokens that translate visual properties into consistent frontend code.

Related Skills

Explore More Design & Creative Skills→
figmafigma
1.9k

implement-design

Translate Figma designs into UI code using design tokens and existing components.

Official
Advanced
inbharataiinbharatai
22

frontend-design

Design and implement pixel-perfect frontend interfaces with HTML, CSS, and Tailwind.

Community
Intermediate
HuzafiHuzafi

card-component

Create scalable, accessible card components with responsive grid layouts.

Community
Intermediate
Mohamed-ElkahefMohamed-Elkahef

frontend-enhancer

Enhance Next.js frontends with pre-built UI components and design system resources.

Community
Intermediate