frontend-design-system
Frontend Design System
프로덕션 수준의 UI 디자인을 위한 스킬입니다. 명확한 디자인 토큰, 레이아웃 규칙, 모션 가이드라인, 접근성 체크를 통해 일관되고 확장 가능한 프론트엔드 개발을 지원합니다.
When to use this skill
- 프로덕션 품질 UI 필요: 프롬프트에서 고품질 UI 생성
- 일관된 디자인 언어: 화면 간 일관된 시각적 언어
- 타이포그래피/레이아웃/모션 가이드: 체계적인 디자인 시스템
Instructions
Step 1: Define Design Tokens
// design-tokens.ts
export const tokens = {
More from jeo-tech-ai/oh-my-gods
bmad
BMAD + TEA: Structured System Design (SSD) for AI-driven development. Embeds TEA (Task→Execute→Architect) micro-cycles inside each BMAD phase (Analysis→Planning→Solutioning→Implementation) for traceable, multi-agent execution with automated architect validation before human review.
2agent-workflow
Practical AI agent workflows and productivity techniques. Provides optimized patterns for daily development tasks such as commands, shortcuts, Git integration, MCP usage, and session management.
2agent-development-principles
Universal principles for agentic development when collaborating with AI agents. Defines divide-and-conquer, context management, abstraction level selection, and an automation philosophy. Applicable to all AI coding tools.
2agent-configuration
AI agent configuration policy and security guide. Project description file writing, Hooks/Skills/Plugins setup, security policy, team shared workflow definition.
2omg
OMG — Integrated AI agent orchestration skill. Plan with ralph+plannotator, execute with team/bmad, verify browser behavior with agent-browser, apply UI feedback with agentation(annotate), auto-cleanup worktrees after completion. Supports Claude, Codex, Gemini CLI, and OpenCode. Install: ralph, omc, omx, ohmg, bmad, plannotator, agent-browser, agentation.
2agent-evaluation
Design and implement comprehensive evaluation systems for AI agents. Use when building evals for coding agents, conversational agents, research agents, or computer-use agents. Covers grader types, benchmarks, 8-step roadmap, and production integration.
2