frontend-design

Create production-grade frontend interfaces with semantic HTML and CSS variables.

Updated Jul 30, 2025

Search Tags:#typography #accessibility #design-system #motion #frontend-design #aesthetic-direction #ui-craft

Ready to run

npx skills add https://github.com/tmarsbr/portifolio --skill frontend-design-tmarsbr

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/tmarsbr/portifolio/tree/main/skill-ux/skills/frontend-design
Command: npx skills add https://github.com/tmarsbr/portifolio --skill frontend-design-tmarsbr

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design teams often struggle with generic UI patterns and inconsistent aesthetics. This skill provides a principled approach to create production-grade frontend interfaces with a clear, intentional visual identity.

Core Features & Use Cases

Explicit aesthetic direction with a named design stance that guides UI decisions and component systems.
Technical correctness with working HTML/CSS/JS or framework code, not mockups.
Design thinking and systematization: a framework that enforces purpose, tone, and a differentiation anchor.
Implementation standards: semantic, accessible HTML; CSS variables; modular React components; and performance-conscious practices.
Anti-patterns and integration: avoids template-like layouts and AI-default aesthetics, and aligns with branding, copywriting, and marketing psychology.

Quick Start

Define a bold design direction and implement a production-ready frontend example that adheres to the rules.

Frequently Asked Questions about frontend-design

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

FAQPage Schema

How do I create a frontend design system that avoids generic UI patterns?▼

To create a frontend design system that avoids generic UI patterns, establish an explicit aesthetic direction with a named design stance. This enforces purpose, tone, and a differentiation anchor to guide UI decisions, resulting in a distinctive visual identity.

What is the best way to build accessible frontend interfaces with semantic HTML?▼

The best way to build accessible frontend interfaces is to enforce implementation standards using semantic HTML and CSS variables. This approach ensures technical correctness with working code, avoiding template-like layouts while maintaining accessibility.

Can I use this approach to generate production-ready React components for web applications?▼

Yes, you can generate production-ready React components for web applications. The process enforces implementation standards including modular React components, CSS variables, and performance-conscious practices to deliver technical correctness rather than mockups.

Why does my frontend UI look generic and lack a distinctive aesthetic direction?▼

Your frontend UI looks generic when it lacks an intentional aesthetic direction. Applying a disciplined design-thinking process with a named design stance and a differentiation anchor solves this by enforcing purpose and tone, avoiding template-like layouts.

How do I evaluate motion and typography choices for a component library?▼

To evaluate motion and typography choices for a component library, define a bold design direction and calculate a DFII score. This framework enforces purpose, tone, and a differentiation anchor, ensuring your design system maintains a clear, intentional visual identity.