skills.rest
SL-A-SH
SL-A-SHCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Generate production-grade frontend interfaces with typography, color, spacing, and accessibility best practices.

Updated Jan 22, 2025
Search Tags:#typography#design#ui#accessibility#frontend#responsive#aesthetics
One-click install
npx skills add https://github.com/SL-A-SH/my-portfolio --skill frontend-design-sl-a-sh
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/SL-A-SH/my-portfolio/tree/main/.claude/skills/frontend-design
Command: npx skills add https://github.com/SL-A-SH/my-portfolio --skill frontend-design-sl-a-sh

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill eliminates indistinct, templated frontends by guiding creation of distinctive, production-grade web interfaces and components with high design quality and intentional aesthetic decisions.

Core Features & Use Cases

  • Context-first design: Requires explicit target audience, use cases, and brand personality before producing visual or code artifacts.
  • Production-ready implementation: Produces working HTML/CSS/JS (or framework components) with careful attention to typography, color systems, spacing, motion, interaction, responsive behavior, and accessibility.
  • Aesthetic differentiation: Helps craft memorable visual directions (e.g., brutalist, editorial, retro-futuristic) and implements them consistently across pages, components, and assets.
  • Use Case: Shape a portfolio homepage and component library that reads as a refined brand expression rather than generic AI-generated output.

Quick Start

Generate a bold, production-ready homepage hero and component set for a creative portfolio aimed at design professionals, specifying target audience, brand tone, and technical constraints.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I generate production-ready frontend interfaces that avoid generic AI aesthetics?▼

Generate production-ready frontend interfaces by enforcing typography, color systems, spacing, motion, and accessibility best practices. This approach requires explicit target audience and brand personality context to produce distinctive web components rather than templated outputs.

Can I build responsive web components without providing explicit brand personality context?▼

No, building responsive web components requires explicit user-provided design context first. You must specify target audience, use cases, and brand personality before the system can produce intentional aesthetic decisions and production-ready implementation.

What's the best way to create a distinctive visual system for a single-page application?▼

Create a distinctive visual system for a single-page application by defining a memorable aesthetic direction like brutalist or editorial, then enforcing consistent typography, color, spacing, and interaction patterns across all pages and components.

Does this frontend design approach enforce accessibility and responsive behavior during generation?▼

Yes, this frontend design approach enforces accessibility and responsive behavior during generation. It carefully applies accessibility best practices alongside typography, color, spacing, and motion rules to ensure production-grade web interfaces.

Why do generic AI-generated frontends look indistinct, and how is this avoided?▼

Generic AI-generated frontends look indistinct due to a lack of intentional aesthetic decisions. This is avoided by requiring explicit design context and enforcing specific typography, color systems, and motion rules to craft memorable visual directions.

Related Skills

Explore More Design & Creative Skills→
mklozmkloz

impeccable

Create production-grade frontend interfaces from design context and constraints.

Community
Advanced
joyz0joyz0

frontend-design

Create production-ready web interfaces with HTML/CSS/JS or React components.

Community
Advanced
EzequielpereyraaEzequielpereyraa

ui-design

Align React UI components with typography, color, and spacing tokens.

Community
Intermediate
FlukeSupakornFlukeSupakorn
1

frontend-design

Identify frontend design requirements and produce React components, HTML/CSS, or design specs.

Community
Advanced