frontend-design

Create production-grade frontend interfaces with bold typography, cohesive color schemes, and refined motion.

Updated Aug 8, 2025
One-click install
npx skills add https://github.com/Albarracin-sg/MIS-DOTFILES --skill frontend-design-albarracin-sg
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/Albarracin-sg/MIS-DOTFILES/tree/main/tools/opencode/skill/frontend-design
Command: npx skills add https://github.com/Albarracin-sg/MIS-DOTFILES --skill frontend-design-albarracin-sg

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Create distinctive, production-grade frontend interfaces with high design quality, ensuring polished visuals and consistent UX across components.

Core Features & Use Cases

  • Bold, aesthetic-first frontend architectures that translate requirements into cohesive UI systems.
  • Guidance for typography, color palettes, motion, and responsive layouts to deliver memorable interfaces.
  • Use Case: When building a new component library or a marketing page, apply the design guidelines to achieve a unique, consistent look that stands out.

Quick Start

Provide a frontend brief (component/page/application) and I will deliver a production-grade, design-forward interface.

Frequently Asked Questions about frontend-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create production-grade frontend interfaces with cohesive UI systems?

To create production-grade frontend interfaces, provide a frontend brief covering your component, page, or application requirements. The system translates this into cohesive UI systems featuring bold typography, refined motion, and consistent design quality.

What is the best way to build a distinctive component library with consistent UX?

Building a distinctive component library requires applying aesthetic-first frontend architectures. By defining explicit aesthetic direction, modular design systems, and cohesive color schemes, you achieve a unique, consistent look that stands out.

Can I use this for responsive layouts and accessibility considerations in frontend design?

Yes, this handles responsive layouts and accessibility considerations directly. It satisfies requirements for explicit aesthetic direction across components, pages, and apps to deliver polished visuals and accessible frontend interfaces.

How do I apply bold typography and motion guidelines to a marketing page?

Applying bold typography and motion guidelines involves translating your marketing page requirements into a design-forward interface. The system provides aesthetic-first guidance for color palettes, type, and motion to deliver memorable visuals.

Does this work for building new UI systems from scratch?

Yes, this is designed for building new UI systems from scratch. Provide a frontend brief and it will deliver a production-grade, design-forward interface applying modular design systems and refined motion.

When do I need explicit aesthetic direction for frontend components?

You need explicit aesthetic direction when building components, pages, or apps that require high design quality. It ensures polished visuals, cohesive color schemes, and consistent UX across your entire frontend architecture.