skills.rest
samjhecht
samjhechtCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-design

Generates responsive, accessible HTML/CSS/JS frontend interfaces with bold aesthetic direction.

4|1|Updated Oct 29, 2025
Search Tags:#design#accessibility#frontend#css#animation#UI components#aesthetics
One-click install
npx skills add https://github.com/samjhecht/wrangler --skill frontend-design-samjhecht
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/samjhecht/wrangler/tree/main/skills/frontend-design
Command: npx skills add https://github.com/samjhecht/wrangler --skill frontend-design-samjhecht

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill designs and implements distinctive frontend interfaces with bold aesthetics and production-grade quality.

Core Features & Use Cases

  • Aesthetic direction: bold, unique visual language
  • Working UI code: accessible, responsive components
  • Accessibility & motion: typography, color, motion

Quick Start

Provide requirements for a component, page, or app, then the skill will deliver a finished UI.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I build accessible, responsive web components with a cohesive design system?▼

Production-grade frontend design generates accessible, responsive web components with bold aesthetic direction, consistent typography and color systems, and semantic HTML/CSS/JS code ready to deploy across modern frameworks.

Can I use this to design a full application with production-ready CSS and animations?▼

Yes. This approach delivers complete applications with polished animations, responsive layouts, accessible motion, and production-grade code conforming to explicit design system guidance and deploy-ready quality.

What's the best way to ensure my frontend UI meets accessibility and performance standards?▼

Frontend design implements accessibility, responsive behavior, and production-grade performance across HTML, CSS, JavaScript, and modern frameworks, delivering interfaces that meet both aesthetic and compliance requirements.

How do I create distinctive, bold web interfaces without sacrificing code quality?▼

Production-grade frontend design balances bold visual language with accessible, responsive components and clean code structure, ensuring aesthetic integrity and performance across all devices and frameworks.

Does this work with modern JavaScript frameworks like React or Vue?▼

Yes. This skill applies to web components, pages, and full applications across modern frameworks, delivering accessible, responsive code with consistent design systems and production-ready quality.

Related Skills

Explore More Design & Creative Skills→
Tea-4-LifeTea-4-Life

frontend-design

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

Official
Advanced
EzioPeterEzioPeter
1

frontend-design

Generate React, Vue, or HTML components with responsive styling from design briefs.

Community
Advanced
pau-vegapau-vega

tailwind-design-system

Provides Tailwind 4 CSS theming and reusable UI components for building design systems.

Community
Advanced
elihuvillarauselihuvillaraus
2

rapid-proto

Build Next.js prototypes with Clerk authentication and Supabase.

Community
Advanced