사용 방법
- 설치 명령을 복사하고 자신의 에이전트 환경에 설치하기 전에 소스 패키지를 확인하세요.
- 필요한 도구, 인증 정보, 지원 환경은 원본 문서에서 확인하세요.
- 입력과 원하는 산출물을 설명하고 출처와 결과를 대조하세요.
npx skills add https://github.com/majesticlabs-dev/majestic-marketplace --skill frontend-design시작 전 확인
- 설치에는 모델 구독, API 한도, 파일 접근 권한이 포함되지 않습니다.
- 별점 수와 설치 수는 활동 지표이며 독립적인 품질·보안 검증이 아닙니다.
원본 Skill 문서
원본 저장소의 제목, 예시, 코드, 표, 링크, 이미지를 유지해 표시합니다.
Frontend Design
Orchestrator for creating distinctive, production-grade interfaces.
Skill Routing
Based on needs, invoke specialized skills:
| Need | Skill | Content |
|---|---|---|
| Design tokens | See references/design-md-format.md | DESIGN.md token parsing, export |
| Design direction | frontend-design-philosophy | Aesthetic extremes, anti-patterns |
| CSS implementation | frontend-css-patterns | Typography, color, motion, spatial |
| React/Vue patterns | See references/react-vue.md | Framer Motion, Vue Transitions |
| Rails/Hotwire | See references/rails-hotwire.md | ViewComponent, Stimulus, Turbo |
Framework Resources
React/Vue
See references/react-vue.md for:
- Framer Motion staggered animations
- Vue Transition/TransitionGroup patterns
- Component architecture with design tokens
Rails/Hotwire
See references/rails-hotwire.md for:
- ViewComponent with sidecar styles
- Stimulus reveal/toggle controllers
- Turbo Frames & Streams with animations
- ERB layout patterns with content_for
- CSS design tokens and import order
Implementation Resources
| Resource | Content |
|---|---|
| ui-implementation-guide.md | Typography rules, color, forms, buttons, tables |
| motion-patterns.md | Page load, scroll triggers, hover, performance |
| css-polish-tips.md | Accessibility, scroll, focus, defensive CSS |
| landing-page-design.md | Section design, palettes, typography pairings |
Workflow
1. Check for design tokens
- Look for DESIGN.md in project root
- If found: parse tokens, use as source of truth for colors, typography, spacing
- See references/design-md-format.md for format details
2. Clarify design direction
- Invoke `frontend-design-philosophy` for aesthetic guidance
- User picks: brutalist, minimalist, luxury, playful, etc.
3. Implement CSS foundation
- Invoke `frontend-css-patterns` for typography, color, motion
- If DESIGN.md tokens exist: map tokens to CSS variables or Tailwind theme
- Otherwise: customize Tailwind or write CSS variables
4. Apply framework patterns
- React/Vue: Use references/react-vue.md
- Rails/Hotwire: Use references/rails-hotwire.md
5. Polish and validate
- Use references/css-polish-tips.md for accessibility
- Use references/motion-patterns.md for animation
- Run validation checklist from philosophy skillQuick Reference
Web Interface Standards
See references/web-interface-standards.md for:
- Keyboard operability requirements (WAI-ARIA widget patterns)
- Touch target sizing (44px mobile, 24px desktop)
- Form behavior (Enter submission, autocomplete, mobile keyboards)
- Animation accessibility (
prefers-reduced-motion) - Network performance budgets (POST < 500ms, virtualization thresholds)
Validation Checklist:
- [ ] Distinctive typography (not default fonts)
- [ ] Intentional, limited color palette
- [ ] Layout breaks predictable patterns
- [ ] Motion serves purpose
- [ ] Clear design direction
- [ ] Responsive quality maintained
- [ ] Accessibility preserved
