skills.rest
MattRib
MattRibCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Create production-grade frontend interfaces with design tokens and aesthetic systems.

Updated Dec 7, 2025
Search Tags:#typography#design#accessibility#frontend#UI#aesthetics#motion
One-click install
npx skills add https://github.com/MattRib/financial_app --skill frontend-design-mattrib
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/MattRib/financial_app/tree/main/.agents/skills/frontend-design
Command: npx skills add https://github.com/MattRib/financial_app --skill frontend-design-mattrib

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill guides the creation of distinctive, production-grade frontend interfaces with exceptional attention to aesthetic details and creative choices, helping teams move beyond generic AI-generated UI results.

Core Features & Use Cases

  • Design Thinking: establish purpose, tone, constraints, and differentiation to guide the UI direction.
  • Production-grade implementation: deliver working frontend code (HTML/CSS/JS, React, Vue, etc.) that adheres to a cohesive aesthetic system.
  • Visual craftsmanship: typography, color systems, motion, spatial composition, and accessible, responsive design.
  • Use Case: create dashboards, landing pages, components, or entire apps with a unique design language.

Quick Start

Design a production-grade React component for a landing page with a bold, distinctive aesthetic, including a header, hero, and responsive layout.

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 distinctive aesthetics?▼

To create production-grade frontend interfaces, you need to establish purpose, tone, and constraints to guide the UI direction, then implement cohesive typography, color systems, and motion across your chosen framework.

Can I build React components with a unique design language using this frontend design approach?▼

Yes, you can build React components with a unique design language by applying design-thinking guidance to deliver working frontend code that adheres to a cohesive aesthetic system rather than generic UI results.

What's the best way to ensure accessibility and responsive layouts in frontend design?▼

The best way to ensure accessibility and responsive layouts is to apply visual craftsmanship principles during component creation, addressing typography, color systems, motion, and spatial composition across React, Vue, or vanilla HTML/CSS.

Does this approach work with Vue and vanilla HTML/CSS or is it limited to React?▼

This approach works across React, Vue, and vanilla HTML/CSS, allowing you to create dashboards, landing pages, components, or entire apps while maintaining consistent design tokens and aesthetic system decisions.

How do I document aesthetic system decisions and reusable UI components?▼

You document aesthetic system decisions and reusable UI components by defining design tokens that capture typography, color systems, and motion choices, ensuring the production-grade interface remains cohesive and maintainable.

Related Skills

Explore More Design & Creative Skills→
pluginagentmarketplacepluginagentmarketplace
1

frontend-technologies

Guide developers through HTML, CSS, JavaScript, and frontend frameworks.

Community
Advanced
NitzanSelwynNitzanSelwyn

convex-component-authoring

Build self-contained Convex components with isolated schemas and modular exports.

Community
Intermediate
Ber-txBer-tx

frontend-design

Design frontend interfaces with HTML, CSS, JavaScript, and React/Vue.

Community
Advanced
onzhangonzhang
2

frontend-design

Generate production-grade frontend interfaces with bold aesthetics and accessible HTML/CSS/JS components.

Community
Advanced