소스 정보
- 저장소
- ffsshhttiikk/opencode-agents-skills
- 최근 소스 활동
- 2026년 2월 28일 22:55
- 감지된 SKILL.md 언어
- 영어
- 스타
- 3
- 포크
- 2
설치 방법
기본적으로 소스를 먼저 확인하는 Prompt가 선택됩니다. 직접 명령으로 전환하거나 로컬 사본을 다운로드할 수도 있습니다.
소스 파일 검토
설치 여부를 결정하기 전에 SKILL.md와 SkillsMP에 표시된 보조 파일을 읽어 보세요.
SKILL.md 표시 중
SKILL.md
소스 지침 · 읽기 전용 미리보기- name
- ui
- description
- User interface design and implementation
- license
- MIT
- metadata
- {"audience":"developers","category":"design"}
## 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
GitHub에서 보기