How to use
- Copy the installation command and review the source package before installing it in your own agent environment.
- Check the source document for required tools, credentials and supported hosts.
- Describe your input and desired deliverable; review the output against the source material.
npx skills add https://github.com/majesticlabs-dev/majestic-marketplace --skill frontend-designBefore you start
- Installation does not include a model subscription, API allowance or permission to access your files.
- Repository stars and installation counts describe activity, not an independent quality or security test.
Original skill document
Rendered from the source repository. Headings, examples, code, tables, links, and referenced images are preserved.
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
