# UI

> User interface design and implementation

- Skill: `ffsshhttiikk/ui` (Agent Skill)
- Install (CLI): `npx skillmds@latest add ffsshhttiikk/ui`
- Raw SKILL.md: https://api.skillmd.com/api/skills/ffsshhttiikk/ui/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- License: MIT
- Author: ffsshhttiikk (https://skillmd.com/u/ffsshhttiikk)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/ffsshhttiikk/ui

---


## What I do
- Design visual interfaces for applications
- Create component hierarchies and layouts
- Implement responsive designs
- Apply design systems and patterns
- Handle typography, color, and spacing
- Build interactive UI components

## When to use me
When building user-facing interfaces for web, mobile, or desktop applications.

## Key Concepts

### Layout Techniques
```css
/* Flexbox */
display: flex;
justify-content: space-between;
align-items: center;

/* Grid */
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
```

### Component Patterns
- Atomic design (atoms, molecules, organisms)
- Container/presenter pattern
- Higher-order components
- Compound components

### Responsive Design
```css
/* Mobile-first approach */
.container {
  padding: 1rem;
}

@media (min-width: 768px) {
  .container {
    padding: 2rem;
  }
}

@media (min-width: 1024px) {
  .container {
    max-width: 1200px;
    margin: 0 auto;
  }
}
```

### Design Systems
- Define typography scale
- Establish color palettes
- Create spacing tokens
- Build component library
- Document usage guidelines